这几天上班比较清闲,除了偶尔来个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下中文乱码