横向导航菜单

这几天上班比较清闲，除了偶尔来个support case外，基本没有什么事情可做。今天闲着没事就给自己找点事情做。不由而然的来博客园狂。看到园子首页的横向导航菜单不错，就自己来做一个一样的导航菜单。

样本：

一共有两个版本，分别用不同的方式实现：

方法一代码：

<!DOCTYPE html>
<html>
<head>
<meta  charset="gb2312">
<title>横向导航</title>
<style>
*{margin:0;padding:0;}
body{font-size:12px;font-family: Verdana,Arial,Helvetica,sans-serif;}
#menu{border:1px solid;border-color:#FFFFFF #FFFFFF #C8D3DE; font-size:14px;margin-top:20px;}
#menu ul {list-style:none;margin-bottom:-1px;line-height:1.5em;float:left; }
#menu ul li {float:left;margin-left:5px;}
#menu ul li a{display:inline-block;background-color:#E8EDF0;text-decoration:none;padding:4px 10px;color:#000;border:1px solid #C8D3DE;}
#menu ul li a:hover{background-color:#FFFFFF;border-color:#C8D3DE #C8D3DE white;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li ><a href="http://www.baidu.com" style="background-color:#fff;border-bottom-color:#fff;"><span>首页</span></a></li>
<li><a href="http://www.baidu.com"><span>精华</span></a></li>
<li><a href="http://www.baidu.com"><span>候选</span></a></li>
<li><a href="http://www.baidu.com"><span>新闻</span></a></li>
<li><a href="http://www.baidu.com"><span>关注</span></a></li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html>

方法二代码：

<!DOCTYPE html>
<html>
<head>
<meta  charset="gb2312">
<title>横向导航4</title>
<style type="text/css" >
*{margin:0;padding:0;}
body{font-size:12px;font-family: Verdana,Arial,Helvetica,sans-serif;}
#menu{margin-top:20px;font-size:14px;border-color:#fff #fff #C8D3DE;border-width:1px;border-style: solid }
#menu ul{list-style:none;float:left;margin-bottom:-1px;}
#menu ul li{float:left;margin-left:5px;padding:4px 10px;background-color:#E8EDF0;border:1px solid #C8D3DE;}
#menu ul li:hover{background-color:#fff;border-color:#C8D3DE #C8D3DE #fff}
#menu ul li a{text-decoration:none;color:#000;}
#menu li.special{background-color:#fff;border-color:#C8D3DE #C8D3DE #fff}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="special"><a href="http://www.baidu.com"><span>首页</span></a></li>
<li><a href="http://www.baidu.com"><span>精华</span></a></li>
<li><a href="http://www.baidu.com"><span>候选</span></a></li>
<li><a href="http://www.baidu.com"><span>新闻</span></a></li>
<li><a href="http://www.baidu.com"><span>关注</span></a></li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html>

显示效果：

IE下测试：

FF下测试：

chrome 下测试：

 

要点：

1.当父容器下的子容器应用了float后不能撑开父容器问题

2.盒子模型中内边距，外边距同时作用在一起的时候的叠加效果

3.html的编码问题，如果去掉代码中的<meta charset="gb2312">后再ff和chrome下中文乱码

 

 

posted @ 2013-01-07 14:03  st_gloden  阅读(425)  评论(1)  编辑  收藏  举报