CSSer课堂

float后的水平居中菜单

八月 8th, 2009 by San in Web Standard | 1 Comment →

常用的CSS控制的导航菜单中，使用频率最多的无序列表添加float:left来使得li位于一行。
然而，在li元素进行float:left操作后，菜单的水平居中就成为一个比较棘手的话题。以下文章中，

使用position:relative
结合CSS的left属性
调整li元素的position:relative;让其归还right:50%

使用以上方案调整后，具有float:left的菜单就可以实现水平居中效果。

具体看float:left后的水平居中菜单实例:

<!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=utf-8" /> <title>center menu</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none; } html{ height:100%; } body{ text-align:center; height:100%; } .warp{ width:960px; margin:15px auto; padding:5px 0; background:#333; } .menu{ float: left; width:100%; overflow:hidden; } .menu ul{ font: 12px/30px "Times New Roman", Times, serif; float:left; left:50%; margin:0 auto; position:relative; } .menu ul li{ float:left; position:relative; right:50%; margin-left:2px; } .menu ul li a{ display:block; padding:0 15px; text-decoration:none; color:#f30; background:#eee; } .menu ul li a:hover{ background:#08f; color:#fff; } .clearfix:after{ content: "."; display: block; height:0; clear:both; visibility:hidden; } .clearfix{ zoom:1; } </style> </head> <body> <div class="warp clearfix"> <div class="menu"> <ul> <li><a href="#">Menu one</a></li> <li><a href="#">Menu two</a></li> <li><a href="#">Menu three</a></li> <li><a href="#">Menu four</a></li> <li><a href="#">Menu five</a></li> <li><a href="#">Menu one</a></li> <li><a href="#">Menu two</a></li> <li><a href="#">Menu three</a></li> <li><a href="#">Menu four</a></li> <li><a href="#">Menu five</a></li> </ul> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Tags: center menu, float, left, position

139的bug

八月 7th, 2009 by Jo in exercise book | No Comments →

个性签名如果字多，效果很差，建议修改

Tags: 139.com, signature

UCenter home的一些不符合标准的前端问题

八月 5th, 2009 by Jo in Web Standard | 4 Comments →

今天在看UCenter home的架构，因为是需要吧，看了看很多不符合标准的东西，如下：

这里<img />结尾就结错了，应该有一空格一“/”,这样做不仅符合了标准对于以后浏览器的兼容也会更高，等以后浏览器大变革什么的这个绝对没问题，而不太标准的一但出了问题就要改动页面，工作量庞大。

2009-8-6 11-58-34

这个也是表面看着没问题，但是严格来讲<h2>里最好不要加<p>这个标签，要说详细理由，我也无从说起

Tags: ucenter, Web Standard

CSSer课堂

float后的水平居中菜单

139的bug

UCenter home的一些不符合标准的前端问题

终极目标:验证CSS和(x)Html

课程分类

课程回顾

课堂讨论

My Links

SEO Links

大学课本

CSSer课堂

float后的水平居中菜单

139的bug

UCenter home的一些不符合标准的前端问题

终极目标:验证CSS和(x)Html

课程分类

课程回顾

课堂讨论

本章词汇

My Links

SEO Links

大学课本