13518219792
看你是直接在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]用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
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中导航连接的属性，比如颜色下划线等等。 具体怎么做要看你怎么设计了。
比如说百度空间的导航就是以下的设置方法：
/*导航栏设置*/
空间名称和简介区域
#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}
}
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();
});
附效果图一张，如下所示：
先码好导航栏所需要的基本的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;
}
看看效果，成功没？
思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。
