纯css制作滑动tab选项卡思路
feilong.org 修订于2010-08-11 03:15:59 310 次浏览如果你在找纯css制作的tab选项卡效果，网上有一些可用的，飞龙收集了一些。不过有些tab可以滑动，有些需要点击。有些是真的用css和xhml制作的tab选项卡，有些说是纯css其实还有JavaScript的配合。有些去掉css后的纯html就变得不可阅读缺乏语义化，有些语义化可以可惜ul dl div混杂，所以飞龙感觉似乎没找到真正合适的纯css制作的tab选项卡。
飞龙晚上决定自己从零开始，自己来做一个可以滑动的纯css不带JavaScript的tab选项卡/滑动门效果。思路是：可以用链接a或li的hover属性模拟滑动效果，再用li下子ul，实现选项卡下内容的显示或隐藏。本日志更新网址：http://feilong.org/tabslider-purecss-nojavascript 飞龙第2次修订于20100811深圳
一、首先抛开css和javascript，写下纯xhml代码。由一个div包含一个双层ul组成。这样可以保证没有css了，一样可以清晰显示内容。
<div class="fltabslider"><ul>
<li><a href="#feilong">feilong</a>
<ul>
<li><a href="http://feilong.org/tabslider-purecss-nojavascript">feilongtab</a></li>
</ul>
</li>
<li><a href="#calligraphy">calligraphy</a>
<ul>
<li><a href="http://feilong.org/feilong">feilong</a></li>
</ul>
</li>
<li><a href="#jiaju99">jiaju99</a>
<ul>
<li><a href="http://jiaju99.com"><img src="http://jiaju99.com/themes/yard/images/logo.gif"/></a></li>
</ul>
</li>
![http://jiaju99.com/themes/yard/images/logo.gif"/](http://jiaju99.com/themes/yard/images/logo.gif"/){kind=link}
<li><a href="#anyting">anyting</a>
<ul>
<li><a href="http://feilong.org">飞龙博客为您解忧</a></li>
<li><a href="http://aneave.com">同在屋檐下</a></li>
<li><a href="http://ajike.com">阿吉客</a></li>
<li><a href="http://yilulu.com">一路路</a></li>
<li><a href="http://bjloto.com">龙头泉</a></li>
</ul>
</li>
</ul></div>
二、然后，编写和调试css。要点包括选项卡标题的初始大小颜色和悬停大小颜色。选项卡li的排列大小和悬停效果。li下子ul的初始和悬停的位置和颜色和大小。子ul下的孙li或孙ul的样式重写。
三、有需要的朋友，请联系飞龙，资料在本地电脑，包括pure css feilongslider和css reset，不想发布到网上。
更新网址：https://feilong.org/tabslider-purecss-nojavascript
最初发布：20100811 03:15:59 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发