之路 » 滑动门+tab+css sprites

首页 > 前端开发 > 滑动门+tab+css sprites

滑动门+tab+css sprites

2010年4月15日

评论发表评论

关于滑动门的介绍可以参考我之前发布的滑动门的“2”种实现方法，这次主要介绍将滑动门和tab以及css sprites结合在一起的一个例子，截图如下：

主要结构代码为：

<div class="wrap02">
    <ul class="clear_float">
        <li class="cur">
            <a href="#"><span>我</span></a>
        </li>
        <li>
            <a href="#"><span>我们</span></a>
        </li>
        <li>
            <a href="#"><span>我们的</span></a>
        </li>
        <li>
            <a href="#"><span>我们的好</span></a>
        </li>
        <li>
            <a href="#"><span>我们的好朋</span></a>
        </li>
        <li>
            <a href="#"><span>我们的好朋友</span></a>
        </li>
    </ul>
</div>

主要样式代码为：

.wrap02{font-size:14px; height:29px; border-bottom:1px solid #d3d8de;}
.wrap02 ul{font-size:14px; position:absolute;}
.wrap02 ul li{float:left; margin-right:8px;}
.wrap02 ul li a{
                 display:block; padding:0 0 0 8px;
			     background:url(slide-tab-sp.png) no-repeat 0 0;
               }
.wrap02 ul li a span{
                      display:block; padding:8px 8px 6px 0; line-height:16px;
                      background:url(slide-tab-sp.png) no-repeat right 0;
                    }
.wrap02 ul li a:hover,.wrap02 ul .cur a{background:url(slide-tab-sp.png) no-repeat 0 -30px;}
.wrap02 ul li a:hover span,.wrap02 ul .cur a span{background:url(slide-tab-sp.png) no-repeat right -30px;}
.cur{font-weight:bold;}

滑动门和css sprites就不用说了，主要想说的是tab的实现。除了背景图片的构造外，下面那条线是重点，核心的样式代码在上面用红色标出了，.wrap02设置了那条线，且高度设为29px，ul的高度为30px并设置position:absolute，这样的话ul就脱离了文档流，显示在.wrap02上面，这样就刚好形成了tab效果，查看demo

之路前端开发