十一、css网站元素设计——纵向导航制作
纵向导航多常见于电子商务网站的一侧，便于用户查找各个分类的商品。
先来看一段XHTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
<style type = "text/css">
<!--
#category{
width:100px;
border-color:#ff0000 #ff9900;/*此处边框的设定采用了简写的形式，此处单独设定边框颜色，两个颜色同样是表示上下，与右左。*/
border-style:solid; /*此处单独设定边框样式*/
border-width:0px 1px 1px; /*此处单独设定边框宽度，三个值分别表示：上为0px,右左分别是1px ,下为1px.*/
}
#category h1,#category h2{ /*此处把两级标题相同属性写在一起，节约代码*/
margin:0px;
padding:4px;
font-size:12px;
font-weight:bold;
}
#category h1{
border-top:1px solid #c5c6c4; /*把不同的属性单独设定。*/
}
#category h2{
font-weight:normal; /*前面设定了粗体，此度用正常值覆盖。缺少这一句则按默认值加粗。*/
padding-left:10px; /*用此值覆盖上面设定的值。*/
}
-->
</style>
</head>
<body>
<div id ="category">
<h1>设计</h1>
<h2><a href="#">平面设计</a></h2>
<h2><a href="#">网页设计</a></h2>
<h2><a href="#">动画设计</a></h2>
<h1>程序</h1>
<h2><a href="#">asp程序</a></h2>
<h2><a href="#">php程序</a></h2>
<h2><a href="#">jsp程序</a></h2>
<h1>维护</h1>
<h2><a href="#">网站编辑</a></h2>
<h2><a href="#">网站推广</a></h2>
<h2><a href="#">网站优化</a></h2>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
<style type = "text/css">
<!--
#category{
width:100px;
border-color:#ff0000 #ff9900;/*此处边框的设定采用了简写的形式，此处单独设定边框颜色，两个颜色同样是表示上下，与右左。*/
border-style:solid; /*此处单独设定边框样式*/
border-width:0px 1px 1px; /*此处单独设定边框宽度，三个值分别表示：上为0px,右左分别是1px ,下为1px.*/
}
#category h1,#category h2{ /*此处把两级标题相同属性写在一起，节约代码*/
margin:0px;
padding:4px;
font-size:12px;
font-weight:bold;
}
#category h1{
border-top:1px solid #c5c6c4; /*把不同的属性单独设定。*/
}
#category h2{
font-weight:normal; /*前面设定了粗体，此度用正常值覆盖。缺少这一句则按默认值加粗。*/
padding-left:10px; /*用此值覆盖上面设定的值。*/
}
-->
</style>
</head>
<body>
<div id ="category">
<h1>设计</h1>
<h2><a href="#">平面设计</a></h2>
<h2><a href="#">网页设计</a></h2>
<h2><a href="#">动画设计</a></h2>
<h1>程序</h1>
<h2><a href="#">asp程序</a></h2>
<h2><a href="#">php程序</a></h2>
<h2><a href="#">jsp程序</a></h2>
<h1>维护</h1>
<h2><a href="#">网站编辑</a></h2>
<h2><a href="#">网站推广</a></h2>
<h2><a href="#">网站优化</a></h2>
</div>
</body>
</html>
效果图左：
这里我们没有使用ul和li来实现，而使用了一级标题h1与二级标题h2,其实这些h1,h2,h3标签本身就具有用于对文本进行层级划分的作用，而使用div和class来对其标记，显得更为直观。
需要重点提示的就是边框属性的简写形式，有兴趣的朋友可以参考下。
下面我们只需要通过修改CSS就能使其变得更加美观，这就显示出了内容与样式分离的极大优势了。
先看效果图：
以下代码分别用div+h1+h2和div+ul+li的方法实现相同的样式。经测试在FireFox中完全一样，但在IE6.0中稍有不同。
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
<style type = "text/css">
<!--
#category{background-color:#C1433E; width:120px;border:1px #C8504D solid ;float:left;margin-right:2px;}
#category h1,#category h2{margin:0px;padding:1px 4px;font-size:12px;font-weight:bold;}
#category h1{color:#FFA251;font-size:13px;font-weight:normal; }
#category h2{padding-left:10px;}
#category a{display:block;width:100px;height:22px;background-color:#C8504D;text-align:center;line-height:22px;color:#FFE9A3;text-decoration:none;}
#category a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
#category2{list-style:none;margin:0px;padding:0px;background-color:#c1433e;width:116px;border:1px #C8504D solid ;float:left;}
#category2 li{font-size:13px;color:#ffa251;padding-left:3px;}
#category2 li ul{list-style:none;margin:0px;padding-left:7px;font-weight:bold;padding:0px;}
#category2 li ul li a{display:block;width:100px;height:22px;background-color:#c8504d;text-align:center;line-height:22px;color:#ffe9a3;text-decoration:none;margin:2px 3px;font-size:12px;}
#category2 li ul li a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
-->
</style>
</head>
<body>
<div id ="category">
<h1>设计</h1>
<h2><a href="#">平面设计</a></h2>
<h2><a href="#">网页设计</a></h2>
<h2><a href="#">动画设计</a></h2>
<h1>程序</h1>
<h2><a href="#">asp程序</a></h2>
<h2><a href="#">php程序</a></h2>
<h2><a href="#">jsp程序</a></h2>
<h1>维护</h1>
<h2><a href="#">网站编辑</a></h2>
<h2><a href="#">网站推广</a></h2>
<h2><a href="#">网站优化</a></h2>
</div>
<ul id ="category2">
<li>设计
<ul>
<li><a href="#">平面设计</a></li>
<li><a href="#">网页设计</a></li>
<li><a href="#">动画设计</a></li>
</ul>
</li>
<li>程序
<ul>
<li><a href="#">asp程序</a></li>
<li><a href="#">php程序</a></li>
<li><a href="#">jsp程序</a></li>
</ul>
</li>
<li>维护
<ul>
<li><a href="#">网站编辑</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站优化</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
<style type = "text/css">
<!--
#category{background-color:#C1433E; width:120px;border:1px #C8504D solid ;float:left;margin-right:2px;}
#category h1,#category h2{margin:0px;padding:1px 4px;font-size:12px;font-weight:bold;}
#category h1{color:#FFA251;font-size:13px;font-weight:normal; }
#category h2{padding-left:10px;}
#category a{display:block;width:100px;height:22px;background-color:#C8504D;text-align:center;line-height:22px;color:#FFE9A3;text-decoration:none;}
#category a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
#category2{list-style:none;margin:0px;padding:0px;background-color:#c1433e;width:116px;border:1px #C8504D solid ;float:left;}
#category2 li{font-size:13px;color:#ffa251;padding-left:3px;}
#category2 li ul{list-style:none;margin:0px;padding-left:7px;font-weight:bold;padding:0px;}
#category2 li ul li a{display:block;width:100px;height:22px;background-color:#c8504d;text-align:center;line-height:22px;color:#ffe9a3;text-decoration:none;margin:2px 3px;font-size:12px;}
#category2 li ul li a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
-->
</style>
</head>
<body>
<div id ="category">
<h1>设计</h1>
<h2><a href="#">平面设计</a></h2>
<h2><a href="#">网页设计</a></h2>
<h2><a href="#">动画设计</a></h2>
<h1>程序</h1>
<h2><a href="#">asp程序</a></h2>
<h2><a href="#">php程序</a></h2>
<h2><a href="#">jsp程序</a></h2>
<h1>维护</h1>
<h2><a href="#">网站编辑</a></h2>
<h2><a href="#">网站推广</a></h2>
<h2><a href="#">网站优化</a></h2>
</div>
<ul id ="category2">
<li>设计
<ul>
<li><a href="#">平面设计</a></li>
<li><a href="#">网页设计</a></li>
<li><a href="#">动画设计</a></li>
</ul>
</li>
<li>程序
<ul>
<li><a href="#">asp程序</a></li>
<li><a href="#">php程序</a></li>
<li><a href="#">jsp程序</a></li>
</ul>
</li>
<li>维护
<ul>
<li><a href="#">网站编辑</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站优化</a></li>
</ul>
</li>
</ul>
</body>
</html>
提示：第二种方法使用了ul的嵌套，默认的样式左边会留很大的间距，这时我们使用margin:0px;padding:0px;来清除边距，然后再细调。
浙公网安备 33010602011771号