仿网站首页：
熟练布局网站首页
使用common.css index.css 和case.css等不同页面样式表
HTML代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</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="tape"> <div class="info"> <p class="left">欢迎访问某某安防消防工程有限公司~</p> <p class="right">咨询电话：020-22043297</p> </div> </div> <div class="info"> <div class="logo"><img src="images/logo.png"> </div> <div class="search"> <input type="text" placeholder="关键字"> <button>搜索</button> </div> </div> <div class="menu"> <div class="info"> <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> <li><a href="">网站首页</a></li> </ul> </div> </div> </div> <!--首页的banner图--> <div class="banner"> <img src="images/banner.jpg" alt="图片"> <!--图片下面装饰条--> <div class="zst"></div> </div> <!--产品列表--> <div class="product"> <!--标题部分--> <div class="title"> <h2>产品<img src="images/proicon.png" alt="小图标">中心</h2> <p>局域网远程、外网远程、手机远程、让监控 无处不在</p> </div> <!--产品列表--> <ul> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> <br> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">我们的产品</a> </li> </ul> </div> <!--广告图片--> <div class="ads-img"></div> <!--简介--> <div class="make"> <img src="images/make.png"> <div class="refer"> <p> 企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选... </p> <button>了解更多</button> </div> </div> <hr> <!--新闻列表--> <div class="news"> <img src="images/news.jpg"> <div class="right"> <ul> <li> <span><h1>25</h1><p>2010-01</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span><h1>25</h1><p>2010-01</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span><h1>25</h1><p>2010-01</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span><h1>25</h1><p>2010-01</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> </ul> </div> </div> <!--公共尾部--> <div class="footer"> <div class="top"> <ul> <li><P>友情链接：</P></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> <li><a href="">支付宝</a></li> <li><a href="">支付宝</a></li> </ul> </div> <div class="button"> <div class="dd"> <span>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图<br><br> 地址：广东省广州市天河区某某沙某某路沙某某路某某号 电话：020-22043297 传真：020-22043297</span> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS样式表：
实例
/*公共样式表*/
/*公共头部样式*/
.header{
width: 100%;
height: 170px;
}
/*顶部条样式*/
.header .tape{
height:31px;
border-top: 1px solid #f5f5f5;
border-bottom:1px solid #f5f5f5 ;
background-color:#fbfbfb;
}
/*设置宽度和居中*/
.info{
width: 1140px;
margin: auto;
/*BFC：块级格式化上下文*/
overflow: hidden;
line-height: 31px;
}
/*文本浮动设置*/
.header .tape .info .left{
float: left;
}
.header .tape .info .right{
float: right;
}
.header .info .logo{
width: 440px;
height: 88px;
float: left;
}
.header .info .search{
float: right;
height: 88px;
margin-right: 100px;
margin-top: 10px;
}
.header .info .search input{
width: 200px;
height: 26px;
border: 2px solid orange;
margin: 18px 0;
}
.header .info .search button{
width: 40px;
height: 32px;
background-color: orange;
border: none;
color: white;
margin-left: -45px;
border-bottom: 1px solid orange;
}
/*头部菜单*/
.header .menu{
width: 100%;
height: 50px;
background-color: black;
}
.header .menu ul li{
float: left;
line-height: 50px;
padding: 0 36px;
}
.header .menu ul li a{
font-size: 1.2em;
color: #ffffff;
}
.header .menu ul li:hover{
background-color: coral;
cursor:pointer;
}
/*.footer{
height: 144px;
width: 100%;
}
*/
.footer .top{
height: 42px;
width: 100%;
background-color: #3E3E3E;
margin: auto;
}
.footer .top ul{
width: 1140px;
margin: auto;
}
.footer .top li{
float: left;
}
.footer .top li P{
color: white;
line-height: 42px;
position: relative;
left: 298px;
}
.footer .top li a{
color: white;
line-height: 42px;
height: 100%;
padding: 0 10px;
text-align: center;
position: relative;
left: 295px;
}
.footer .button{
width:100%;
height: 92px;
background-color:#1F1F1F;
margin: auto;
font-size: 14px;
}
.footer .button .dd{
height: 92px;
width: 1140px;
color: white;
display: table-cell;
vertical-align:middle;
text-align: center;
position: relative;
left: 105px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*首页样式*/
.banner{
margin-top: 10px;
/*border: 1px solid red;*/
}
.banner img{
height: 389px;
width: 100%;
vertical-align: top;
}
.banner .zst{
height: 26px;
width: 100%;
background-color: #888;
opacity: 0.8;
margin-top: -26px;
}
.product{
width: 1140px;
margin: auto;
height:540px;
margin-top:40px;
margin-bottom: 30px;
overflow: hidden;
/*border: 1px solid red;*/
}
.product .title{
width: 100%;
height:50px;
text-align: center;
background-image: url("../images/title_bg.jpg");
background-repeat: no-repeat;
background-position: 0 0;
}
.product .title img{
padding: 0 7px;
}
.product ul li{
height: 220px;
width: 260px;
text-align: center;
float: left;
margin: 10px;
}
.product ul li img{
width: 100%;
height: 180px;
padding:10px 0;
/*margin-bottom: 10px;*/
}
.product ul li img:hover{
opacity: 0.6;
}
.ads-img{
width: 100%;
height: 412px;
background-image: url("../images/ads.jpg");
background-repeat: no-repeat;
}
.make{
width: 1140px;
height: 200px;
margin: 60px auto 40px auto;
}
.make img{
width: 286px;
height: 177px;
float: left;
/*overflow: hidden;*/
margin-right: 50px;
}
.make .refer p{
font-size: 14px;
line-height: 30px;
/*letter-spacing: 1px;*/
}
.make .refer button{
width:130px;
height: 34px;
background-color: #333;
color:#fff;
float: left;
margin-top: 30px;
margin-left: 30px;
border: none;
}
.make .refer button:hover{
background-color: coral;
cursor:pointer;
}
hr{
opacity: 0.1;
}
.news{
width: 1140px;
height: 370px;
margin:50px auto;
overflow: hidden;
}
.news img{
/*width:500px;*/
/*height: 315px;*/
float: left;
margin:20px auto;
}
.news .right{
overflow: hidden;
}
.news .right ul{
margin-left: 50px;
}
.news .right ul li {
height: 80px;
border-bottom: 1px dotted #ccc;
margin-bottom: 15px;
}
.news .right span{
float: left;
width: 58px;
height: 60px;
background-color: #2c2c2c;
text-align: center;
margin-right: 30px;
}
.news .right span *{
color: #ffffff;
}
.news .right ul li a{
color: #333333;
font-size: 16px;
/*font-family: ;*/
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*样式重置：所谓样式重置就是更改一些默认样式*/
/*关闭水平滚动条，允许开启垂直滚动条*/
html{
overflow-x: hidden;
overflow-y: auto;
}
body,h1,h2,h3,ul,li,p{
margin:0;
padding:0;
font-family:'microsoft yahei',Verdana, Arial;
color:#505050;
}
p,li,a{
font-size: 12px;
}
/*列表的基本样式*/
ul,li{
list-style-type: none;
}
/*去掉默认样式*/
a:link,a:visited,a:active{
color: #505050;
text-decoration: none;
}
/*鼠标悬停效果去掉*/
a:hover{
text-decoration:none;
color:#ff0000;
}运行实例 »
点击 "运行实例" 按钮查看在线实例