今天学习了仿制网站项目，听课比较容易，做起来非常难，跟着老师的代码重新一点一点写了一遍，没有创新，一切以尽可能的记住为目标。
网站效果如下：
根据老师要求，建立了三个css文件，分别是common.css、index.css、reset.css文件
代码如下：
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: 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: 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 {
overflow: hidden;
}
.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 {
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;
}点击 "运行实例" 按钮查看在线实例
index.css:
实例
.banner img {
width: 100%;
height: 452px;
vertical-align: top;
}
.banner .line {
width: 100%;
height: 30px;
opacity: 0.4;
background-color: #696969;
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 ul li {
width: 260px;
height: 282px;
text-align: center;
float: left;
margin: 10px;
}
.product ul li img {
width: 260px;
height: 196px;
margin-bottom: 10px;
}
.product img:hover {
opacity: 0.4;
}
.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: 30px;
}
.make p {
line-height: 2em;
}
.make button {
width: 130px;
height: 34px;
border:none;
background-color: gray;
color: #fff;
}
.make 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 ul li span {
float: left;
width: 60px;
height: 58px;
background-color: black;
margin-right: 20px;
}
.news .right ul li span * {
color: #fff;
text-align: center;
}
.news .right li {
border-bottom: 2px dotted gray;
margin-top: 20px;
}点击 "运行实例" 按钮查看在线实例
主页代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网站样式</title>
<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">
</head>
<body>
<div class="header">
<div class="taps">
<div class="info">
<p class="left">欢迎访问本网站</p>
<p class="right">联系电话：400-45780234</p>
</div>
</div>
<div class="info">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="serch">
<input type="text" name="text" 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>
<div class="banner">
<img src="images/banner.jpg">
<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="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><span><h1>25</h1><p>2010-1</p></span>
<a href="">中科院院士王教授来本公司</a>
<p>中科院院士王教授来本公司访问调研研中科院院士王教授来本公司访问调研</p>
</li>
<li>
<span><h1>25</h1><p>2010-1</p></span>
<a href="">本公司通过国家科技部高新</a>
<p>本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术</p>
</li>
<li><span><h1>06</h1><p>2010-1</p></span>
<a href="">某某公司新版网站全新改版</a>
<p>某某公司新版网站全新改版成功某某公司新版网站全新改版成功某某公司新版网站全新改版成功</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="">百度</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="">php中文</a></li>
</ul>
</div>
<div class="bottom">
<p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
</div>
</div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
Correction status：Uncorrected
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
