当前位置: 网站建设 > 网页设计 > 建站经验 >

用CSS3伪类target如何制作tab选项卡效果

时间:2013-03-02 04:07来源:未知 作者:admin 点击:

标签:用CSS3伪类target如何制作tab选项卡效果 Tab(6)伪类(6)制作(46)CSS3(90)target(3)如何(201)选项(4)效果(56)
css3中增加了伪类:target, 用CSS Sprites加快网页加载速度 ,使用:target伪类可以让点击后的id有新的效果,好比改变色彩、位置等等。所以我们可以用它做良多效果,比如tab标签等等。 伪类:target的使用方式跟:link、:hover一样: selector:target{ color:#; /*other styles*/ } 利用target制作tab标签切换的原理是利用点击后改变容器的Y轴属性z-index的值。 Tag: CSS3 伪类 target Tab选项卡 CS
用CSS3伪类target如何制作tab选项卡效果》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023441R013.htm

 

css3中增加了伪类:target,用CSS Sprites加快网页加载速度,使用:target伪类可以让点击后的id有新的效果,好比改变色彩、位置等等。所以我们可以用它做良多效果,比如tab标签等等。

伪类:target的使用方式跟:link、:hover一样:

selector:target{
color:#;
/*other styles*/
}
利用target制作tab标签切换的原理是利用点击后改变容器的Y轴属性z-index的值。

Tag:   CSS3   伪类   target   Tab选项卡     CSS3   伪类   target   Tab选项卡  

CSS部门有一些内容是比拟主要的,首先tab_content里面要应用定位属性position:absolute,让三个tab标签内容重叠起来,而后利用z-index:-1让他们处于Z轴的靠下层,另外,如果不定义背景为白色,三个层的内容会重叠起来,显得非常凌乱。

Html代码:

最后一局部CSS就是应用target伪类转变其z轴档次的,他们是胜利实现后果的要害。

<div class="tab_box">
<ul class="tabs">,用class实现IE8“添加网页快讯”功能;
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id=",用br代替div清除浮动;tab1" class="tab_content">
第一层内容</div>,用a程序读取网站的alexa世界排名;
<div id="tab2" class="tab_content">
第二层内容
<div id="tab3" class="tab_content">
第三层内容
</div>
Html代码部分不要忘却将链接的标签写成#tab1、#tab2和#tab3,否则不能实现效果。

CSS代码:

<style type="text/css">
<!--
.tab_box {
clear:both;
height:40px;
}
.tab_box li {
float:left;
border:1px solid #CCC;
margin:0 5px 0 0;
list-style:none;
padding:5px;
}
.tab_content {
clear:both;
border:1px solid #CCC;
padding:20px;
margin:40px;
 position: absolute;
 z-index:-1;
 background:#FFF;
width:300px;
height:200px;
}
 #tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
-->
</style>

将这些代码拷贝到网页中,然后预览。这里要留神一点,只有支撑CSS3的阅读器才能够看到效果,比方Firefox、google Chrome、Opera,IE系列除了IE9以外,IE6、7、8是看不到效果的。

我们都晓得当咱们点击#id的衔接后,假如网页中有这个id的,网页会主动跳动到其所在地位,生命科学类网站发展模式,如果网页中没有这个id,它就不任何显示。

--> [网站建设之]用CSS3伪类target如何制造tab选项卡效果


(责任编辑:网站建设)
用CSS3伪类target如何制作tab选项卡效果相关文章
上一篇:用CSS Sprites加快网页加载速度 下一篇:用CSS3实现根据文件类型显示不同图标
回到顶部