header.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <!-- 导入重置样式表 --> <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> <div class="right">咨询电话：0934-324232 </div> </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="info"> <div class="logo"></div> <div class="search"> <input type="text" name="name" placeholder="关键字"> <button>搜索</button> </div> </div> </div> <!-- 首页Banner图 --> <div class="banner"> <img src="/image/banner.jpg" alt="图片"> <div class="line"></div> </div> <!-- 产品列表 --> <div class="product"> <!-- 标题部分 --> <div class="title"> <h2>产品 <img src="" alt="">中心</h2> </div> <p>局域网远程监控无处不在</p> <!-- 产品列表 --> <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><br> <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><h1>25</h1><p>2010-1</p></span> <a href="">本公司参加第八十</a> <p>本公司参加第八十届</p> </li> <li></li> <li></li> <li></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>dasjklfjdsaljflsaj</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
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: 28px;
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{
background-color: #fff;
line-height: 92px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
index.css
实例
/*首页专用css样式表*/
.banner{
border: 1px solid red;
}
.banner img{
width: 100%;
height:452px;
vertical-align: top;
}
.banner .line{
height: 30px;
background-color: #696969;
opacity: 0.3;
margin-top: -30px;
}
/*产品列表*/
.product{
width: 1140px;
margin:auto;
margin-top: 30px;
margin-bottom: 30px;
/*浮动只在这个块中*/
overflow: hidden;
}
.product .title{
text-align: center;
background-image: url(../image/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{
opcity: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;
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;
}
.news .right li span{
float: left;
width: 60px;
height: 18px;
background-color: black;
}
.news .right li span *{
color: #fff;
text-align: center;
}
.news .right li{
border:1px dotted #333
}运行实例 »
点击 "运行实例" 按钮查看在线实例
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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
