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 id="box">	<ul id="tab_nav">    	<li>tab_1</li>        <li>tab_2</li>        <li>tab_3</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>

上一篇：js实现无限级树形导航列表

下一篇：同一个网页布局滑动门和TAB修正版