項目主體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="./reset.css">
</head>
<body>
<div class="header e">
<ul class="nav">
<li>
<a href="#">HOME</a>
<p>Back to home</p>
</li>
<li>
<a href="#">PRODUCTS</a>
<p>What we have for you</p>
</li>
<li>
<a href="#">SERVICES</a>
<p>Things we do</p>
</li>
<li>
<a href="#">BLOG</a>
<p>Follow our updates</p>
</li>
<li>
<a href="#">CONTACT</a>
<p>Ways to reach us</p>
</li>
</ul>
<a href="#" class="logo"><img src="./images/logo.png"></a>
</div>
<div class="banner e">
<img src="./images/bannar1.png" alt="這個是bannar圖片" class="pic1">
<div class="pointer">
<a href="#"></a>
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('div,img,a');</script>
<![endif]-->
</body>
</html>
樣式：
body{
background-image: url(./images/bg.png);
background-repeat: repeat-x;
}
.e{
width: 940px;
margin: 0 auto;
}
.header{
/*background-color: #bfa;*/
}
.logo{
margin-left: 15px;
margin-top: 12px;
margin-bottom: 30px;
/* float: left;*/
}
.nav{
float:right;
}
.nav li{
list-style: none;
float: left;
font-size: 12px;
padding: 0px 10px 8px;
border-left: 1px #d6d6d6 dotted;
}
.nav a{
text-decoration:none;
font-size: 12px;
color: #666;
font:bold 14px Georgia;
}
.nav a:hover{
color: #a5a4a4;
text-decoration: underline;
}
.nav p{
color: #b7b7b7;
font:11px Tahoma;
}
/*設置bannar*/
.bannar{
background: url(./images/yinyin.png) no-repeat bottom center;
height: 356px;
position: relative;
}
/*設置小圓點*/
.pointer{
position: absolute;
top: 460px;
bottom:15px;
}
.pic1{
margin-top: 80px;
/*border:10px solid red;*/
}
.pointer a{
float: left;
background: url(./images/but.png) no-repeat;
width: 17px;
height: 17px;
margin-left: 4px;
}
.pointer a:hover{
background: url(./images/buttun.png) no-repeat;
}
代碼效果:
圖片.png
