1、纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作吧

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }  超链接的属性

a:hover { color: #F00; }                           鼠标经过图像的属性

#nav { width: 100px; border: 1px solid #CCC; }  导航样式

#nav ul { list-style: none; margin: 0px; padding: 0px; } 导航样式

#nav ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; text-align:center; }  导航样式

</style>

</head></p>

<p><body>

<div id="nav">

<ul>

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">6</a></li>

<li><a href="#">7</a></li>

<li><a href="#">8</a></li>

<li><a href="#">9</a></li>

</ul>

</div>

</body>

3、一个完美的副导航就完成了哦

03-14 13:41