纯CSS Tab代码

2024-09-05 12:17:07

字体：大中小

来源：转载

供稿：网友

用纯CSS代码实现tabs标签效果，手工代码实现，很实在的TAB选项卡菜单，其实看懂了代码，你会觉得如此简单就可写一个tab了，用了不少CSs的基础知识，通过此，你也许会更加熟悉如何使用Div CSS布局网页。

<!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实例</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>梦想</li> 			<li>截图</li> 			<li>Careers</li> 			<li>历史</li> 			<li>支持</li> 		</ul> 	</li> 	<li>新闻</li> 	<li>时速</li> 	<li>Process</li> 	<li>实例</li> 	<li>Help</li> </ul></div></body> </html>

上一篇：CSS图片透明

下一篇：jquery CSS实现ul表格，带边框和鼠标效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注