我的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360</title>
<link rel="stylesheet" type="text/css" href="css.style/reset.css">
<link rel="stylesheet" type="text/css" href="css.style/style.css">
</head>
<body>
<!--head开始-->
<div class="header w">
<!--导航条-->
<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>
<div class="logo">
<a href="#" title="很漂亮的logo">
<img src="img/logo.png" alt="网站LOGO">
</a>
</div>
</div>
<!--head结束-->
<!--banner结束-->
<div class="banner w">
<img src="img/banner.png" alt="这个是banner图片">
<div class="pointerDiv">
<a href="#"></a>
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<!--banner结束-->
<!--[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>
My style
body{
background: url(../img/polo360.png) ;
background-repeat: repeat-x;
}
.w{
width: 940px;
margin: 0 auto;
}
.header{
padding-top: 37px;
padding-bottom: 46px;
/*background-color: red;*/
}
/*logo的位置*/
.logo{
margin-left: 15px;
}
/*设置导航条*/
.nav{
float: right;
margin-top: 22px;
}
.nav li{
float: left;
padding: 0 10px 8px;
border-left: 1px #d6d6d6 dotted;
/*vertical-align: 80%;*/
}
.nav a{
color: #666;
font: bold 14px Georgia;
text-decoration: none;
}
.nav a:hover{
color: #a5a4a4;
text-decoration: underline;
}
.nav p{
color: #b7b7b7;
font: 11px Tahoma;
}
/*设置banner*/
.banner{
background: url(../img/yinying.png) no-repeat bottom center;
height: 356px;
position: relative;
}
/*设置小圆点*/
.pointerDiv{
position: absolute;
top: 314px;
left: 15px;
}
.pointerDiv a{
float: left;
background:url(../img/zhishiqi.png) no-repeat;
width: 17px;
height: 17px;
margin-left: 4px;
}
.pointerDiv .active,.pointerDiv a:hover{
background: url(../img/action.png) no-repeat;
}
看我卖萌的结果吧
image.png
萌到了吗？
网友评论