index.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" 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> <!-- 横幅广告 --> <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"></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-picture"></div> <!-- 我们是做什么的 --> <div class="make"> <img src="images/make.png"> <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><h1>25</h1><p>2010-1</p></span> <a href="">本公司参加第八十届广州商</a> <p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">中科院院士王教授来本公司</a> <p>中科院院士王教授来本公司访问调研研中科院院士王教授来本公司访问调研</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">本公司通过国家科技部高新</a> <p>本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">某某公司新版网站全新改版</a> <p>某某公司新版网站全新改版成功某某公司新版网站全新改版成功某某公司新版网站全新改版成功</p> </li> </ul> </div> </div> <!-- 网页底部 --> <div class="footer"> <div class="top"> <ul> <li class="start">友情链接：</li> <li><a href="">WEBOSS</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="">同福信息科技</a></li> <li><a href="">网博士</a></li> <li><a href="">草莓互联</a></li> <li><a href="">PHPWeb</a></li> </ul> </div> <div class="bottom"> <p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
common.css:
实例
/*公共部分*/
/*网页头部*/
.header{
height: 160px;
width: 100%;
}
.header .tape{
height: 32px;
border-top: 1px solid lightgray;
border-bottom: : 1px solid lightgray;
background-color: #fbfbfb;
}
.info{
width: 1140px;
margin: auto;
/*BFC:块级格式化上下文*/
overflow: hidden;
}
.header .tape .info .left{
float: left;
line-height: 32px;
}
.header .tape .info .right{
float: right;
line-height: 32px;
}
.header .tape .info .right:before{
float: left;
content:url(../images/photo1.jpg);
padding-right: 5px;
padding-top:3.5px;
}
.header .info .logo{
float: left;
width: 440px;
height: 58px;
/*margin-top: 10px;*/
}
.header .info .search{
float: right;
width: 250px;
height: 58px;
margin-top: 20px;
}
.header .info .search input{
width: 190px;
height: 30px;
border:2px solid coral;
margin:12px 0;
}
.header .info .search button{
width: 50px;
height: 34px;
margin-left: -56px;
background-color: coral;
/*border-radius: 50%;*/
border: none;
color: white;
}
/*头部菜单*/
.header .menu{
height: 50px;
background-color: black;
width: 100%;
/*margin: 10px 0;*/
}
.header .menu .info ul li{
float: left;
/*width: 130px*/padding: 0 40px;
line-height: 50px;
text-align: center;
}
.header .menu .info ul li a{
font-size: 1em;
color: white;
}
.header .menu .info ul li:hover{
background-color: coral;
font-weight: bolder;
cursor: pointer;
}
/*公共底部*/
.footer .top{
width: 100%;
height: 42px;
background-color: #3e3e3e;
margin: auto;
}
.footer .top ul {
width: 1140px;
height: 100%;
margin: auto;
}
.footer .top li{
float: left;
}
.footer .top li a{
padding:0 20px;
line-height: 42px;
color: white;
}
.footer .top li a:hover{
font-size: 1.1em;
}
.footer .top .start{
color: white;
font-size: 1.1em;
line-height: 42px;
}
.footer .top li:hover{
background-color:coral;
cursor: pointer;
}
.footer .bottom{
width: 100%;
height: 92px;
background-color: black;
text-align: center;
}
.footer .bottom p{
line-height: 92px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
index.css:
实例
/*首页专用的样式表*/
.banner{
/*border: 1px solid red;*/
}
.banner img{
width: 100%;
height: 350px;
vertical-align: top;
}
.banner .line{
height: 30px;
background-color: #696969;
opacity: 0.4;
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{
float: left;
width: 260px;
height: 282px;
text-align: center;
margin: 10px;
}
.product li img{
width: 260px;
height: 197px;
margin-bottom: 10px;
}
.product li img :hover {
opacity: 0.8;
}
/*广告图片*/
.ads-picture{
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: 287px;
height: 177px;
float: left;
margin-right: 50px;
}
.make .refer p{
line-height: 2em;
}
.make .refer button{
width: 130px;
height: 34px;
border: none;
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 blue;
}
.news .right ul li a{
padding-left: 30px;
}
.news .right ul li a:hover{
color: lightgreen;
font-size: 1.2em;
}
.news .right li span{
float: left;
width: 60px;
height: 58px;
background-color: black;
}
.news .right li span *{
color: #fff;
text-align: center;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
rest.css:
实例
/*样式重置*/
html{
overflow-y: auto;
overflow-x: hidden;
}
body,h1,h2,h3,h4,h5,h6,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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
从实战中来学习知识是个很不错的方式。通过实战把之前学习的知识点基本运用到实践中，可以直面的知道该知识点的用处。
效果图：
![504G(2Y6}DHNCOIOA$@]$CG.png](https://img.php.cn//upload/image/597/664/914/1522379658897999.png "1522379658897999.png")
