css制作tab选项卡

时间：2015-04-17 16:48:40 　来源：免费模板网　作者：风雪　阅读次数　tags选项卡

　　很多网站会用到tab选项卡，用纯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>

上篇：CSS制作图片透明效果

下篇：css怎么让背景图片居中

本文地址：https://www.freemoban.com/bjrm/2015/0417/1395.html

猜你喜欢