首先，需要把网站的布局写出来，包括头部、banner图、产品列表、广告图、关于我们、文章资讯、底部等板块。
然后写出对应的小版块，并写好css代码。
首页html代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <!-- 公共头部 --> <div class="header"> <div class="tape"> <div class="info"> <p class="left">欢迎访问*****公司网站</p> <p class="right">咨询电话***-****</p> </div> </div> <div class="info"> <div class="logo"><img src="images/logo.png" alt=""></div> <div class="search"> <input type="text" name="name" 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="line"></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" alt=""></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg" alt=""></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg" alt=""></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg" alt=""></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg" alt=""></a> <a href="">我的产品名称</a> </li> <li> <a href=""><img src="images/product.jpg" alt=""></a> <a href="">我的产品名称</a> </li> <li> <a href=""><img src="images/product.jpg" alt=""></a> <a href="">我的产品名称</a> </li> <li> <a href=""><img src="images/product.jpg" alt=""></a> <a href="">我的产品名称</a> </li> </ul> </div> <!-- 广告图片 --> <div class="ads-img"></div> <!-- 我们是做什么的 --> <div class="make"> <img src="images/make.png" alt=""> <div class="refer"> <p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p> <button>了解更多</button> </div> </div> <hr color="#efefef" size="1"> <!-- 新闻列表 --> <div class="news"> <div class="left"> <img src="images/news.jpg" alt=""> </div> <div class="right"> <ul> <li> <span><h2>25</h2><p>2010-1</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商</p> </li> <li> <span><h2>25</h2><p>2010-1</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商</p> </li> <li> <span><h2>25</h2><p>2010-1</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商</p> </li> <li> <span><h2>25</h2><p>2010-1</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商</p> </li> </ul> </div> </div> <!-- 公共底部 --> <div class="footer"> <div class="top"> <ul> <li><a href="">阿里云</a></li> <li><a href="">支付宝</a></li> <li><a href="">腾讯QQ</a></li> <li><a href="">百度搜索</a></li> <li><a href="">PHP</a></li> <li><a href="">阿里云</a></li> <li><a href="">支付宝</a></li> <li><a href="">腾讯QQ</a></li> <li><a href="">百度搜索</a></li> <li><a href="">PHP</a></li> </ul> </div> <div class="bottom"> <p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
rest.css文件，主要是用作重置默认的css属性，避免影响到咱们的页面开发。
实例
/*样式重置*/
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:#505050;
text-decoration:none;
}
a:hover {
text-decoration:none;
/*color:#ff0000;*/
color:#f00;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
common.css文件，用来写公共部分的css代码，即头部和底部的。
实例
/*公共样式*/
/*公共头部样式*/
.header {
width:100%;
height:170px;
}
.header .tape {
height:28px;
border-top:1px solid #f5f5f5;
border-bottom:1px solid #f5f5f5;
background-color:#fbfbfb;
}
.info {
width:1140px;
margin:auto;
/*BFC,块级格式化上下文*/
overflow:hidden;
}
.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:210px;
height:25px;
border: 2px solid coral;
margin:18px 0;
}
.header .info .search button {
width:45px;
height:32px;
background-color:coral;
border:none;
color:white;
margin-left:-40px;
}
/*头部菜单*/
.header .menu {
width:100%;
height: 50px;
background-color: black;
}
.header .menu ul li {
float:left;
line-height:50px;
padding:0 30px;
}
.header .menu ul li a {
font-size:1.1em;
color:#fff;
}
.header .menu ul li:hover {
background-color:coral;
cursor:pointer;
}
/*公共底部*/
.footer .top{
width:100%;
height:40px;
background-color:#3e3e3e;
margin:auto;
}
.footer .top ul {
width:1140px;
margin:auto;
}
.footer .top li {
float:left;
}
.footer .top li a{
height:100%;
padding:0 20px;
color:#fff;
text-align:center;
line-height:40px;
}
.footer .bottom {
width:100%;
height:92px;
background-color:black;
text-align:center;
}
.footer .bottom p {
color:#fff;
text-align:center;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
最后是首页自身的css属性，对每一个板块设置其属性。
实例
/*首页专用样式表*/
.banner{
/*border:1px solid red;*/
}
.banner img {
width:100%;
height:452px;
vertical-align: top;
}
.banner .line {
height:30px;
background-color:#696969;
opacity:0.2;
margin-top:-30px;
}
/*产品列表*/
.product {
width:1140px;
margin:auto;
margin-top:30px;
margin-bottom:30px;
overflow:hidden;
}
.product .title {
text-align: center;
background-image: url(../images/title_bg.jpg);
background-repeat:no-repeat;
background-position:0 0;
}
.product .title img {
padding:0 5px;
}
.product li {
width:260px;
height:282px;
text-align:center;
float:left;
margin:10px;
}
.product li img {
width:260px;
height:197px;
margin-bottom:10px;
}
.product li img:hover {
opacity:0.8;
}
/*广告图片*/
.ads-img {
width:100%;
height:412px;
background-image: url(../images/ads.jpg);
background-repeat:no-repeat;
margin-bottom: 50px;
}
/*我们做什么*/
.make {
width:1140px;
margin:auto;
margin-bottom:50px;
}
.make img{
width:286px;
height:177px;
float:left;
margin-right:50px;
}
.make .refer p{
line-height:2em;
}
.make .refer button {
width:130px;
height:34px;
background-color:gray;
color:#fff;
}
.make .refer button:hover {
background-color:coral;
cursor: pointer;
}
/*新闻列表*/
.news {
width:1140px;
margin:auto;
margin-top:50px;
margin-bottom:50px;
overflow:hidden;
}
.news .left {
float:left;
}
.news .left img {
width:500px;
height:315px;
}
.news .right {
overflow:hidden;
}
.news .right ul {
margin-left:50px;
}
.news .right ul li {
height:80px;
border-bottom:1px dotted #333;
margin-bottom:10px;
}
.news .right li span{
float:left;
width:60px;
height:58px;
background-color:black;
}
.news .right li span * {
color:#fff;
text-align:center;
}
.news .right li a {
margin-left:50px;
font-size:1.2em;
}
.news .right li a:hover {
color:coral;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
