首先，需要把网站的布局写出来，包括头部、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;
}点击 "运行实例" 按钮查看在线实例
Correction status：qualified
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
