第七章：横向导航菜单

敖游

2015-12-23

来源：遨游建站

　　今天我们开始学习《十天学会web标准(div+css)》的html列表，包含以下内容和知识点：

　　一、横向列表菜单

　　二、用图片美化的横向导航

　　三、css Sprites

　　一、横向列表菜单

　　前边学习过纵向导航菜单，又学习了float属性，那么要实现横向导航菜单是不是很简单了，只需要把li横向排列就可实现了。把第四节的代码拿过来直接用，修改后的代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

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

　　a { color: #000; text-decoration: none; }

　　a:hover { color: #F00; }

　　#menu { border: 1px solid #CCC; height:26px; background: #eee;}

　　#menu ul { list-style: none; margin: 0px; padding: 0px; }

　　#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }

　　</style>

　　</head>

　　<body>

　　<ul>

　　<li><a href="#">网页版式布局</a></li>

　　<li><a href="#">div+css教程</a></li>

　　<li><a href="#">div+css实例</a></li>

　　</ul>

　　</div>

　　</body>

　　</html>

　　提示：可以先修改部分代码后再运行

　　最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。以前许多朋友提问怎么让它水平居中，其实很简单，首先导航的宽度是固定的，然后设置margin:0 auto;即可实现了

1 / 4

阅读228

写评论...