純CSS實(shí)現(xiàn)Tab切換標(biāo)簽效果代碼
發(fā)布時(shí)間：2015-09-23 10:19:24 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)Tab切換標(biāo)簽效果代碼,通過(guò)css樣式設(shè)置實(shí)現(xiàn)tab標(biāo)簽切換功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了純CSS實(shí)現(xiàn)Tab切換標(biāo)簽效果代碼。分享給大家供大家參考。具體如下：
這是一款純CSS實(shí)現(xiàn)的Tab簡(jiǎn)潔版，很不錯(cuò)的效果，希望大家喜歡。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab簡(jiǎn)潔版</title>
<style type="text/css">
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
a{font:bold 14px/24px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_貳</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab簡(jiǎn)潔版</title>
<style type="text/css">
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF;}
a{font:bold 14px/24px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a href="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_貳</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家的css網(wǎng)頁(yè)設(shè)計(jì)有所幫助。
相關(guān)文章
Bootstrap+CSS3實(shí)現(xiàn)Tabs選項(xiàng)卡切換特效源碼
Bootstrap+CSS3實(shí)現(xiàn)Tabs選項(xiàng)卡切換特效源碼是一款通過(guò)簡(jiǎn)單的CSS3代碼，將Bootstrap選項(xiàng)卡渲染出非常炫酷的效果。效果非常棒，有需要的朋友可以直接下載使用2016-06-23
jQuery和CSS3響應(yīng)式TAB選項(xiàng)卡切換幻燈片特效源碼
本代碼是一款使用jQuery和CSS3動(dòng)畫(huà)制作的實(shí)現(xiàn)炫酷響應(yīng)式TAB選項(xiàng)卡樣式幻燈片特效源碼。切換時(shí)帶有非常炫酷的CSS3動(dòng)畫(huà)效果2016-02-02
純CSS3實(shí)現(xiàn)的干凈清爽tab選項(xiàng)卡切換特效源碼
純CSS3實(shí)現(xiàn)的干凈清爽tab選項(xiàng)卡切換特效源碼，是一段非常常見(jiàn)的TAB選項(xiàng)卡切換代碼，此段代碼展示效果中的主要亮點(diǎn)就是界面干凈、清爽、簡(jiǎn)單，需要此段代碼朋友們可以前來(lái)下2014-11-08純css實(shí)現(xiàn)的tab切換效果(使用錨點(diǎn)作為標(biāo)記)
tab切換效果想必大家都有見(jiàn)到過(guò)吧，或許默認(rèn)它一定是用js腳本實(shí)現(xiàn)的，其實(shí)不然，本例為大家介紹的這個(gè)就是用純css寫(xiě)的tab切換效果2014-08-10
jQuery+css3實(shí)現(xiàn)的超酷無(wú)圖片圓角tab選項(xiàng)卡切換效果
依靠CSS3實(shí)現(xiàn)了Tab選項(xiàng)卡標(biāo)簽的圓角效果，無(wú)需圖片2013-09-10
CSS3+jQuery實(shí)現(xiàn)切換過(guò)程中帶有動(dòng)態(tài)滑動(dòng)展示的選項(xiàng)卡Tab效果
選項(xiàng)卡在切換過(guò)程中帶有動(dòng)態(tài)滑動(dòng)效果，調(diào)用簡(jiǎn)單，選項(xiàng)卡內(nèi)可以放圖片、文本或者圖文混排內(nèi)容2013-06-12
DOMTab-通過(guò)CSS和DOMscripting進(jìn)行tab標(biāo)簽欄切換效果
DOMTab是一個(gè)純JS實(shí)現(xiàn)的tab標(biāo)簽欄切換效果，功能簡(jiǎn)潔實(shí)用，可以通過(guò)點(diǎn)擊tab標(biāo)簽欄切換，也可以通過(guò)JS代碼切換2012-10-12
用純CSS實(shí)現(xiàn)的多欄tab標(biāo)簽自動(dòng)切換效果的代碼
一個(gè)純CSS實(shí)現(xiàn)的tab切換效果，可以自定義多個(gè)標(biāo)簽欄，鼠標(biāo)滑過(guò)任意標(biāo)簽欄時(shí)自動(dòng)切換，并帶有變換效果。2012-08-10
基于JavaScript+CSS的迅雷熱播榜排行列表+tab內(nèi)容切換JavaScript特效
迅雷熱播榜右側(cè)的一個(gè)排行效果，基于JavaScript與CSS的共同結(jié)合來(lái)實(shí)現(xiàn)。2011-08-26
比較簡(jiǎn)單的js tab切換效果代碼(通過(guò)設(shè)置css)
比較簡(jiǎn)單的js tab切換效果代碼(通過(guò)設(shè)置css)2011-03-17
