存档

2010年4月 的存档

滑动门+tab+css sprites

2010年4月15日
1 条评论

关于滑动门的介绍可以参考我之前发布的滑动门的“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

前端开发

滑动门的“2”种实现方法

2010年4月14日
没有评论

这里主要介绍“2”种滑动门(结构相同，样式不同)的实现方法，其实原理都是一样的，截图如下：

方法1的demo

方法2的demo

其主要结构代码为

<div class="box clear_float">
	<a href="#"><span>看看这个滑动门看看这个滑动门看看这个滑动门</span></a>
</div>

方法1的主要样式代码为：

.box a{
        float:left; text-decoration:none; padding:0 0 0 8px; color:#ff0000;
        background:url(redbutt.gif) no-repeat 0 -1px;
      }
.box a span{
             padding:5px 8px 4px 0; display:block; line-height:14px;
             background:url(redbutt.gif) no-repeat right -1px;
           }

方法2的主要样式代码为：

.box a{
        float:left; text-decoration:none; padding:0 8px 0 0; color:#ff0000;
        background:url(redbutt.gif) no-repeat right -1px;
      }
.box a span{
             padding:5px 0 4px 8px; display:block; line-height:14px;
             background:url(redbutt.gif) no-repeat 0 -1px;
           }

这样理解他们：整个滑动门的构造好比画一个圆，方法1是先画左半圆后画右半圆，而方法2是先画右半圆后画左半圆。

前端开发