飞龙博客

纯css制作滑动tab选项卡思路

如果你在找纯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>

<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 于广州

加入收藏夹，查看更方便。

所在分类： 网站开发

新作：feilong tab slider pure css ul li no javascript

旧文：超简洁table表格css样式实例分析