Float 菜单水平居中简单方法

站长资源 2024/12/28 佚名

61 1538 61

DDR爱好者之家 Design By 杰米

我这里还有更简单的办法，先展示：
其实我外面应该再套一个div，但为了减少碳排放，舍弃。

提示：您可以先修改部分代码再运行
其中最为关键的是这一句：

为了照顾较低版本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 class="current"><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中均暂未发现问题。

Float,菜单,水平居中

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Float 菜单水平居中简单方法”

暂无评论...

Float 菜单水平居中简单方法

网页设计中常用的19个Web安全字体

简单的CSS 下拉导航菜单实现代码

评论“Float 菜单水平居中简单方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Float 菜单水平居中简单方法

网页设计中常用的19个Web安全字体

简单的CSS 下拉导航菜单实现代码

评论“Float 菜单水平居中简单方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存