今天老师说是学习CSS最后一天，所以这场练习很重要，写了好久才完成的，里面运用了这一周以来学习到底所有知识。
一个精美的网站展示页面预览图
index.html代码如下：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 导入公共样式表 --> <link rel="stylesheet" type="text/css" href="css/common.css"> <!-- 导入首页样式表 --> <link rel="stylesheet" type="text/css" href="css/index.css"> <!-- 导入重置样式表 --> <link rel="stylesheet" type="text/css" href="css/reset.css"> <title>中控科技</title> </head> </style> <body> <!-- 头部信息 --> <div class="header"> <div class="info"> <div class="logo"><img src="images/logo.png"></div> <div class="search"><a href=" ">序列号查询</a>|<a href=" ">网店授权查询</a> <input type="text" name="name" placeholder="请输入名称或编号"> <button>搜索</button> </div> </div> </div> </div> <!-- 导航 --> <div class="menu"> <div class="info"> <ul type="none"> <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> <!-- 首页Banner图 --> <div class="banner"> <img src="images/hengfu.png" alt="图片"> </div> <!-- 新闻 --> <div class="news"> <p class="item1">热点新闻</p> <p class="item2">2018智慧城市从这里起航,砥砺前行、智慧起航，... 发布时间：2018年3月29日</p></div> <div class="product"> <!-- 产品列表 --> <ul> <li> <a href=""><img src="http://cn.zkteco.com/imageRepository/fdd95d0b-5736-43df-bada-3bc68ce2e40b.png"></a> <a href="">关于中控智慧</a> </li> <li> <a href=""><img src="http://cn.zkteco.com/imageRepository/d30a5b0e-7048-4ada-9c66-7f7dd5359d91.png"></a> <a href="">人脸识别终端</a> </li><li> <a href=""><img src="http://cn.zkteco.com/imageRepository/166f6505-fc5c-4caa-8ed4-cb673de0d310.png"></a> <a href="">新闻中心</a> </li><li> <a href=""><img src="http://cn.zkteco.com/imageRepository/510d9457-279a-4335-8ca2-6d4990e7d4fb.png"></a> <a href="">技术支持</a> </li> </ul> </div> <div class="footer"> <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> <p> Copyright © 2018 中控智慧科技股份有限公司 版权所有 粤ICP备17131293号-1</p></ul> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例 »
运行实例 »
运行实例 »
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS代码（common.css)代码
实例
/*公共样式表*/
/*公共头部的样式*/
.info {
width: 100%;
height: 102px;
}
.info .logo {
width: 710px;
height: 102px;
float: left;
margin-left: 372px;
}
.info .search {
float:right;
height: 102px;
margin-top: 10px;
}
.info .search {
font-color: green;
font-family: 微软雅黑;
font-size: 20px;
}
.info .search a {
color: green;
font-family: 微软雅黑;
font-size: 13px;
}
.info .search button {
margin-top:20px;
width: 45px;
height:24px;
background-color: green;
border: none;
color:white;
margin-left: -40px;
margin-right: 372px;
}
.menu{
}
.menu .info{
width: 100%;
height: 50px;
background-color: lightgray;
opacity: 0.8;
}
.menu .info ul {
margin-left: 372px;
color:#505050;
}
.menu .info ul li {
float: left;
line-height: 50px;
padding: 0 30px;
}
.menu ul li a {
font-size: 1.1em;
color: #fff;
color:green;
text-decoration: none;
font-family: 微软雅黑;
}
.footer {
width: 100%;
height: 60px;
margin: auto;
float:left;
margin-left: 250px;
padding:0 30px;
}
.footer .ul {
width: 100%;
height: 40px;
}
.footer ul li {
float:left;
padding:0 8px;
font-size: 10px;
font-family: 微软雅黑;
line-height: 50px;
}
.footer ul p{
float:left;
font-size: 10px;
font-family: 微软雅黑;
line-height: 50px;
margin-left: 170px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS代码（index.css)代码
实例
/*首页专用的css样式表*/
.banner {
/*border:1px solid red;*/
}
.banner img {
width: 100%;
height: 485px;
vertical-align: top;
}
.news {
width: 100%;
height:60px;
background-color: #F0F8FF;
}
.item1{
float: left;
margin-left:380px;
padding:0 20px;
font-size: 20px;
height: 60px;
margin-top:0px;
margin-bottom: 0px;
line-height: 50px;
background-color:#3CB371;
opacity: 0.8;
color: white;
}
.item2{
float: right;
margin-right: 600px;
line-height: 50px;
height: 60px;
margin-top:0px;
margin-bottom: 0px;
font-size: 6px;
}
.product {
margin-left: 250px;
margin-top: 30px;
}
.product li {
width: 260px;
height: 282px;
padding:0 40px;
text-align: center;
float: left;
}
.product li img {
width: 260px;
height: 197px;
margin-bottom: 10px;
}
.product li img:hover {
opacity: 0.8;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS代码（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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
