安防监控器材
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css"> <title>安防监控器材</title> </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="serach"> <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> <!--bannder--> <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" alt=""> <div class="refer"> <p> 企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p> <button>了解更多</button> </div> </div> <hr size="1" color="#ECECEC"> <!--新闻列表--> <div class="news"> <div class="left"> <img src="images/news.jpg" alt=""> </div> <div class="right"> <ul> <li> <span><h1>25</h1><p>201-1</p></span> <a href="#">本公司参加第八十届广州商</a> <p class="show_content">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span><h1>25</h1><p>201-1</p></span> <a href="#">中科院院士王教授来本公司</a> <p class="show_content">中科院院士王教授来本公司访问调研研中科院院士王教授来本公司访问调研</p> </li> <li> <span><h1>25</h1><p>201-1</p></span> <a href="#">本公司通过国家科技部高新</a> <p class="show_content">本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术</p> </li> <li> <span><h1>25</h1><p>201-1</p></span> <a href="#">某某公司新版网站全新改版</a> <p class="show_content">某某公司新版网站全新改版成功某某公司新版网站全新改版成功某某公司新版网站全新改版成功</p> </li> </ul> </div> </div> <!--公共底部--> <div class="footer"> <div class="top"> <ul> <li><a href="" title="支付宝">支付宝</a></li> <li><a href="" title="阿里云">阿里云</a></li> <li><a href="" title="腾讯QQ">腾讯QQ</a></li> <li><a href="" title="百度搜索">百度搜索</a></li> <li><a href="" title="同福信息科技">同福信息科技</a></li> <li><a href="" title="网博士">网博士</a></li> <li><a href="" title="草莓互联">草莓互联</a></li> <li><a href="" title="phpweb">phpweb</a></li> <li><a href="" title="weboss">weboss</a></li> </ul> </div> <div class="bottom"> <p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p> <p>地址：广东省广州市天河区某某沙某某路沙某某路某某号 电话：020-22043297 传真：020-22043297</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
公共样式
/**
公共样式
*/
/*公共头部*/
.header {
width: 100%;
height: 170px;
}
.info {
width: 1140px;
margin: auto;
overflow: hidden;
}
.header .tape .info .left {
float: left;
}
.header .tape .info .right {
float: right;
}
.header .tape {
height: 28px;
background-color: #FBFBFB;
line-height: 28px;
}
.header .info .logo {
width: 440px;
height: 58px;
float: left;
padding: 20px 0;
}
.header .info .serach{
float: right;
margin-right: 100px;
margin-top: 20px;
}
.header .info .serach input{
width: 220px;
height: 30px;
border: 2px solid #FF6637;
}
.header .info .serach button{
width:50px;
height:36px;
margin-top: 3px;
border: none;
margin-left: -55px;
background-color:#FF6637 ;
color: white;
}
.header .menu{
width: 100%;
height: 50px;
background-color: #000000;
}
.header .menu ul li{
float: left;
width: 130px;
line-height: 50px;
text-align: center;
}
.header .menu ul li a{
color: white;
}
.header .menu ul li:hover{
background-color: #FF6637;
cursor:pointer ;
}
.footer {
width: 100%;
background-color:#3E3E3E;
overflow: hidden;
}
.footer .top{
width: 1145px;
height:42px;
margin: auto;
background-color:#3E3E3E;
}
.footer .top ul{
/*width: 100%;*/
margin: 0 auto;
display: table;
text-align: center;
padding: 0;
}
.footer .top ul li{
float: left;
padding: 0 20px;
margin: auto;
list-style-type: none;
line-height: 42px;
}
.footer .top ul li a{
text-align: center;
line-height: 42px;
color: white;
}
.footer .top ul li a:hover{
cursor: pointer;
}
.footer .bottom{
width: 1145px;
height: 92px;
text-align: center;
margin: auto;
}
.footer .bottom p{
color: white;
margin-top: 8px;
}
/**
使div中url li 元素不够时 ul li 整体位于界面水平居中
1、设置ul display：table 设置 text-align：center，margin:0 auto;
2、设置 li 清除 list-style-type：none；就可以居中了
注意：ul设为display：table；text-align：center；但记住千万千万不可以设置ul的宽，不然无法实现。
*/运行实例 »
点击 "运行实例" 按钮查看在线实例
样式重置
/**
样式重置
*/
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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
首页样式
/**
首页样式
*/
.banner img{
width: 100%;
height: 452px;
/**
默认图片底部会有一个几个像素的白框这样可以去掉
*/
vertical-align: top;
}
.banner .line{
width:100%;
height:35px;
background-color:#9C9A9B;
margin-top: -35px;
opacity: 0.5;
}
.product{
width: 1145px;
margin: auto;
margin-top: 30px;
overflow: hidden;
}
.product .title{
margin: auto;
text-align: center;
background-image: url(../images/title_bg.jpg);
background-repeat: no-repeat;
background-position: 0 0;
margin-bottom: 30px;
/**
这个复位没看出来效果啊
*/
}
.product ul li{
float: left;
width: 260px;
height: 282px;
text-align: center;
padding: 0 10px;
}
.product li img{
width: 260px;
height: 197px;
}
.ads-img{
width: 100%;
height: 412px;
background-image: url("../images/ads.jpg");
background-repeat: no-repeat;
background-position: 0 0;
}
.make{
width: 1145px;
overflow: hidden;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.make img{
width: 286px;
height: 177px;
float: left;
}
.make p{
line-height: 20px;
}
.news{
width: 1145px;
margin: auto;
overflow: hidden;
margin-top: 50px;
}
.news .left img{
width: 500px;
height: 315px;
vertical-align: middle;
float: left;
margin-top: 30px;
}
.news .right{
overflow: hidden;
}
.news .right li{
height: 85px;
border-bottom: 1px dashed #CCCCCC;
}
.news .right span{
width: 60px;
height: 58px;
background-color: rgb(44,44,44);
float: left;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
/**
这样写为啥不行？ span 标签内部 h1 p 设置颜色
*/
/*.news .right span h1,p{*/
/*color: white;*/
/*}*/
.news .right span *{
color: white;
}
.news .right li .show_content{
margin-top: 10px;
}
.news .right li a{
display: block;
margin-top: 10px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果：
