当前位置:主页 > 网页编程 > 正文

纯css实现的tab切换效果(使用锚点作为标记)

10-02 网页编程

其实是使用锚点作为标记,通过点击实现了切换。css代码

复制代码
代码如下:

body,div,ul,li{margin:0; padding:0; font-size:12px;}
.clearFloat{ clear:both; height:0; line-height:0; font-size:0;}
.tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; background-color:#FCEDFF;border:1px solid #DBA4E8; border-bottom:0;}
.tab_ul li{ float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;}
.tab_ul li a{ display:block;width:46px; height:26px; line-height:26px; text-align:center;font-size:12px; color:#000000; text-decoration:none;}
.tab_ul li a:hover{color:#5F0082; font-weight:bold;}
.tabDiv{ margin:0 auto; width:248px; height:200px; border:1px solid #DBA4E8; border-top:0; overflow:hidden;}
.tabDiv ul{ margin:0 auto; padding-top:10px; width:218px; height:190px;}
.tabDiv ul li{ height:24px;color:#666666; font-size:12px; margin-left:20px; }
.tabDiv ul li a{ color:#333333; margin-left:5px;}


复制代码
代码如下:

</pre>html代码<pre name="code" class="css"><body>
<!--tab-->
<ul class="tab_ul">
<li><a href="#ul1">目录1</a></li>
<li><a href="#ul2">目录2</a></li>
<li><a href="#ul3">目录3</a></li>
<li><a href="#ul4">目录4</a></li>
</ul>
<div class="tabDiv">
<ul id="ul1">
<li><a href="#" >java</a></li>
<li><a href="#" >c++</a></li>
<li><a href="#" >c#</a></li>
<li><a href="#" >php</a></li>
<li><a href="#" >javascript</a></li>
<li><a href="#" >css</a></li>
<li><a href="#" >html</a></li>
</ul>
<ul id="ul2">
<li><a href="#" >语文</a></li>
<li><a href="#" >数学</a></li>
<li><a href="#" >英语</a></li>
<li><a href="#" >历史</a></li>
<li><a href="#" >地理</a></li>
<li><a href="#" >生物</a></li>
<li><a href="#" >化学</a></li>
</ul>
<ul id="ul3">
<li><a href="#" >红色</a></li>
<li><a href="#" >黄色</a></li>
<li><a href="#" >橙色</a></li>
<li><a href="#" >绿色</a></li>
<li><a href="#" >紫色</a></li>
<li><a href="#" >蓝色</a></li>
<li><a href="#" >黑色</a></li>
</ul>
<ul id="ul4">
<li><a href="#" >运营</a></li>
<li><a href="#" >设计</a></li>
<li><a href="#" >产品</a></li>
<li><a href="#" >程序</a></li>
<li><a href="#" >美工</a></li>
<li><a href="#" >交互</a></li>
<li><a href="#" >经理</a></li>
</ul>
</div>
<!--tab结束-->
</body>

相关拓展:路径简介

路径是使用绘图工具创建的任意形状的曲线,用它可勾勒出物体的轮廓,所以也称之为轮廓线。 为了满足绘图的需要,路径又分为开放路径和封闭路径。

GIMP/ Adobe illustrator 中所有的矢量图都是由路径构成的。绘制矢量图就是以为着路径的建立和编辑。 一条路径由若干条线段组成,其中可能包含直线和各种曲线线段。为了更好的绘制和修改路径,每个线段的两端均有锚点(Anchor Point)可将其固定,通过移动锚点,可以修改线段的位置和改变路径的形状。

另外,非矢量绘图工具中,也存在路径概念。


seo达人二飞
红德智库的网站技术.擅长网站建设,seo(百度关键词排名). qq:379564208
个人seo案例:配资|配资|股票配资|seo教程

SEO以及网站程序制作业务

seo业务:seo就是搜索引擎优化服务。简单说就是让网站在百度搜索中有个好的排名。我们根据搜索的关键词进行评估报价。

网站制作业务:我们承接中高端网站建设,程序开发。具体根据需求进行报价。我们力求以性价比最高的方案让您满意。