如何用li标签来实现网页导航菜单

来源：互联网发布：fetchassoc php 编辑：程序博客网时间：2024/05/21 10:15

用li标签来做导航菜单是很多网站都采用的方式，但是对于DIV+CSS新手来说，用li标签来实现网页的导航菜单并不容易，它涉及到浮动及内联化和清除浮动这方面。

在这里，我写了一个实例，新手朋友可以参考一下它。

这个实例的几个要点在于：

1、li标签的CSS需要将float属性设置为left(这里就成了左浮动); display属性设置为inline（这里是将li标签设置为内联，它默认是块化的）;

2、需要将li标签中的a标签的css中的display属性设置为block（块化）;

3、需要在ul标签后加上<div style="clear:both"></div>，这是用于清除前面的浮动，如果不清除浮动的话，那后面的标签有可能会变形。

实例代码如下：

<!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=utf-8" /><title>用li标签做网页导航菜单</title><style type="text/css">* {margin:0;padding:0;}#nav{ width:960px; margin:80px auto 0px auto; background:#04A63E; color:#D8F0CE;}#nav li{float:left; display:inline;}#nav li a{ display:block; color:#5CD67B; padding:10px 15px; font-size:13px; font-weight:bold; text-decoration:none;}#nav li a:hover{ background:#5CD67B; color:#FFF;}</style></head><body><div id="nav">  <ul>    <li><a href="http://www.yanshuan.com/">店铺目录网首页</a></li>    <li><a href="http://www.yanshuan.com/single/nvzhuangpinpai.html">品牌女装</a></li>    <li><a href="http://www.yanshuan.com/single/nanzhuangpinpai.html">品牌男装</a></li>    <li><a href="http://www.yanshuan.com/single/tongzhuangpinpai.html">精品童装</a></li>    <li><a href="http://www.yanshuan.com/single/zhonglaonianfuzhuangpinpai.html">中老年服装</a></li>    <li><a href="http://www.yanshuan.com/single/damanvzhuang.html">大码女装</a></li>    <li><a href="http://www.yanshuan.com/single/nvxiepinpai.html">女鞋品牌</a></li>    <li><a href="http://www.yanshuan.com/single/nanxiepinpai.html">男鞋品牌</a></li>    <li><a href="http://www.yanshuan.com/single/neiyipinpai.html">品牌内衣</a></li>    <li><a href="http://www.yanshuan.com/single/jiajupinpai.html">品牌家具</a></li>  </ul>  <div style="clear:both"></div></div></body></html>

0 0