来一发Float菜单程度居中复杂办法

显示全部楼层 · 发表于 2015-1-15 23:26:36

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
网页制造poluoluo文章简介：今天用ucweb看到了goos发的一篇帖子：谁说Float菜单不成以程度居中，出来看了看，以为办法有点烦琐了，用到了负边距，position:relativel;和很少的一点hack。
今天用ucweb看到了goos发的一篇帖子：谁说Float菜单不成以程度居中，出来看了看，以为办法有点烦琐了，用到了负边距，position:relativel;和很少的一点hack。
我这里另有更复杂的举措，先展现：
实在我表面应当再套一个div，但为了削减碳排放，舍弃。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/CSS">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120pxauto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;border:solid1pxred;padding:20px;}#navigationli{height:30px;float:left;}#navigationlia{float:left;height:30px;line-height:30px;padding:023px;background:#97C099;}#navigationlia:hover{background:#59c099;color:#fff;}</style><title>float菜单局中一法</title></head><body><ulid="navigation"><li><ahref="#">Home</a></li><li><ahref="#">News</a></li><li><ahref="#">Store</a></li><li><ahref="#">Group</a></li><li><ahref="#">Community</a></li><li><ahref="#">Help</a></li></ul></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
个中最为关头的是这一句：

为了照应较低版本IE，这里利用了前提正文，感到在IE7以下中，display:inline;的感化就相称于inline-block;。
依据下面代码退化而来的滑动门导航：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120pxauto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;padding:20px;border:solid1pxred;}#navigationli{height:30px;float:left;}#navigationlia{float:left;background:#97C099url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif)lefttopno-repeat;padding-left:27px;height:30px;overflow:hidden;}#navigationliaspan{height:30px;float:left;background:url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif)right-352pxno-repeat;padding-right:27px;line-height:33px;cursor:hand;}#navigationlia:hover,#navigationli.currenta{background-position:left-176px;color:#009;background-color:#8597B5;}#navigationlia:hoverspan,#navigationli.currentaspan{background-position:right-528px;}#navigationli.currenta{font-weight:bold;}</style><title>依据下面代码晋级为滑动门款式</title></head><body><ulid="navigation"><li><ahref="#"><span>Home</span></a></li><li><ahref="#"><span>News</span></a></li><liclass="current"><ahref="#"><span>Store</span></a></li><li><ahref="#"><span>Group</span></a></li><li><ahref="#"><span>Community</span></a></li><li><ahref="#"><span>Help</span></a></li></ul></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
个中，这两句有需要申明一下，以避免被以为是过剩的：
#navigationlia{overflow:hidden;}/*埋没失落IE5.5、6多失落的那3px，不是3pxbug哈！由于height:30px;line-height:33px;在IE5.5、6中高度就是33px了。*/
#navigationliaspan{cursor:hand;}/*照应IE5.5、6、7鼠标放在span下面不呈手型的bug。别的，IE5.5不撑持cursor:pointer;但IE全版本都熟悉cursor:hand;*/
竣工了，弱点就是，写那一行前提正文，关于有xhtml洁癖的人来讲，就像眼里的沙子，想撤除，那就利用hack也不妨！呵呵！
在safari4，chorme，opera10，ie5.5、5、6、7,ff3中均暂未发明成绩。
</p>
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发Float菜单程度居中复杂办法

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块