仿写一个网站
代码：
实例
<!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="head"> <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"></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/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"> <div class="refer"> <p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p> <button>了解更多</button> </div> </div> <hr color="#efefef" size="1"> <!-- 公共底部 --> <div class="foot"> <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:xxxxxxxx 网站地图</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
头部底部：
实例
/*公共样式表*/
/*公共头部的样式*/
.head {
width: 100%;
height: 190px;
}
.head .tape {
height: 28px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #fbfbfb;
}
.info {
width: 1140px;
margin: auto;
/*BFC：块级格式化上下文*/
overflow: hidden;
}
.head .tape .info .left {
float:left;
}
.head .tape .info .right{
float:right;
}
.head .info .logo {
width: 50% ;
height: 120px;
float: left;
}
.head .info .search {
float:right;
height: 88px;
margin-right: 0px;
margin-top: 10px;
}
.head .info .search input {
width: 210px;
height: 26px;
border: 2px solid coral;
margin: 18px 0;
}
.head .info .search button {
width: 45px;
height:32px;
background-color: coral;
border: none;
color:white;
margin-left: -40px;
}
/*头部菜单*/
.head .menu {
width: 100%;
height: 50px;
background-color: black;
}
.head .menu ul li {
float: left;
line-height: 50px;
padding: 0 40px;
}
.head .menu ul li a {
font-size: 1.1em;
color: #fff;
}
.head .menu ul li:hover {
background-color: coral;
cursor: pointer;
}
.foot {
width: 100%;
}
/*公共底部*/
.foot .top {
width: 100%;
height: 40px;
background-color: #3e3e3e;
margin: auto;
}
.foot .top ul {
width: 1140px;
margin: auto;
}
.foot .top li {
float:left;
}
.foot .top li a {
height: 100%;
padding: 0 20px;
color:#fff;
text-align: center;
line-height: 40px;
}
.foot .bottom {
width: 100%;
height: 92px;
background-color: black;
text-align: center;
}
.foot .bottom p {
color: #fff;
line-height: 92px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
网页部分：
实例
/*公共样式表*/
/*公共头部的样式*/
.head {
width: 100%;
height: 190px;
}
.head .tape {
height: 28px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #fbfbfb;
}
.info {
width: 1140px;
margin: auto;
/*BFC：块级格式化上下文*/
overflow: hidden;
}
.head .tape .info .left {
float:left;
}
.head .tape .info .right{
float:right;
}
.head .info .logo {
width: 50% ;
height: 120px;
float: left;
}
.head .info .search {
float:right;
height: 88px;
margin-right: 0px;
margin-top: 10px;
}
.head .info .search input {
width: 210px;
height: 26px;
border: 2px solid coral;
margin: 18px 0;
}
.head .info .search button {
width: 45px;
height:32px;
background-color: coral;
border: none;
color:white;
margin-left: -40px;
}
/*头部菜单*/
.head .menu {
width: 100%;
height: 50px;
background-color: black;
}
.head .menu ul li {
float: left;
line-height: 50px;
padding: 0 40px;
}
.head .menu ul li a {
font-size: 1.1em;
color: #fff;
}
.head .menu ul li:hover {
background-color: coral;
cursor: pointer;
}
.foot {
width: 100%;
}
/*公共底部*/
.foot .top {
width: 100%;
height: 40px;
background-color: #3e3e3e;
margin: auto;
}
.foot .top ul {
width: 1140px;
margin: auto;
}
.foot .top li {
float:left;
}
.foot .top li a {
height: 100%;
padding: 0 20px;
color:#fff;
text-align: center;
line-height: 40px;
}
.foot .bottom {
width: 100%;
height: 92px;
background-color: black;
text-align: center;
}
.foot .bottom p {
color: #fff;
line-height: 92px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
