实例实例 <!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">欢迎访问抗太阳的小站</p> <p class="right">咨询电话：0519-82651544</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="nav"> <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.png"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="images/product.png"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="images/product.png"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="images/product.png"></a><a href="">产品应用案例</a></li> <br> <li><a href=""><img src="images/product.png"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="images/product.png"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="images/product.png"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="images/product.png"></a><a href="">产品应用案例</a></li> </ul> </div> <!-- 广告 --> <div class="ads"></div> <!-- 我们做什么 --> <div class="make"> <img src="images/make.png"> <div class="refer"> <p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p> <button>了解更多</button> </div> </div> <hr class="line"> <!-- 新闻列表 --> <div class="news"> <div class="left"><img src="images/news.jpg"></div> <div class="right"> <ul> <li><span><h1>25</h1><p>210-02</p></span><p class="as"><a href="">本公司参加第十八届广州商展</a><br>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p></li> <li><span><h1>25</h1><p>210-02</p></span><p class="as"><a href="">本公司参加第十八届广州商展</a><br>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p></li> <li><span><h1>25</h1><p>210-02</p></span><p class="as"><a href="">本公司参加第十八届广州商展</a><br>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p></li> <li><span><h1>25</h1><p>210-02</p></span><p class="as"><a href="">本公司参加第十八届广州商展</a><br>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</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:123456789 网站地图</p> </div> </div> </body> </html> 运行实例 » 点击 "运行实例" 按钮查看在线实例
公共样式表
/*公共样式*/
/*头部样式*/
.header{
width: 100%;
height: 170px;
}
.header .tape{
height: 30px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #f0f0f0;
}
.info{
width: 1140px;
margin: auto;
line-height: 30px;
font-size: 12px;
overflow: hidden;
}
.header .tape .info .left{
float: left;
}
.header .tape .info .right{
float:right;
}
.header .info .logo{
width: 440px;
height: 88px;
float: left;
margin-left: -120px;
}
.header .info .search{
float: right;
height: 88px;
margin-right: 0px;
}
.header .info .search input{
width: 210px;
height:26px;
border: 2px solid #000;
margin: 26px 0;
padding-left: 10px;
}
.header .info .search button{
width: 60px;
height: 30px;
background-color: #000;
border:0;
color: white;
margin-left: -65px;
}
/*头部菜单*/
.header .nav{
width: 100%;
height:50px;
background-color:#ffd100;
}
.header .nav ul li{
float: left;
line-height: 50px;
padding: 0 40px;
}
.header .nav ul li a{
font-size: 1.1em;
color: #fff;
}
.header .nav ul li:hover{
background-color: #000;
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: 90px;
background-color: #000;
text-align: center;
}
.footer .bottom p{
color: #fff;
line-height: 90px;
}运行实例 »
实例
/*首页样式*/
.banner img{
width: 100%;
height: 450px;
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:-10px 0;
}
.product .title img{
padding: 0 10px;
}
.product li{
float: left;
width: 260px;
height: 282px;
text-align: center;
margin: 20px 10px 10px 10px;
}
.product li img{
width: 260px;
height: 195px;
margin-bottom:10px;
}
.ads{
width: 100%;
height: 412px;
background-image:url(../images/banner2.jpg);
background-repeat:no-repeat;
margin-bottom: 50px;
}
.make{
width: 1140px;
margin: auto;
margin-bottom: 40px;
}
.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;
border: none;
}
.make .refer button:hover{
background-color: coral;
cursor: pointer;
}
.line{
width: 1600Px;
height: 1px;
margin:80px auto;
background-color: #efefef;
border: none;
}
.news{
width: 1140px;
margin: auto;
margin-bottom: 50px;
/* overflow: hidden;*/
}
.news .left{
float: left;
}
.news .left img{
width: 500px;
height: 310px;
}
.news .right{
overflow: hidden;
}
.news .right ul{
margin-left: 50px;
}
.news .right ul li{
height: 80px;
border-bottom: 1px solid #c9c9c9;
}
.news .right ul li span{
float: left;
width: 60px;
height: 58px;
background-color: #000;
margin-top: 10px;
}
.news .right ul li span * {
color: #fff;
text-align: center;
}
.news .right .as{
float: left;
margin-left: 20px;
margin-top: 15px;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
