純CSS Tab代碼

2024-09-05 12:17:07

字體：大中小

供稿：網(wǎng)友

用純CSS代碼實(shí)現(xiàn)tabs標(biāo)簽效果，手工代碼實(shí)現(xiàn)，很實(shí)在的TAB選項(xiàng)卡菜單，其實(shí)看懂了代碼，你會(huì)覺得如此簡(jiǎn)單就可寫一個(gè)tab了，用了不少CSs的基礎(chǔ)知識(shí)，通過此，你也許會(huì)更加熟悉如何使用Div CSS布局網(wǎng)頁。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <title>CSS Tabs實(shí)例</title> <style type="text/css" media="all"> #globalnav {	position:relative;	float:left;	width:100%;	padding:0 0 1.75em 1em;	margin:0;	list-style:none;	line-height:1em;}#globalnav LI {	float:left;	margin:0;	padding:0;}#globalnav A {	display:block;	color:#444;	text-decoration:none;	font-weight:bold;	background:#ddd;	margin:0;	padding:0.25em 1em;	border-left:1px solid #fff;	border-top:1px solid #fff;	border-right:1px solid #aaa;} #globalnav A:hover,#globalnav A:active,#globalnav A.here:link,#globalnav A.here:visited {	background:#bbb;}#globalnav A.here:link,#globalnav A.here:visited {	position:relative;	z-index:102;} #globalnav UL {	position:absolute;	left:0;	top:1.5em;	float:left;	background:#bbb;	width:100%;	margin:0;	padding:0.25em 0.25em 0.25em 1em;	list-style:none;	border-top:1px solid #fff;}#globalnav UL LI {	float:left;	display:block;	margin-top:1px;}#globalnav UL A {	background:#bbb;	color:#fff;	display:inline;	margin:0;	padding:0 1em;	border:0}#globalnav UL A:hover,#globalnav UL A:active,#globalnav UL A.here:link,#globalnav UL A.here:visited {color:#444;}</style>	</head> <body><div><h1>CSS tabs</h1> <ul id="globalnav"> 	<li>我的首頁</li> 	<li>About 		<ul> 			<li>版本</li> 			<li>夢(mèng)想</li> 			<li>截圖</li> 			<li>Careers</li> 			<li>歷史</li> 			<li>支持</li> 		</ul> 	</li> 	<li>新聞</li> 	<li>時(shí)速</li> 	<li>Process</li> 	<li>實(shí)例</li> 	<li>Help</li> </ul></div></body> </html>

上一篇：CSS圖片透明

下一篇：jquery CSS實(shí)現(xiàn)ul表格，帶邊框和鼠標(biāo)效果