主體文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polo360首頁</title>
<link rel="stylesheet" href="ie6_png/DD_belatedPNG_0.0.8a-min.js">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- header的開始 -->
<div class="header w">
<ul class="nva">
<li>
<a href="#">HOME</a>
<p>Back to home</p>
</li>
<li>
<a href="#">PRODUCTS</a>
<p>What we have for you</p>
<li>
<a href="#">SERVICES</a>
<p>Things we do</p>
<li>
<a href="#">BLOG</a>
<p>Follow our updates</p>
<li>
<a href="#">CONTACT</a>
<p>Ways to reach us</p>
</ul>
<a href="#"><img src="img/logo.png" alt="lalala"></a>
</div>
<!-- header的結(jié)束 -->
<!-- bannar的開始 -->
<div class="bannar w">
<a href="#"><img src="img/bannar/bannar1.png"></a>
<div class="pointerDiv">
<a href="#"></a>
<a href="#" class="an2"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<!-- banner的結(jié)束 -->
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-image: url(../img/bg.png);
background-repeat: repeat-x;
}
.w{
width: 940px;
margin: 20px auto;
}
.header{
height: 137px;
/*background-color: red;*/
}
.header a img{
float: left;
padding-left: 15px;
padding-top: 12px;
}
.nva{
float: right;
}
.nva li{
list-style: none;
float: left;
margin: 30px 8px 10px 12px;
padding-bottom: 15px;
padding-left: 10px;
border-left: 1px #d6d6d6 dotted;
}
.nva li a{
text-decoration: none;
font-family: Georgia;
font-size: 14px;
color: #666;
}
.nva li a:hover{
color: #b7b7b7;
}
.nva li p{
font-family: Tahoma;
font-size: 11px;
color: #b7b7b7;
}
.bannar{
height: 356px;
background: url(../img/bannar/yinyin.png) no-repeat bottom center;
position: relative;
}
.pointerDiv{
position: absolute;
top: 314px;
left: 17px;
}
.pointerDiv a{
float: left;
height: 17px;
width: 17px;
background: url(../img/bannar/baiseanniu.png) no-repeat;
margin: 4px;
}
.pointerDiv a:hover{
background: url(../img/bannar/landeanniu.png) no-repeat;
}
image.png
