通过比较常见的上中下结构布局，也是很多企业站通用的模板，下面是仿站的代码,仿站链接地址是：
总结：布局前先把默认的内外边距已经元素默认的样式都清除掉，然后公共部分的样式都放在一个CSS文件中，这都是为了方便代码的复用以及以后的修改
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站首页</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 公共头部 --> <div class="header"> <div class="top"> <p class="left">欢迎进入某某家具有限公司！</p> <p class="right">24小时咨询<a href=""></a>电话：18888888888</p> </div> <!-- logo 列表 --> <div class="top1"> <div class="top2"> <div class="logo"> <img src="img/1512705763.png"> </div> <div class="jieshao"> <div class="lb"> <ul> <li><a href="">网站首页</a></li> <li><a href="">公司简介</a></li> <li><a href="">新闻动态</a></li> <li><a href="">产品系列</a></li> <li><a href="">品牌加盟</a></li> <li><a href="">客户服务</a></li> <li><a href="">人才招聘</a></li> </ul> </div> </div> </div> </div> </div> <!-- 首页海报 --> <div class="ban"><img src="img/1512714846.jpg"></div> <div class="zst"></div> <!-- 产品列表 --> <div class="cplb"> <div class="xptj"> <p class="p1">新品推荐</p> <p>NEW ARRIVALS</p> </div> <ul> <li><a href="">产品系列一</a></li> <li><a href="">产品系列一</a></li> <li><a href="">产品系列一</a></li> <li><a href="">案例展示</a></li> </ul> </div> <!-- 产品名称 --> <div class="cpmc"> <ul> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> <li> <a href=""><img src="img/1512716857.png"></a><br> 我的产品名称 </li> </ul> </div> <!-- 企业文化 --> <div class="qywh"> <div class="wh"> <div class="wht"><img src="img/1512716982.jpg"> </div> <div class="whjs"> <p> 某某家具以板木家具为主，其现代简约的风格，环保第一的理念，原创设计的宗旨，早已深入人心，不管是家具业的行内人，还是追求时尚，追求美的大众都被某某家具所深深的吸引。经过多年的发展，某某家具的专卖店已遍布全国各主要城市，出口海外62个国家和地区。</p> <p> 某某家具采用模块化的设计，用户可以根据自己的要求自由组合，通过自己的双手，自己的想法，设计出属于自己的独特的家居空间，某某家具一直坚持“我的家，我做主！”某某家具目前主要系列的产品涵盖:客厅家具系列，卧室家具系列，餐厅家具系列，书房家具系列等</p> <p> 通过优化我们的整个价值链，与供应商建立长期合作关系，投资高度自动化和大规模生产等方式，我们努力为顾客提供物美价优的产品。我们的愿景不局限于家居装饰。我们希望通过努力，为大众创造更美好的日常生活。 </p> <img src="img/1512718602.png"> <img src="img/1512718730.png"> </div> </div> </div> </div> <!-- 留言 --> <div class="news"> <div class="ly"> <div class="title"> <img src="img/1.png"> </div> 留言主题：<br> <input type="text" name=""> <br> 联系人：<br> <input type="text" name=""> <br> 联系电话： <br> <input type="text" name=""><br> QQ/MSN： <br><input type="text" name=""><br> 验证码： <input type="text" name="" id="input1"> <img src="111.png"> <a href="">看不清楚，换一张</a><br> <input type="submit" name="" id="submit"> </div> <!-- 新闻 --> <div class="news_right"> <div class="title"> <img src="img/2.png"> </div> <ul> <li> <img src="img/1365417518.jpg"> <div class="xwbt"> <a href="">本公司参加第八十届广州商</a> </div> <p>2010-01-25</p> <span>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</span> </li> <li> <img src="img/1365417518.jpg"> <div class="xwbt"> <a href="">本公司参加第八十届广州商</a> </div> <p>2010-01-25</p> <div class="jj"> <span>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</span> </div> </li><li> <img src="img/1365417518.jpg"> <a href="">本公司参加第八十届广州商</a> <p>2010-01-25</p> <span>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</span> </li> </ul> </div> </div> <!-- 公共尾部 --> <div class="footer"> <div class="foot"> <div class="left"> <p> |<a href=""> 关于我们 </a>| <a href=""> 联系方式 </a>| <a href=""> 给我留言 </a>| <a href=""> 人才招聘 </a>| <a href=""> 友情链接 </a>| </p> <p>备案号：沪icp 8888XXXX号 邮箱：0000XXXX@XX.com 电话：+86-021-1234567XX </p> <p> 传真：+86-021-1234567X8 网址：www.xxxxxx.common.css </p> </div> <div class="right"><img src="img/1512722605.png"></div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css公共样式表
实例
/*公共样式*/
.header {
width: 100%;
background-color: #505050;
margin: 0;
/*height: 80px;*/
}
.header .top{
width: 1200px;
height: 28px;
background-color: #505050;
text-align: center;
/*line-height: 80px;*/
overflow: hidden;
margin: auto;
}
.header .top p{
color: #fff;
line-height: 28px;
font-size: 12px;
}
.header .top .left{
float: left;
}
.header .top .right{
float: right;
}
.header .top1{
width: 100%;
/*height: 100px;*/
background-color: #fff;
/*overflow: hidden;*/
}
.header .top2{
width: 1200px;
height: 100px;
margin: auto;
}
/*logo*/
.header .top2 .logo{
width: 277px;
height: 54px;
float: left;
margin:24px 0px ;
}
/*网站导航条*/
.header .top2 .jieshao{
width: 100%;
height: 100px;
}
/*.header .top2 .jieshao .lb{
margin-right: 100px;
}*/
.header .top2 .jieshao ul li{
float: left;
width: 100px;
line-height: 100px;
position: relative;
left:200px;
text-align: center;
}
.header .top2 .jieshao ul li a{
font-size: 15px;
color: #505050;
}
.header .top2 .jieshao ul li:hover{
background-color: #e71f19;
/*控制背景颜色*/
cursor: pointer;
}
/*网站底部*/
.footer {
width: 100%;
background-color: rgb(67, 67, 67);
}
.foot {
width: 1200px;
height: 149px;
margin: auto;
}
.footer .left{
width: 715px;
float: left;
}
.footer .left p{
font-size: 14px;
color: #fff;
margin-top:18px;
}
.footer .left a{
color: #fff;
}
.footer .left a:hover{
color: #ff6600;
}
.footer .foot img{
margin-left:135px;
margin-top: 35px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
样式重置表
实例
/*样式重置*/
html {
overflow-y: auto;
overflow-x: hidden;
}
body, h1,h2,h3, ul,li,p {
margin: 0;
padding: 0;
font-family: 'microsoft yehei', Verdana, Arial;
color: #505050;
}
p, li, a {
font-size: 14px;
}
ul, li {
list-style-type: none;
}
a:link, a:visited, a:active {
color: #333333;
text-decoration: none;
font-size: 16px;
}
a:hover {
text-decoration: none;
color: red;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*首页样式表*/
.zst {
height: 30px;
background-color: #696969;
opacity: 0.5;
margin-top: -32px;
}
.ban img {
/*消除图片空白下方极小的区域 二个方式：加行高或者vertical-align: top;*/
line-height: 1px;
/*vertical-align: top;*/
width: 100%;
height: 542px;
}
/*产品列表*/
/*标题*/
.cplb{
width: 1200px;
margin: auto;
overflow: hidden;
}
.xptj {
text-align: center;
/*height: 60px;*/
background-image: url(../img/title.png);
background-repeat: no-repeat;
background-position: center;
margin-bottom: 24px;
}
.xptj .p1 {
line-height: 32px;
font-size:24px;
margin-top:32px;
}
/*产品系列*/
.xl{
width: 1200px;
margin: auto;
}
.cplb > ul {
width: 100%;
height: 62px;
margin: 0 300px;
}
.cplb > ul li{
margin-top :20px;
float: left;
}
.cplb >ul li a{
color: #505050;
display: block;
border: 1px solid #000;
margin-right: 20px;
margin-bottom: 20px;
text-align: center;
line-height: 42px;
font-size: 14px;
width: 122px;
height: 42px;
}
.cplb >ul li a:hover{
color: red;
border: 1px solid red;
}
/*产品名称*/
.cpmc{
width: 1200px;
margin: auto;
overflow: hidden;
}
.cpmc li {
width: 206px;
height: 276px;
float: left;
margin-right:30px;
margin-bottom:30px;
border: 1px solid transparent;
text-align: center;
padding-top:5px;
}
.cpmc img {
width: 180px;
height: 229px;
margin-top:20px;
}
.cpmc li:hover{
border: 1px solid red;
}
/*企业文化*/
.qywh {
width: 100%;
/*background-image: url(img/1512717099.jpg);*/
height: 421px;
background-color: #e6e2e7;
margin-top:30px;
}
.wh {
width: 1200px;
margin: auto;
height: 421px;
overflow: hidden;
}
.wht img {
width: 456px;
height: 421px;
float: left;
}
.whjs {
width: 654px;
height: 288px;
float: right;
margin-top: 20px;
margin-right: 40px;
}
.whjs > p {
width: 634px;
height: 84px;
}
/*新闻部分*/
.news {
width: 1200px;
margin: auto;
overflow: hidden;
}
.ly{
width: 471px;
height: 500px;
/*border: 1px solid pink;*/
float: left;
}
/*.news .ly .title{
overflow: hidden;
}*/
.ly .title img{
margin-top: 45px;
margin-left: 4px;
margin-bottom: 30px;
}
.news .ly input{
border: #aaa 1px dashed;
background-color: #eee;
width: 438px;
height: 28px;
margin-bottom: 5px;
margin-top: 5px;
}
#input1{
width: 128px;
height: 28px;
/*background-color: red;*/
}
#submit{
cursor: pointer;
width: 200px;
height: 34px;
background-color: #cf4557;
border: none;
color: #fff;
line-height: 34px;
}
.news_right{
width: 667px;
height:650px;
float: right;
}
.news_right .title{
margin-top: 45px;
margin-left: 4px;
margin-bottom: 30px;
}
.news_right ul li{
width: 667px;
height: 154px;
margin: 10px auto;
}
.news_right ul li img {
width: 140px;
height: 130px;
float: left;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
目标站
布局前下
