div+css 横向导航菜单

最新推荐文章于 2023-04-05 17:37:57 发布

janefir

最新推荐文章于 2023-04-05 17:37:57 发布

阅读量1k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/janefir/article/details/16962337

版权

6 篇文章 0 订阅

订阅专栏

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><a href="#">web教程</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表示背景图片向哪个方向重复，此时为不重复。

关注