今天用CSS写了一个tab菜单,先来看一下效果图:
接下来,我们来看一下下代码:
home页代码:
<!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=gb2312" />
<title>纯CSS的tabs菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet" rev="stylesheet" />
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="home.html">首页</a></li>
<li class="chanpin"><a href="chanpin.html">产品中心</a></li>
<li class="rencai"><a href="rencai.html">人才招聘</a></li>
</ul>
<div id="content"> 我是首页</div>
</div>
</body>
</html>
因为有两个超链接,看一下另外两个页的代码:
产品中心:
<!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=gb2312" />
<title>纯CSS的tabs菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet" rev="stylesheet" />
</head>
<body id="chanpin">
<ul id="tabnav">
<li class="home"><a href="home.html">首页</a></li>
<li class="chanpin"><a href="chanpin.html">产品中心</a></li>
<li class="rencai"><a href="rencai.html">人才招聘</a></li>
</ul>
<div id="content"> 我是产品中心</div>
</div>
</body>
</html>
人才招聘:
<!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=gb2312" />
<title>纯CSS的tabs菜单</title>
<link href="8-9.css" type="text/css" rel="stylesheet" rev="stylesheet" />
</head>
<body id="rencai">
<ul id="tabnav">
<li class="home"><a href="home.html">首页</a></li>
<li class="chanpin"><a href="chanpin.html">产品中心</a></li>
<li class="rencai"><a href="rencai.html">人才招聘</a></li>
</ul>
<div id="content"> 我是人才招聘</div>
</div>
</body>
</html>
其实呢:产品中心、人才招聘和home页的代码是一样过的,唯一的不用是content里面的具体的内容,三个页面连接的外部css样式是一样,下面我们看一下css的样式代码:
/* CSS Document */
body {
margin:0;
margin-top:100px; /* 设置在页面中的位置*/
margin-left:200px;
margin-right:700px;
}
#content{
border-left:1px solid #11a3ff;
border-right:1px solid #11a3ff;
border-bottom:1px solid #11a3ff;
padding:15px;
font-size:12px;
}
ul#tabnav {
list-style:none;
margin:0px;
padding-left:0px;
padding-bottom:23px;
border-bottom:1px solid #11a3ff;
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
}
ul#tabnav li{
float:left;
height:22px;
background:#a3dbff;
margin:0 3px 0 0 ;
border:1px solid #11a3ff;
}
ul#tabnav a:link,ul#tabnav a:visited{
display:block;
color:#006eb3;
text-decoration:none;
padding:5px 10px 3px 10px;
}
ul#tabnav a:hover{
background:#006eb3;
color:#ffffff;
}
body#home li.home,body#chanpin li.chanpin,body#rencai li.rencai{
border-bottom:1px solid #ffffff; /* 白色下边框,覆盖<ul>中的蓝色下边框 */
color:#000000;
background-color:#FFFFFF;
}
body#home li.home a:link,body#chanpin li.chanpin a:link,body#rencai li.rencai a:link{
color:#000000;
background-color:#FFFFFF;
}
body#home li.home a:hover,body#chanpin li.chanpin a:hover,body#rencai li.rencai a:hover{
color:#006eb3;
text-decoration:underline;
}
这样整个tab的菜单就完成了,用css写的麻烦就是每一个菜单都要重写一个页面,有点麻烦,还是用jquery写着方便,有时间再上传用jquery写的tab菜单。