纯CSS Tab代码

2020-01-27 14:18:44

字体：大中小

来源：转载

供稿：网友

用纯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><a href="#">我的首页</a></li> 	<li><a href="#" class="here">About</a> 		<ul> 			<li><a href="#">版本</a></li> 			<li><a href="#">梦想</a></li> 			<li><a href="#">截图</a></li> 			<li><a href="#">Careers</a></li> 			<li><a href="#" class="here">历史</a></li> 			<li><a href="#">支持</a></li> 		</ul> 	</li> 	<li><a href="#">新闻</a></li> 	<li><a href="#">时速</a></li> 	<li><a href="#">Process</a></li> 	<li><a href="#">实例</a></li> 	<li><a href="#">Help</a></li> </ul></div></body> </html>

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

下一篇：CSS图片透明

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注