CSS Tab簡潔版，切換標簽

2024-09-05 12:20:34

字體：大中小

來源：轉載

供稿：網友

CSS_Tab簡潔版，很不錯的效果，希望大家喜歡。

<!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簡潔版</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   class="iwvjtn8m0"   id="box">	<ul id="tab_nav">    	<li>tab_1</li>        <li>tab_2</li>        <li>tab_3</li>    </ul>    <div   class="iwvjtn8m0"   id="tab_content">    	<div   class="iwvjtn8m0"   id="t_1">tab_壹</div>        <div   class="iwvjtn8m0"   id="t_2">tab_貳</div>        <div   class="iwvjtn8m0"   id="t_3">tab_叁</div>    </div></div></body></html>

上一篇：js實現無限級樹形導航列表

下一篇：同一個網頁布局滑動門和TAB修正版