接下来的下面代码，只是给了一个大的前端编写布局，如果你已经是牛人了，就当没看到，如果是一些初学者，不妨拿去用用，里面也写了一些常用的css样式，现在虽然有很多牛逼的前段框架，用起来也非常得心应手，但是如果你要对自己很多定制化需求，最后肯定是要自己来编写前端页面的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页标题-->
<title>我搜</title>
<!--网页图标-->
<link rel="icon" href="//www.jd.com/favicon.ico">
<!--文件引入CSS样式-->
<link rel="stylesheet" href="niubi.css">
<style>
*{
margin:0px;
border:0px;
padding:0px;
font-size:14px;
}
ul{
list-style:none;
}
.test{
border:2px yellow bolid;
}
a{
text-decoration:none;
}
body{
background:white;
}
.w{
width:980px;
margin:0 auto;
}
.clear{
clear:both;
}
.d{
position:relative;
}
</style>
</head>
<body>
<!--页面布局-->
<div class="pg-header">
<div class="w"></div>
</div>
<div class="pg-body">
<div class="w"></div>
</div>
<div class="pg-foot">
<div class="w"></div>
</div>
<!--文件引入js-->
<script src="jquery-1.8.2.js"></script>
<script>
//增加其他代码
</script>
</body>
</html>
原文：http://www.cnblogs.com/xinsiwei18/p/7087457.html