流行的Tab菜单

页面效果:

wKioL1WonLKihHKSAAKXCpfnKyU244.jpg


代码部分:

<!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>流行的Tab菜单</title>
<link href="流行的Tab菜单.css" type="text/css" rel="stylesheet">
</style>
</head>
<body id="home">
<ul id="tabnav">
	<li class="home"><a href="">首页</a></li>
    <li class="news"><a href="news.html">新闻</a></li>
    <li class="sports"><a href="">体育</a></li>
    <li class="music"><a href="music.html" >音乐</a></li>
</ul>
<div id="content">
<span id="leftpic">
		<a href="#"><img src="../CSS/pic1.jpg"><br>
		<center>追忆往事,展望未来</center></a>
	</span>
	<ul id="list">
		<li><a href="#">[首页] 追忆往事,展望未来。新年寄语</a></li>
		<li><a href="#">[新闻] 每年五一、十一长假,很多人不愿出门</a></li>
		<li><a href="#">[新闻] 清华大学电子系研制成功新一代...</a></li>
		<li><a href="#">[体育] 奥运火炬接力火热进行</a></li>
		<li><a href="#">[音乐] 网民调查,你最喜欢的音乐类型</a></li>
		<li><a href="#">[博客] 自由博客新版正式发布,网友...</a></li>
	</ul>
</div>
</body>
</html>




首页CSS:

@charset "utf-8";
/* CSS Document */

body{
	margin:10px;}
#content{
	border-left:1px solid #11a3ff;
	border-bottom:1px solid #11a3ff;
	border-right:1px solid #11a3ff;
	padding:15px;
	font-size:13px;}
#leftpic{
	float:left;
	margin-right:15px;}
#leftpic img{
	border-left:1px solid #11a3ff;
	border-bottom:1px solid #11a3ff;
	border-right:1px solid #11a3ff;}
#leftpic a:link,#leftpic a:visited{
	text-decoration:none;
	color:#11a3ff;}
#leftpic a:hover{
	text-decoration:underline;
	color:#666;}
#content ul{
	list-style-type:none;}
#content ul li a:link,#content ul li a:visited{
	text-decoration:none;
	color:#666;}
#content ul li a:hover{
	text-decoration:underline;
	color: #5BA8FD;}
#tabnav{
	list-style-type:none;
	margin:0px;
	padding-left:0px;
	padding-bottom:23px;
	border-bottom:1px solid #11a3ff;
	font:bold 12px Verdana, Geneva, sans-serif;
	}
#tabnav li{
	float:left;
	height:22px;
	background-color:#a3dbff;
	margin:0px 3px 0px 0px;
	border:1px solid #11a3ff;}
#tabnav li a:link,#tabnav li a:visited{
	display:block;
	color:#006eb3;
	text-decoration:none;
	padding:5px 10px 3px 10px;
	}
#tabnav li a:hover{
	background-color:#006eb3;
	color:#ffffff;}
body#home li.home, body#news li.news,	/* 当前页面的菜单项 */
body#sports li.sports, body#music li.music{
	border-bottom:1px solid #FFFFFF;	/* 白色下边框,覆盖<ul>中的蓝色下边框 */
	color:#000000;
	background-color:#FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited,	/* 当前页面的菜单项的超链接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited{
	color:#000000;
	background-color:#FFFFFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover{
	color:#006eb3;
	text-decoration:underline;
}


你可能感兴趣的:(css,div)