Tab效果

如何实现下面这种效果了：

1.如下图箭头所示

想要实现下面这个效果：

如何去除箭头处的线了？
昨天在blueidea问了下,
得到如下解决办法：
<style type="text/css"> body{font:12px; margin:100px 0 0 200px;} #top_menu1 {clear:both; height:32px; text-align:left; padding-left:2px;} .top_list {clear:both; height:32px; width:500px; margin:0px; padding:0; text-align:left; background:url(http://www.visc.cn/blog/upload/bg_top0.gif) left bottom repeat-x;} .top_list ul {list-style-type:none; margin:0px; padding:0px;} .top_list li {padding:0px;} .left{ float:left; margin:0; padding:0;} .top_menu2{ float:left; line-height:25px; width:500px; margin:0; padding:0; background:#dbf1ee; border-left:1px #81cdc7 solid; border-right:1px #81cdc7 solid; border-bottom:1px #81cdc7 solid;} .top_menu2 ul{list-style:none; margin:0; padding:0;} .top_menu2 li{ padding:0;} .ft_0f8{font-weight:bold; color:#0f8b7e;} .top_menu1_text1 { width:63px; text-align:center; line-height:29px; padding-top:2.5px;text-decoration:none;} .tab_one { height:28px; background:url(http://www.visc.cn/blog/upload/bg_top.gif) bottom left no-repeat; border-bottom:1px #dbf1ee solid;} a:link{ color:#000; text-decoration:none;} a:visited{ color:#000; text-decoration:none;} a:hover{ color:#000; text-decoration:none;} a.a_bred:link { font-weight:bold; color:#ff0000; text-decoration:none;} a.a_bred:visited{ font-weight:bold; color:#ff0000; text-decoration:none;} a.a_bred:hover { font-weight:bold; color:#ff0000; text-decoration:none;} </style> <body> <div id="top_menu1"> <div class="top_list"> <ul> <li class="left"> <div class="top_menu1_text1 ft_0f8 tab_one">美容会所</div> </li> </ul> </div> <div class="top_menu2"> <ul> <li> <a href="#" class="a_bred">美容美发场所</a> | <a href="#" class="a_w000">全国美容美发</a></li> </ul> </div> </div>
提示：您可以先修改部分代码再运行
在IE6.0/IE7.0/FF2.0/OP9.10/NS7.2下测试通过。
在最外层下边框使用图片（ background:url(http://www.cbiw.com.cn/change/spa/pic/bg_top0.gif) left bottom repeat-x），
然后在显示部分设置 border-bottom:1px #dbf1ee solid（颜色与下面的连接层背景颜色一致）。

http://www.visc.cn/blog/post/94.html

posted on 2007-04-14 09:43 mbskys 阅读(349) 评论(0) 收藏举报