如何用div+css做漂亮的横排导航栏

看你是直接在div里面做css格式还是额外调用css，建议是后者,这样看着比较简洁。

创新互联公司专业为企业提供新城网站建设、新城做网站、新城网站设计、新城网站制作等企业网站建设、网页设计与制作、新城企业网站模板建站服务，10余年新城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

html引入外部css:

link rel="stylesheet" href="文件路径/文件名.css"

比如你的html文件里有一个div模块

div id ="daohang"

div id = "daohang1" class =“geshi”导航1/div

div id ="daohang2" class =“geshi”导航2/div

div id ="daohang3" class =“geshi”导航3/div

/div

在另外一个css文件里布置格式

#daohang{

height: 30px;

background-color: white;

border: solid 1px yellow;

margin: 2px 0;

line-height: 30px;

.........

}

依次类推设置3个子div的格式。class用于设置3个子div的共同格式；

比如设置共同字体：

.geshi{

font-family: 微软雅黑;

}

需要什么样的排版格式百度下怎么设置就行了 上面这个主要是框架,具体的格式就在css文件里面设置,什么颜色\背景\字体\位置等等都在css里设置就行,html的div里面不需做什么操作

[img]

div+css怎么写这个导航

用CSS的滑动门技术可以做 步骤：1.素材：找背景图片(图片的width与height 要与ul的一致) 2.代码：style type="text/css" /*确定菜单的整体位置*/ body{margin-top:20px; margin:0;} /* 设置ul的样式*/ ul.menu{ font-family:Arial; font-size:14px; background:url(滑动门技术/hdm.jpg); padding:0 0 0 8px; list-style:none; height:32px;/*背景图片的高*/ width:400px;/*背景图片的宽*/ } .menu li {float:left;}/*设置#menu中的li属性 。li原本的块级元素，设置向左浮动，这样使得各列表横向排列*/ ul li a {display:block;/pp line-height:32px;/pp color:#ddd;/pp text-decoration: none;/pp padding: 0 0 0 14px;/pp } li strong { display:block;} li a:hover strong{ color:#fff; background:url(滑动门技术/Lt_hdm.jpg) ; background-color:#999999;} /style /head body ul class="menu"lia href=" " strongCSS/strong/a/li lia href="#"strongHTML/strong/a/li lia href="#"strongDreamweaver/strong/a/li lia href="#"strongPhotoshop/strong/a/li lia href="#"strongHome/strong/a/li /ul /body

DIV+CSS导航条

CSS导航样式

导航条的制作可以采用一个列表，并对之中的列表项浮动定位，再加上细节上的样式设计，一个导航就完成了，下面根据不同的导航实例分析一下。

横向导航

BADY部分

body

!—以列表作为导航条，列表项作为导航频道，很好的利用了列表标签--

ul id="nav"

lia href="#" id="current"首页/a/li

lia href="#"文章/a/li

lia href="#"参考/a/li

lia href="#"博客/a/li

lia href="#"论坛/a/li

lia href="#"联系/a/li

/ul

/body

CSS部分

style type="text/css"

!--

#nav {

height:26px;

border-bottom:2px solid #2788da;

}

#nav li {

/*针对列表项，去除列表前面的样式，并使之浮动定位，形成横向导航条*/

float:left;

list-style-type:none;

}

#nav li a {

/*将导航文字作为块级元素，使之可以像一个方块按钮一样去运作，对之进行样式设计*/

color:#000;

text-decoration:none;

padding-top:4px;

display:block;

width:97px;

height:22px;

text-align:center;

background-color:#eee;

margin-left:2px;

}

#nav li a#current { /*此样式是想模仿一种文件夹样式，当前文档所在频道会显示为与其他频道不同的样式*/

background-color:#2788da;

color:#fff;

}

#nav li a:hover{ /*设置鼠标悬在按钮上的样式，注意，a:hover只有在a标签中有href属性中的才有效*/

background-color:#bbb;

color:#fff;

}

--

/style

div+css如何布局导航

先用DIV来把导航的位置定下来！ 然后用CSS设置DIV中导航连接的属性，比如颜色下划线等等。 具体怎么做要看你怎么设计了。

比如说百度空间的导航就是以下的设置方法：

/*导航栏设置*/

空间名称和简介区域

#header 主体部分{height:89px;background:#3399CC}

#header div.lc 左背景图{background:url(temp1/hdl.jpg) no-repeat}

#header div.rc 右背景图{background:url(temp1/hdr.jpg) no-repeat top right}

#header div.tit 空间名称{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑体}

#header div.tit a.titlink 空间名称链接{color:#FFFFFF;text-decoration:none}

#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}

#header div.desc 空间简介{top:33px;left:20px;color:#FFFFFF;font-size:13px}

#tabline TAB菜单下方的横线{top:89px;background-color:#FFFFFF}

#tab TAB菜单主体{top:67px;background:url(temp1/tabbg.gif) repeat-x}

#tab a.on,#tab a.on:link,#tab a.on:visited TAB选中状态{margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}

#tab span TAB与TAB之间的分割符“|”{color:#FFFFFF;font-size:14px}

#tab a:link TAB未选中状态{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab2 设置TAB菜单主体{background:#DAE9F5}

#tab2 span TAB选中状态{color:#000000;font-size:12px;font-weight:bold}

#tab2 a TAB未选中状态{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

}

div+css，导航栏目应用，如下图，写成这种样式?

Xhtml Code:

ul id="ullist"

lia href="#"最近来访/a

div111111/div

/li

lia href="#"好友/a

div22222/div

/li

/ul

Css Code:

body { background:#ffd4ef; font:12px Arial, Helvetica, sans-serif;}

#ullist{ height:200px; list-style:none; position:relative; width:202px;}

#ullist li{ display:inline; margin-right:10px;}

#ullist li a{ background:#ffd4ef; border:1px solid #daa7b8; border-bottom:1px solid #ffd4ef; color:#f00; height:12px; line-height:12px; left:20px; padding:3px 5px; position:absolute; text-decoration:none; top:0; z-index:10;}

#ullist li a.ss{ border-bottom:1px solid #daa7b8;}

#ullist li div{ background:#ffd4ef; border:1px solid #daa7b8; height:100px; left:0; position:absolute; top:19px; width:200px; z-index:9;}

jQuery Code:

$('#ullist li div').hide().eq(0).show();

$('#ullist li a').eq(1).css("left","100px").addClass("ss");

$('#ullist li').click(function(){

$('#ullist li div').hide();

$('#ullist li a').addClass("ss");

$(this).find('div').show();

$(this).find('a').removeClass("ss").blur();

});

附效果图一张，如下所示：

如何用DIV+CSS做漂亮的横排导航栏

先码好导航栏所需要的基本的HTML代码

这个就不必多说具体的代码如下：

html

head

title横向导航栏/title

style

!----

/style

/head

body

div class="nav"

ul

lia href="#"首页/a/li

lia href="#"导航1/a/li

lia href="#"导航2/a/li

lia href="#"导航3/a/li

lia href="#"导航4/a/li

lia href="#"导航5/a/li

lia href="#"导航6/a/li

/ul

/div

/body

/html

下面我们通过CSS 来改变他的样式。

首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！

现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。

方法是在style/style之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。

style

!--

.nav ul{

width:980px;/*设置元素宽度为980px*/

border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/

}

--

/style

接下来我们让他居中。我们在样式中加入以下代码。

.nav ul{

width:980px;/*设置元素宽度为980px*/

border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/

margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/

}

因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。

.nav ul li{

float:left;/*让li元素左浮动*/

}

我们看到测试结果如图4。

边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。

接下来，我们通过给元素a添加样式，让他更美观。加入以下代码。

.nav ul li a{

width:80px;/*设置元素宽为80px*/

height:28px;/*设置高度为28px*/

line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/

background:red;/*设置元素的背景为红色*/

color:#FFF;/*文字颜色是白色*/

margin:5px 10px;

font-size:12px;/*用12号字*/

display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/

text-align:center;/*让文本居中*/

text-decoration:none; /*去掉下划线*/

}

我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。

.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

最后稍微整理一下代码

.nav ul{

width:980px;

margin:0px auto;

height:38px;

padding:0;

}

.nav ul li{

float:left;

}

.nav ul li a{

width:80px;

height:28px;

line-height:28px;

background:red;

color:#FFF;

margin:5px 10px;

font-size:12px;

display:block;

text-align:center;

text-decoration:none;

}

.nav ul li a:hover{

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

看看效果，成功没？

思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。

分享文章：divcss导航样式,用div和css做导航条
路径分享：http://kswjz.com/article/dsopeoj.html