织梦CMS - 轻松建站从此开始!

文档之家-IT技术文档共享平台

纯CSS水平居中导航

时间:2010-12-03 06:09来源:docfans.net 作者:admin 点击:
纯CSS水平居中导航

对于很多CSS新手来说,制作一个水平居中的菜单几乎是不可能的。如果你有心用Google搜索,你会发现一些方法,大多是依赖CSS HACK ,javascript之类的。(display:inline-block;就是一个例子),这篇文章给您介绍一个方法,不使用任何CSS hack,并且兼容所有浏览器,并且还兼容弹性布局的页面。

 

从一个简单的例子中解释他是如何工作的。

水平居中菜单
下面你应该能看到有四个按钮的导航,第二个按钮为当前状态,您可以试着调正窗口大小,改变网页文字大小,看看如何始终保持这个菜单水平居中。

HTML的代码如下:

[html]
<div id="centeredmenu">
<ul>
<li><a href="#">Tab one</a></li>
<li><a href="#" class="active">Tab two</a></li>
<li><a href="#">Tab three</a></li>
<li><a href="#">Tab four</a></li>
</ul>
</div>
[/html]

CSS如下:

[css]
#centeredmenu {
float:left;
width:100%;
background:#fff;
border-bottom:4px solid #000;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background:#369;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
[/css]

它是如何工作的呢?

我们的中心方法就是浮动元素彼此之间的相对位置。

非浮动的div层

下面是一个DIV(一个块级元素),不浮动,宽度设置为100% 。

左浮动的DIV层

如果我们现在设置div层为左浮动,他会收缩自己内容的宽度。比如上面这个导航按钮文字的宽度。

标准的左对齐菜单
让我们使用传统的左对齐菜单来进一步的了解这个方法,我们把每个元素设置不同的颜色,让我们能清楚的看到他们是如何嵌套在一起的。

请注意以下几点

  • 在 centeredmenu div(蓝色框)设置的是左浮动,但我们给它设置的宽度是100%。
  • 通过UL(粉红色框)左浮动,这意味着,UL将会收缩其内容的宽度,恰好是所有按钮的宽度。
  • 所有li(绿色框)设置左浮动,这将使所有按钮都水平排列。
  • 按钮链接 a (红色框)上的文字就是每个按钮的内容,Tab 1, Tab 2,Tab 2,Tab 4


最后一步是把所有元素li 设置 right:50%; ,使用position:relative;相对位置,这样正好显示在浏览器中间。

主要特点

纯CSS水平居中

没有使用 CSS hacks
这个导航完全使用了纯CSS,任何CSS HACK都没有使用。我们要更多的考虑到CSS向后的兼容性,使其在任何浏览器下都保持规则一致。

iPhone, iPod Touch, 以及 iPad等移动设备的兼容性
safari是最早支持CSS3的浏览器。因为它使用的是强大的Webkit渲染引擎。这就意味着这些动画效果都能很好的在使用safari浏览器的设备上工作。

没有使用JavaScript
JavaScript对于一个网站不是必需的。而一些网站却依赖JavaScript和csshack来调整布局,但这里你不会看到任何JS代码。

可调整文字的大小
这个导航可以随意调整文字大小。 可调整大小的文本增加了网页的易读性。 视力不太好的人可以把字体调的大一些更容易阅读文章, 调正文字大小正变得越来越重要。

跨浏览器兼容
这个水平居中导航将会兼容所有浏览器、
Mac:Safari Firefox 2 & 3   Opera。
Windows:Firefox 2 & 3 Safari Opera Google Chrome Internet Explorer 5.5, 6 & 7

这里还有一些更加漂亮的导航,您可以在线查看。

(责任编辑:eric)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容