我的个人作品：店铺目录网 中文励志歌曲
DIV+CSS布局之用li标签做网页导航菜单

用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>

 

posted on 2015-01-18 15:36  摆渡人生  阅读(3008)  评论(0)    收藏  举报