通过几天的学习，前端知识得到了补充，做网站页面也是比较简单了，这个案例基本结合了前几天学习的所有知识，包括双飞翼布局、浮动、绝对定位等知识，专门挑选了一个知识覆盖面的网站下手。由于最近单位有事，时间匆忙没听课，偷闲敲完了，细化美化的地方很多忽略了，不知道有没有遗漏的，等周末再补充吧。
注意：响应式布局要防止出现html默认宽度980px的情况，当宽度低于设定的内容宽度时会出现缺口，不整齐的情况；遇到缺口可使用min-width来给个最小宽度，从而实现响应布局，同时要另外学习点@media知识，做自适应网站得用上。
先上效果图：
仿造的目标网站：http://ecms153.99yuanma.net:8889/
代码贴上：
html部分：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0328仿制一个简单的企业站点</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="header"> <div class="container"> <div class="top"> <div class="logo"> <a href="#"><img src="images/logo.png"></a> </div> <div class="usercp"> <span><input type="button" name="" value="用户登陆"></span> <span><input type="button" name="" value="用户注册"></span> </div> </div> </div> <div class="top-nav"> <div class="container"> <ul> <li class="active"><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> <li><a href="">我们的服务</a></li> </ul> </div> </div> </div> <div class="main"> <div class="banner"> <img src="images/banner.jpg" alt=""> </div> <div class="soft"> <div class="container"> <div class="sub-title"> <h2>我们的软件</h2> </div> <ul> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> <li> <div class="product"> <a href=""><img src="images/product.jpg"></a> </div> <div class="text"> <h2><a href="">惠普Spectre Pro x360</a></h2> <p>在今年MWC 2015展会上，PC制造商惠普推出了其新款旗舰产品Spectre Pro x360，它的机身采用了铝</p> <a class="more" href="#">进入下载页</a> </div> </li> </ul> </div> </div> <div class="con-footer"> <div class="container"> <div class="wrap"> <div class="middle"> <div class="sub-title"><h3>新闻资讯</h3></div> <ul> <li> <span class="newstitle">展会策划之超维震撼亮相2014深圳礼品展</span><span class="newstime">2015-12-07</span> </li> <li> <span class="newstitle">展会策划之超维震撼亮相2014深圳礼品展</span><span class="newstime">2015-12-07</span> </li> <li> <span class="newstitle">展会策划之超维震撼亮相2014深圳礼品展</span><span class="newstime">2015-12-07</span> </li> <li> <span class="newstitle">展会策划之超维震撼亮相2014深圳礼品展</span><span class="newstime">2015-12-07</span> </li> <li> <span class="newstitle">展会策划之超维震撼亮相2014深圳礼品展</span><span class="newstime">2015-12-07</span> </li> <li> <span class="newstitle">展会策划之超维震撼亮相2014深圳礼品展</span><span class="newstime">2015-12-07</span> </li> <li> <span class="newstitle">展会策划之超维震撼亮相2014深圳礼品展</span><span class="newstime">2015-12-07</span> </li> </ul> </div> </div> <div class="left"> <div class="sub-title"><h3>公司简介</h3></div> <img src="images/gsjj.jpg"> <p>我们拥有多年高端帝国CMS企业建站和博客制作开发制作经验，提供专业的标准化网站开发制作；我们的帝国CMS建站产品注重搜索引擎优化，充分发挥帝国CMS建站平台的SEO优势，助力于你更好的对网站进行SEO优化，提高搜索收录和关键词排名。</p> </div> <div class="right"> <div class="sub-title"><h3>产品展示</h3></div> <ul> <li><a href=""><img src="images/a1.jpg"></a></li> <li><a href=""><img src="images/a2.jpg"></a></li> <li><a href=""><img src="images/a3.jpg"></a></li> <li><a href=""><img src="images/a4.jpg"></a></li> </ul> </div> </div> </div> </div> <div class="footer"> <ul> <li>友情链接：</li> <li><a href="">PHP中文网</a></li> <li><a href="">PHP中文网</a></li> <li><a href="">PHP中文网</a></li> <li><a href="">PHP中文网</a></li> <li><a href="">PHP中文网</a></li> </ul> <div class="copy">© 2017 我的网站 京ICP备1234567-9号 统计代码 </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css部分：
reset.css
实例
*{margin:0;padding:0;}
ul{list-style: none}
a{text-decoration: none}
.active{
background: #707070;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
common.css
实例
.header{
height:150px;
}
.container{
width:1200px;
margin:0 auto;
}
.header .top{
height:100px;
}
.header .logo{
height:100px;
float: left;
}
.logo img{
display: block;
padding:10px 0 10px 10px;
}
.header .usercp{
float:right;
line-height: 100px;
margin-right: 10px;
}
.header .usercp input{
width:80px;
height:30px;
margin:0 10px;
border: 0.5px;
background: #1e50ae;
color:#fff;
}
.top-nav{
min-width: 1200px;
height:50px;
line-height: 50px;
background: #1e50ae;
}
.top-nav ul{
overflow: hidden;
}
.top-nav li{
float: left;
}
.top-nav li:hover{
background: #707070;
}
.top-nav li a{
display: block;
padding: 0 35px;
color: #fff;
}
.footer{
background: rgba(0,0,0,0.8);
min-width: 1200px;
}
.footer ul{
display: table-cell;
vertical-align: middle;
overflow: hidden;
min-width: 1200px;
height:120px;
margin:0 auto;
text-align: center;
}
.footer ul li{
display: inline-block;
width:120px;
height:40px;
line-height: 40px;
color:#fff;
text-align: center;
}
.footer ul li a{
color:#fff;
}
.copy{
height: 60px;
line-height: 60px;
color:#fff;
text-align: center;
background: #222;
min-width: 1200px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
index.css
实例
.banner{
height: 590px;
min-width: 1200px;
margin: 0 auto;
}
.banner img{
width:100%;
height:100%;
display: block;
}
.sub-title{
height:40px;
margin-top: 20px;
line-height: 40px;
border-left:5px solid #3d9fe1;
color: #3d9fe1;
}
.sub-title h2{
padding-left: 20px
}
.soft ul{
overflow: hidden;
}
.soft ul li{
width:388px;
height:180px;
margin: 10px 10px 10px 0;
background: #f8f8f8;
float: left;
overflow: hidden;
position: relative;
}
.soft .product{
width:70px;
height:100%;
line-height: 180px;
padding:0 10px;
float: left;
}
.soft h2 a{
color:#f60;
}
.soft ul li img{
width:100%;
}
.soft .text{
float: left;
width: 290px;
}
.soft .text h2{
padding: 10px 10px;
color: #f60;
border-bottom: 1px dashed #555;
}
.soft .text p{
text-indent: 2em;
line-height: 1.6em;
font-size: 14px;
margin:10px 0;
}
.soft .text .more{
width: 90px;
height:30px;
font-size: 12px;
line-height: 30px;
display: block;
background: #f60;
color: #fff;
text-align: center;
position: absolute;
right:0;
bottom:0;
}
.con-footer .container{
overflow: hidden;
}
.wrap{
float: left;
width:100%;
height:376px;
}
.left{
float: left;
height:376px;
width: 324.8px;
margin-left: -100%;
}
.right{
float:left;
height:376px;
width: 324.8px;
margin-left: -324.8px;
}
.wrap .middle{
margin: 0 339.8px;
}
.left .sub-title,.middle .sub-title,.right .sub-title{
height:20px;
margin:10px 0;
}
.left .sub-title h3,.middle .sub-title h3,.right .sub-title h3{
color: #000;
font-size: 18px;
line-height: 20px;
padding: 0 10px;
font-weight: 500;
}
.left img{
width:100%;
}
.left p{
font-size: 15px;
line-height: 32px;
}
.newstitle{
width: 70%;
float: left;
}
.newstime{
width:30%;
float: right;
text-align: right;
}
.middle li{
height:46px;
line-height: 46px;
border-bottom: 1px dashed #ccc;
font-size: 14px;
}
.middle li:last-child{
border:none;
}
.right ul{
overflow: hidden;
}
.right ul li{
width:100px;
height:100px;
float: left;
margin-right: 12.4px;
margin-top: 10px;
}
.right ul li:first-child{
width:100%;
height:190px;
}
.right ul li:last-child{
margin-right: 0;
}
.right ul li img{
width:100%;
height:100%;
line-height: 1px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
