作业效果
实例：主页index.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">华迈千里眼 视频物联网专家</p> <p class="right">咨询电话：13986808720</p> </div> </div> <div class="info"> <div class="logo"><img src="images/logo.gif"></div> <div class="tel"><img src="images/400tel.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/xlgc.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/fangan1.png"></a> <a href="">雪亮工程</a> </li> <li> <a href=""><img src="images/fangan2.png"></a> <a href="">公共安全</a> </li><li> <a href=""><img src="images/fangan3.png"></a> <a href="">视频云服务</a> </li><li> <a href=""><img src="images/fangan4.png"></a> <a href="">物联网安防</a> </li> <br> <li> <a href=""><img src="images/fangan5.png"></a> <a href="">平安校园</a> </li> <li> <a href=""><img src="images/fangan6.png"></a> <a href="">阳光厨房</a> </li><li> <a href=""><img src="images/fangan7.png"></a> <a href="">移动监管</a> </li><li> <a href=""><img src="images/fangan8.png"></a> <a href="">案例中心</a> </li> </ul> </div> <!-- 广告 --> <div class="ads-img"></div> <!-- 我们是做什么的 --> <div class="make"> <img src="images/jieshao.jpg"> <div class="refer"> <p>成都华迈通信技术有限公司是国内技术领先的以实时音视频为基础的物联网智能综合应用方案供应商。专注于视频物联网的智能化、可视化应用领域，精耕海量实时音视频传输以及云计算核心技术与应用拓展，是国家高新技术企业、软件企业、四川省重点扶持的科技创新企业。 成都华迈跨界融合安防、IT通信、物联网、移动互联网多个行业和领域。创造了含第一个P2P视频管理平台在内的13项业内第一，对研发的所有产品拥有完全自主知识产权。公司始终坚持高清化、智能化、行业化、集成化的发展方向，为政府、电信、公安、交通、能源、教育、金融以及大型企业提供以实时音视频服务为基础的综合性物联网智能应用解决方案，以及配套的优质服务和技术支持。 </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>2018-2</p></span> <a href="">关于2018年春节放假公告<p>过去的一年，感谢各位合作伙伴对华迈一如既往的信任与支持；感谢我司全体员工的众志成...</p></a> </li> <li> <span><h1>20</h1><p>2017-12</p></span> <a href="">关于2018年元旦放假公告<p>值此新年来临之际，华迈通信全体员工恭祝大家在2018年里狗运骑天，财源旺旺！</p></a> </li> <li><span><h1>12</h1><p>2017-10</p></span> <a href="">推动两化深度融合 华迈力撑产业转型<p>12月11日, 我公司受邀参与四川省两化融合及产品创新与管理研讨会。四川省经济和信息化委员会副主任张延川...</p></a> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">本公司参加第八十届广州商<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会...</p></a> </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> ©2013 <b>成都华迈通信技术有限公司</b>(HUAMAITEL.COM) 版权所有 <a href="http://www.miitbeian.gov.cn" target="_blank">蜀ICP备1103045号</a><br /></p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例：首页专用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.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 {
width: 260px;
height: 282px;
text-align: center;
float: left;
margin: 10px;
}
.product li img {
width: 260px;
height: 190px;
margin-bottom: 10px;
}
.product li img:hover {
opacity: 0.8;
}
/*广告图片*/
.ads-img {
width: 100%;
height: 412px;
background-image: url(../images/ggaq.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: 1.5em;
}
.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;
clear:both;
}
.news .right li span {
float:left;
width: 60px;
height: 58px;
background-color: #5CACEE;
}
.news .right li span * {
color: #fff;
text-align: center;
}
.news .right li a {
display: block;
width:400px;
float:left;
margin-left: 20px;
color: #5CACEE;
}
.news .right li p {
float:left;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例：公共样式表 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: 171px;
height: 52px;
float: left;
margin-top:20px;
}
.header .info .tel {
width:270px;
height:30px;
float: left;
margin-top: 30px;
margin-left: 50px;
}
.header .info .search {
float:right;
height: 88px;
margin-right: 100px;
margin-top: 10px;
}
.header .info .search input {
width: 210px;
height: 26px;
border: 2px solid coral;
margin: 18px 0;
}
.header .info .search button {
width: 45px;
height:32px;
background-color: coral;
border: none;
color:white;
margin-left: -40px;
}
/*头部菜单*/
.header .menu {
width: 100%;
height: 50px;
background-color: #1C86EE;
}
.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: #5CACEE;
text-align: center;
}
.footer .bottom p {
color: #fff;
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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例