CSS 实现选项卡式导航

0 Share

如何使用 CSS 来使导航栏呈现选项卡样式。

以下图效果为例。

选项卡式导航示例

选项卡式导航示例

每个菜单项均有上、左、右3个边框,整个菜单栏设置底边框;而菜单下面的内容,没有上边框。

CSS 如下:

.menubar {
	width:640px;
	float:left;
	border-bottom:2px solid #b1c7b0;
}
.menubar li {
	float:left;
	list-style:none;
	background:#edf1d8;
	border:2px solid #b1c7b0;
	border-bottom:none;
	margin-left:4px;
}
.menubar li a {
	display:block;
	text-decoration:none;
	padding:5px 10px;
}
.menubar li a:hover {
	background:#fff;
}
.menubar .current_page_item {
	margin-bottom:-2px;
	background:#FFF;
	font-weight:bold;
	margin-left:4px;
	border-bottom:2px solid #fff;
	position:relative; /* for the fucking IE6 */
}

文章内容部分 #main CSS 如下:

#main {
	width:636px;
	float:left;
	background:#FFF;
	background:#fff;
	border:2px solid #b1c7b0;
	border-top:none;
}

网页中使用类似结构即可:

<div class="menubar">
<ul>
<li class="page_item">首页</li>
<li class="current_page_item">关于</li>
</ul>
</div>

不支持 IE6。
------------------更新------------------

之所以说不支持 IE6 ,是因为涉及到负边距的问题,上面的代码已经修改。感谢 nipao 同学的激励~,关于负边距可以参考下这里

Comments ( 7 )

  1. Reply子曰
    酱油一瓶,俯卧撑三个,走人~~
  2. Replyk2max
    评论表单这的错位看着很不爽 ...
    • Reply卢达
      的确,在 Linux 里面弄的,还没在 IE 测试。
    • Reply卢达
      勉强算对上位置了,收工~
  3. Replynipao
    既然你都说了不支持IE6,那就要解决他呀。不要让问题存在
    • Reply卢达
      <style>*{position:relative}</style><table><input></table> 用这段代码干掉 IE6 算了 ,这样使用 IE6 的人就看不到难看的效果了~~ 嘿嘿
  4. Reply煎鱼
    这样的代码,一般到网上COPY,呵呵

Leave a reply

Your email address will not be published.