十、css网站元素设计——横向导航制作
导航在网站中起着举足轻重的作用，常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。
传统的导航是表格式布局，不仅代码量大，后期维护起来也不方便，而且也没有实现表现与内容的分离，显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。
先看代码：
程序代码
这里我们引入了一个新的元素ul。ul是CSS中使用相当广泛的一种元素，主要用来描述列表型内容。每一个<ul></ul>相当于一个列表块，块中的每一条列表数据用<li></li>来描述，下图是一个不加样式的ul实现的样式效果：
如图：导航对比
显然，ul默认加上了圆点序号，而且自上而下排列。实际上导航可以理解为导航列表，每一个列表数据就可以看做是一个频道,当然也可以用二层嵌套div来实现导航代码结构，但相对于ul来说，div显然过于复杂，而且我们之前也说过，div主要是用来大范围的样式布局。而类似于导航的块状型区域则主要交给ul来处理。
下面我们来看为其实现样式的css代码：
程序代码
传统的导航是表格式布局，不仅代码量大，后期维护起来也不方便，而且也没有实现表现与内容的分离，显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。
先看代码：
程序代码<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">历程</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">优化</a></li>
</ul>
<li><a href="#">首页</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">历程</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">优化</a></li>
</ul>
这里我们引入了一个新的元素ul。ul是CSS中使用相当广泛的一种元素，主要用来描述列表型内容。每一个<ul></ul>相当于一个列表块，块中的每一条列表数据用<li></li>来描述，下图是一个不加样式的ul实现的样式效果：
如图：导航对比
显然，ul默认加上了圆点序号，而且自上而下排列。实际上导航可以理解为导航列表，每一个列表数据就可以看做是一个频道,当然也可以用二层嵌套div来实现导航代码结构，但相对于ul来说，div显然过于复杂，而且我们之前也说过，div主要是用来大范围的样式布局。而类似于导航的块状型区域则主要交给ul来处理。
下面我们来看为其实现样式的css代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
ul{list-style-type:none;} /*去除列表项前端的项目符号*/
ul li{float:left;} /*使列表项不再遵循默认的自上而下样式，而类似于div的向左浮动属性，使右侧对象紧贴左侧最终形成横向排列样式*/
ul li a{display:block;/*块状显示，在第三节讲div的时候曾提过，此处的作用就是把a链接对象由一段文本改为块状对象，使其具备div的一些特性，从而实现内外边距，边框背景等属性*/
margin-left:10px; /*左外边距*/
width:60px; /*块宽度*/
height:16px; /*块高度*/
padding-top:4px; /*上内边距*/
text-align:center; /*文本距中显示*/
background-color:#cecece; /*块背景色*/
color:#009900; /*字体颜色*/
font-size:12px; /*字体大小*/
text-decoration:none;} /*字体装饰无下划线*/
ul li a:hover{color:#fff; /*伪类：指向链接时的字体颜色*/
background-color:#33ccff; /*伪类：指向链接时的背景色*/
text-decoration:underline; /*伪类：指向链接时的字体装饰*/
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">历程</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">优化</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
<!--
ul{list-style-type:none;} /*去除列表项前端的项目符号*/
ul li{float:left;} /*使列表项不再遵循默认的自上而下样式，而类似于div的向左浮动属性，使右侧对象紧贴左侧最终形成横向排列样式*/
ul li a{display:block;/*块状显示，在第三节讲div的时候曾提过，此处的作用就是把a链接对象由一段文本改为块状对象，使其具备div的一些特性，从而实现内外边距，边框背景等属性*/
margin-left:10px; /*左外边距*/
width:60px; /*块宽度*/
height:16px; /*块高度*/
padding-top:4px; /*上内边距*/
text-align:center; /*文本距中显示*/
background-color:#cecece; /*块背景色*/
color:#009900; /*字体颜色*/
font-size:12px; /*字体大小*/
text-decoration:none;} /*字体装饰无下划线*/
ul li a:hover{color:#fff; /*伪类：指向链接时的字体颜色*/
background-color:#33ccff; /*伪类：指向链接时的背景色*/
text-decoration:underline; /*伪类：指向链接时的字体装饰*/
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">历程</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">优化</a></li>
</ul>
</div>
</body>
</html>
特别说明：
1、以下两句都使用了包含选择符。
ul li{}
ul li a{}
2、用ul实现的横向导航显然用了极少的代码量实现了丰富的效果，这是表格所不及的。而且在后期增删频道更为方便。
下面我们对代码修改以实现如下样式：
如图：导航示例
因为有图片，所以要下载示例文件。
该文件只允许会员下载! 登录 | 注册
代码如下：
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>横向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
<style type="text/css">
<!--
body{margin:0px;}
#header{margin:0px auto;width:780px;height:90px;background-color:#000;padding:0px;}
#header img{position:relative;top:20px;left:30px;} /*相对定位，位置根据前一对象进行偏移*/
#nav{
list-style:none;
position:relative; /*相对定位，位置根据前一对象进行偏移*/
top:37px;
left:300px;
width:500px;/*此处须设定宽度，否则在IE与Firefox里不一致且不正常*/
}
#nav li{float:left;}
#nav li a{display:block;
margin-left:10px;
width:69px;
height:16px;
padding-top:4px;
text-align:center;
background-image:url(nav.gif);
background-position:0px -22px; /*背景绝对定位，只显示背景图片的下部分*/
color:#009900;
font-size:12px;
letter-spacing :10;
text-decoration:none;}
#nav li a:hover{color:#fff;
background-image:url(nav.gif);
background-position:0px 0px;/*背景绝对定位，只显示背景图片的上部分,此代码不能省略，因为上面曾指定了背景样式，帮在此处覆盖*/
text-decoration:underline;
}
-->
</style>
</head>
<body>
<div id="header">
<a href="http://www.chaojibaby.com"><img src="css_desiger.gif" alt="超级宝贝" border="0" /></a>
<div id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">历程</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">优化</a></li>
</div>
</div>
</body>
</html>
<html>
<head>
<title>横向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
<style type="text/css">
<!--
body{margin:0px;}
#header{margin:0px auto;width:780px;height:90px;background-color:#000;padding:0px;}
#header img{position:relative;top:20px;left:30px;} /*相对定位，位置根据前一对象进行偏移*/
#nav{
list-style:none;
position:relative; /*相对定位，位置根据前一对象进行偏移*/
top:37px;
left:300px;
width:500px;/*此处须设定宽度，否则在IE与Firefox里不一致且不正常*/
}
#nav li{float:left;}
#nav li a{display:block;
margin-left:10px;
width:69px;
height:16px;
padding-top:4px;
text-align:center;
background-image:url(nav.gif);
background-position:0px -22px; /*背景绝对定位，只显示背景图片的下部分*/
color:#009900;
font-size:12px;
letter-spacing :10;
text-decoration:none;}
#nav li a:hover{color:#fff;
background-image:url(nav.gif);
background-position:0px 0px;/*背景绝对定位，只显示背景图片的上部分,此代码不能省略，因为上面曾指定了背景样式，帮在此处覆盖*/
text-decoration:underline;
}
-->
</style>
</head>
<body>
<div id="header">
<a href="http://www.chaojibaby.com"><img src="css_desiger.gif" alt="超级宝贝" border="0" /></a>
<div id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">历程</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">优化</a></li>
</div>
</div>
</body>
</html>
特别说明：
此处顺便讲解了如何应用了背景图片的绝对定位属性，把原本两个不同色调的图片合二为一，然后定位显示。从而丰富导航的样式。当然背景属性此处不做重点，我们会在以后的教程中详细讲解。
通过这两个示例的练习，想必大家都能做出漂亮的横向导航了吧。下一节我们将来制作纵向导航
浙公网安备 33010602011771号