<!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>无标题文档</title>
<style>
*{margin:0px;padding:0px;}
a{text-decoration:none;}
#top{position:relative;width:960px;margin:0px auto;}
#top2{position:absolute;width:462px;height:53px;left:230px;top:32px;margin-bottom:0px;}
#top3{position:absolute;width:217px;height:69px;right:0px;bottom:0px;}
#head{position:relative;width:100%;margin:0px auto;}
#nav{position:relative;width:960px;margin:0px auto;}
#nav ul{position:absolute;left:218px;top:-34px;width:523px;height:45px;list-style:none;font-size:18px;font-weight:800;z-index:3;}
#nav ul .na{position:relative;height:39px;margin:0px 1px;padding:0px;background:url(/skin/test/nav/images/navbg2.gif) left bottom no-repeat;float:left;}
#nav ul .na a{position:relative;height:15px;padding:12px 22px;background:url(/skin/test/nav/images/navbg2r.gif) right bottom no-repeat;color:#816961;float:left;}
#nav ul .na:hover{position:relative;height:39px;background:url(/skin/test/nav/images/navbg1.gif) left bottom no-repeat;float:left;}
#nav ul .na a:hover{position:relative;padding:12px 22px;background:url(/skin/test/nav/images/navbg1r.gif) right bottom no-repeat;color:#fff;}
.cor{position:relative;height:39px;margin:0px 1px;padding:0px;background:url(/skin/test/nav/images/navbg1.gif) left bottom no-repeat;float:left;}
.cor a{position:relative;height:15px;padding:12px 22px;background:url(/skin/test/nav/images/navbg1r.gif) right bottom no-repeat;color:#fff;float:left;}
#search{position:relative;width:960px;height:48px;margin:0px auto;background:url(/skin/test/nav/images/navbg_l.gif) left top repeat-x;z-index:1;}
</style>
</head>
<body>
<div id="top">
<div id="logo"><img src="images/top1.gif" width="219" height="125" /></div>
<div id="top2"><img src="images/top2.gif" width="462" height="53" /></div>
<div id="top3"><img src="images/top3.gif" width="217" height="69" /></div>
</div>
<div id="head">
<div id="nav">
<ul>
<li class="cor"><a href="#">首页</a></li>
<li class="na"><a href="#">祛斑</a></li>
<li class="na"><a href="#">祛痘</a></li>
<li class="na"><a href="#">去黑头</a></li>
<li class="na"><a href="#">去黄</a></li>
<li class="na"><a href="#">祛皱</a></li>
</ul>
</div>
<!-- -->
<div id="search"></div>
</div>
</body>
</html>
<br>
样式请看:http://www.endbus.cn/skin/test/nav/index.html
评论