您的位置：首页 > Web前端 > CSS

div+css 横向导航菜单

2013-11-26 12:00 381 查看
body { font-family: Verdana;font-size: 12px; line-height: 1.5; }
a { color: #000;text-decoration: none; }
a:hover { color: #F00; }
#menu { width:370px; margin:0auto; 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; }//让菜单横向排列
#menu ul li a { display:block;padding: 0px 8px; height: 26px; line-height: 26px;
float:left;}//为了兼容IE6.
#menu ul li a:hover {background:#333; color:#fff;}
 
图片美化横向导航：
显示效果如下：
用到三张图片，分别为当前状态，鼠标放上时样式，和默认样式用的图片：
下面修改css
样式，只截图了一张，设置方法相同：
<styletype="text/css">
body { font-family: Verdana;font-size: 12px; line-height: 1.5; }
a { color: #000;text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px;height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none;margin: 0px; padding: 0px; }
#menu ul li { float:left;margin-left:2px;}
#menu ul li a { display:block;width:87px; height:28px; line-height:28px; text-align:center;
background:url(/upload/2010-08/17/091033_nav_bg2.gif)0 0 no-repeat; font-size:14px;}
#menu ul li a:hover {background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current {background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat;font-weight:bold; color:#fff;}
</style>
<body>
<divid="menu">
<ul>
<li><aid="current" href="#">首页</a></li>
<li><ahref="#">网页版式</a></li>
<li><a href="#">web教程</a></li>
<li><ahref="#">web 实例</a></li>
<li><ahref="#">常用代码</a></li>
</ul>
</div>
</body>
background:#cccurl(images/nav_bg2.gif) 0 0 no-repeat;
1）其中图片放置目录，已经url设置：
/根目录（从工程根目录开始）

~/虚拟站点根目录

../上级目录（../../上上级目录）

./当前目录

2）url后面的两个参数第一个代表距左多少px，第二参数表示距上多少px。0可以不带单位，其他数值必须带单位。

3）no-repeat表示背景图片向哪个方向重复，此时为不重复。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航