标签：
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="../CSS/神女控headfoot.css"/>
<title>神女控官网</title>
</head>
<body>
<div id="head" class="head">
<div class="headnav">
<div class="navBtn1 navBtnCell">
<div class="headlogo">
<a href="神女控官网.html">
<img src="../HTML/images/navlogo_01.png" alt="首页logo"/>
</a>
</div>
</div>
<div class="navBtn2 navBtnCell">
<div class="mainBtn">
<a href="#">介绍</a>
</div>
</div>
<div class="navBtn3 navBtnCell">
<div class="mainBtn">
<a href="#">下载</a>
</div>
</div>
<div class="navBtn4 navBtnCell">
<div class="mainBtn">
<a href="#">贴吧</a>
</div>
</div>
<div class="navBtn5 navBtnCell">
<div class="mainBtn">
<a href="#">联系我们</a>
</div>
</div>
</div>
</div>
<div id="content" class="content">
<div class=""></div>
</div>
<div id="foot" class="foot"></div>
</body>
</html>
CSS
body{
background-image: url("../HTML/c9d7160bbe6c8b8892b4b19eef01cf33.jpeg");
background-position: 50% 0;
background-repeat: no-repeat;
margin: 0 auto;
}
.head{
height: 100px;
position: relative;
}
.content{
height: 976px;
position: relative;
}
.foot{
height: 100px;
position: relative;
background-image: url("../HTML/foot-1.png");
}
.headnav{
position: relative;
overflow: hidden;
}
.navBtn1{
width: 210px;
height: 100px;
}
.navBtn2{
width: 280px;
height: 100px;
}
.navBtn3{
width: 280px;
height: 100px;
}
.navBtn4{
width: 280px;
height: 100px;
}
.navBtn5{
width: 280px;
height: 100px;
}
.navBtnCell{
margin-right: 1px;
float: left;
}
.mainBtn{
color: brown;
text-align: center;
font-size: 30px;
padding-top: 35px;
}
.mainBtn a{
text-decoration: none;
font-family: 微软雅黑;
color: #271636;
}
初步效果图：
标签：
原文地址：http://www.cnblogs.com/qmsjsz/p/5770228.html
