代码：
zuoye.html:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 导入重置样式表 --> <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"> <title>首页</title> </head> <body> <!-- 公共头部 --> <div class="header"> <div class="tape"> <div class="info"> <p class="left">欢迎访问xx安防消防有限公司~</p> <p class="right">咨询电话：010-12345678</p> </div> </div> <div class="info"> <div class="logo"><img src="images/logo.png"> </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"></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 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="">本公司参加第8000届广州厂商</a> <p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">本公司参加第8000届广州厂商</a> <p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">本公司参加第8000届广州厂商</a> <p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</p> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">本公司参加第8000届广州厂商</a> <p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</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="">Google</a></li> <li><a href="">新浪</a></li> </ul> </div> <div class="bottom"> <p>CopyRinght 2013 ALL Right Reserved 通用企业模板网站 ICP：xxxxxxxx 网站地图</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
index.css:
实例
/*首页专用的css样式表*/
.banner {
border: 1px solid red;
}
.banner img {
width: 100%;
height: 452px;
/*去除红色边框和图片下侧的几个像素的距离 紧紧包住*/
vertical-align: top;
}
.banner .line {
height: 30px;
background-color: #696969;
margin-top: -30px;
opacity: 0.4;
}
/*产品列表*/
.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;
}
/*li格式*/
.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 {
margin-top: 30px;
width: 130px;
height: 34px;
/*去边框*/
border: none;
/*背景，字体颜色*/
background-color: gray;
color: white;
}
/*鼠标移动到按钮交互*/
.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;
}
.news .right li span {
float: left;
width: 60px;
height: 58px;
background-color: black;
margin-right: 30px;
}
.news .right li span * {
color: white;
text-align: center;
}
.news .right li a:hover {
color: coral;
}
.news .right li p {
margin-top: 5px;
font-size: 0.7em;
}
.news .right li {
border-bottom: 1px dotted #efefef;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
common.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: 200px;
height: 26px;
border: 2px solid coral;
margin: 18px 0;
}
.header .info .search button {
width: 40px;
height: 33px;
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 40px;
}
.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: white;
line-height: 92px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
reset.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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
