Float 菜单水平居中简单方法
Float 菜单水平居中简单方法
发布时间:2016-12-27 来源:查字典编辑
摘要:我这里还有更简单的办法,先展示:其实我外面应该再套一个div,但为了减少碳排放,舍弃。body{font-family:Verdana,Ar...

我这里还有更简单的办法,先展示:

其实我外面应该再套一个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=gb2312" /><style type="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;border:solid 1px red;padding:20px;}#navigation li{height:30px;float:left;}#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}#navigation li a:hover{background:#59c099;color:#fff;}</style><><title>float菜单局中一法</title></head><body><ul id="navigation"><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Store</a></li><li><a href="#">Group</a></li><li><a href="#">Community</a></li><li><a href="#">Help</a></li></ul></body></html>

提示:您可以先修改部分代码再运行

其中最为关键的是这一句:

<>

为了照顾较低版本IE,这里使用了条件注释,感觉在IE7以下中,display:inline;的作用就相当于inline-block;。

根据上面代码进化而来的滑动门导航:

<!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=gb2312" /><style type="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;padding:20px;border:solid 1px red;}#navigation li{height:30px;float:left;}#navigation li a{float:left;background:#97C099 url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) left top no-repeat;padding-left:27px;height:30px;overflow:hidden;}#navigation li a span{height:30px;float:left;background:url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}#navigation li a:hover span,#navigation li.current a span{background-position:right -528px;}#navigation li.current a{font-weight:bold;}</style><><title>根据上面代码升级为滑动门样式</title></head><body><ul id="navigation"><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>News</span></a></li><li><a href="#"><span>Store</span></a></li><li><a href="#"><span>Group</span></a></li><li><a href="#"><span>Community</span></a></li><li><a href="#"><span>Help</span></a></li></ul></body></html>

提示:您可以先修改部分代码再运行

其中,这两句有必要说明一下,以免被认为是多余的:

#navigation li a{overflow:hidden;} /* 隐藏掉IE5.5、6多掉的那3px,不是3px bug哈!因为height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。 */

#navigation li a span{cursor:hand;}/* 照顾IE 5.5、6、7鼠标放在span上面不呈手型的bug。此外,IE5.5不支持cursor:pointer;但IE全版本都认识cursor:hand;*/

完工了,缺点就是,写那一行条件注释,对于有xhtml洁癖的人来说,就像眼里的沙子,想除掉,那就使用hack也无妨!呵呵!

在safari4,chorme,opera10,ie5.5、5、6、7,ff3中均暂未发现问题。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类