仿一个完整网站总结——2018年3月29日22时50分

2个星期下来，仿做一个完整的真实网站还是具有一定的挑战性的，至少对于我来说是这样。网站做完后，在其中碰到不少的小问题，但还是坚持的解决了。但比起朱老师的代码，我只能呵呵了。感觉有点多！好了下面把我的实战代码分享给大家看看吧。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿一个完整网站</title>
	<link rel="stylesheet" type="text/css" href="../3.29/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../3.29/css/common.css">
	<link rel="stylesheet" type="text/css" href="../3.29/css/index.css">
</head>
<body>
	<!-- 通用头部 -->
<div id="headr">
	<!-- 欢迎语 -->
	<div class="top">
		<div class="left">欢迎光临安防电子器材有限公司</div>
		<div class="right">咨询电话：400-8888888</div>
	</div>
	<!-- 网站LOGO -->
	<div class="logo">
		<img src="../3.29/images/logo.png" alt="">

		<div class="sousuo">
			<button>搜索</button>
			<input type="text" name="so" placeholder="请输入关键词">
		</div>
	</div>
	<!-- 网站导航 -->
	<div class="daohang">
		<div class="dh1140">
		<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="lunbo">
	<img src="../3.29/images/1519616790.jpg" alt="">
	<div class="yin"></div>
</div>

<!-- 产品中心 -->
<div class="cp">
	<h2>产品<img src="../3.29/images/yanjing.png" alt="">中心</h2>
	<p>局域网远程、外网远程、手机远程、让监控 无处不在</p>
	<div class="cp_list">
		<ul>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
			<br>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
			<li><a href=""><img src="../3.29/images/product.jpg" alt="">产品标题</a><a href=""></a></li>
		</ul>
	</div>
</div>

<!-- 中间广告 -->
<div class="gg"></div>

<!-- 企业文化 -->
<div class="wenhua">
	<div class="imr_left"><img src="../3.29/images/make.png" alt=""></div>
	<div class="imr_right">
		<p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p>
		<button>了解更多</button>
	</div>
</div>

<!-- 新闻例表 -->
<div class="news">
	<div class="new_left"><img src="../3.29/images/news.jpg" alt=""></div>	
	<div class="new_right">
		<ul>
			<li>
				<span><strong>25</strong><br>2010-01</span>
				<a href="">本公司参加第八十届广州商</a>
				<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
			</li><hr>
			<li>
				<span><strong>23</strong><br>2011-01</span>
				<a href="">中科院院士王教授来本公司</a>
				<p>中科院院士王教授来本公司访问调研研中科院院士王教授来本公司访问调研</p>
			</li><hr>
			<li>
				<span><strong>22</strong><br>2010-01</span>
				<a href="">本公司通过国家科技部高新</a>
				<p>本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术企业认证本公司通过国家科技部高新技术</p>
			</li><hr>
			<li>
				<span><strong>06</strong><br>2010-01</span>
				<a href="">某某公司新版网站全新改版</a>
				<p>某某公司新版网站全新改版成功某某公司新版网站全新改版成功某某公司新版网站全新改版成功</p>
			</li><hr>
		</ul>
	</div>
	
</div>

<!-- 通用底部 -->
<div id="foort">
	<div class="lianjie">
		<p>友情链接：
		<a href="">支付宝</a>
		<a href="">阿里云</a>
		<a href="">京东商城</a>
		<a href="">淘宝网</a>
		<a href="">天猫商城</a>
		<a href="">百度搜索</a>
		<a href="">腾旭QQ</a>
		<a href="">PHP中文网</a>
		</p>
	</div>
	<div class="beian">
	<p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
	<p>地址：广东省广州市天河区某某沙某某路沙某某路某某号  电话：020-22043297 传真：020-22043297</p>
	</div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果预览图：

CSS样式：

首页专用CSS样式：

实例

/*首页专用样式*/

.lunbo{
	
}
.lunbo img{
	width: 100%;
	height: 452px;
	vertical-align: top;
}
.lunbo .yin{
	width: 100%;
	height: 30px;
	background-color: #2f2f4f;
	margin-top: -30px;
	opacity: 0.3;
}

.cp{
	overflow: hidden;
	width: 1140px;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 30px;
	text-align: center;	
}

.cp h2{
	font-size: 30px;
	background-image: url(../images/title.jpg);
	background-repeat: no-repeat;
}
.cp h2 img{
	padding: 5px;
}
.cp .cp_list ul{
	text-align: center;
}
.cp .cp_list ul li {
	width: 262px;
	height: 197px;
	float: left;
	padding: 20px 10px;
}

.cp .cp_list ul li img{
	width: 262px;
	height: 197px;
	border: 0;
	padding: 0;
}
.cp .cp_list ul li img:hover{
	opacity: 0.8;
}

.gg{
	overflow: hidden;
	width: 100%;
	height: 412px;
	background-image: url(../images/ads.jpg);
	background-repeat: no-repeat;
	margin-bottom: 50px;
}

.wenhua{
	width: 1140px;
	margin: auto;
	margin-bottom: 50px;
}
.wenhua img{
	width: 286px;
	height: 177px;
	float: left;
	margin-right: 50px;
}
.wenhua .imr_right p{
	line-height: 30px;
	font-size: 16px;
}
.wenhua .imr_right button{
	margin-top: 10px;
	padding: 10px 30px;
	border: none;
	background-color: #000;
	color: #fff;
}
.wenhua .imr_right button:hover{
	background-color: coral;
	/*当鼠标移动当前按钮任何位置显示鼠标手*/
	cursor: pointer;
}

.news{
	width: 1140px;
	margin: auto;
	margin-bottom: 50px;
	overflow: hidden;
}
.new_left img{
	width: 550px;
	height: 315px;
	float: left;
	margin-right: 30px;
}
.new_right{
	width: 560px;
	float: left;
}
.new_right ul {
	overflow: hidden;
}
.new_right ul li {
	width: 100%;
	height: 60px;
	padding: 10px;
}
.new_right ul li span{
	float: left;
	width: 60px;
	height: 58px;
	background-color: #000;
	color: #fff;
	text-align: center;
	margin-right: 50px;
	padding: 2px;
}
.new_right ul li p{
	 padding: 5px;
}
.new_right ul li span strong{
	font-size: 30px;
}
.new_right ul li a{
	font-size: 18px;
	line-height: 30px;
}
.new_right ul li a:hover{
	color: #ff8c00;
}






#foort{
	overflow: hidden;
	height: 150px;
	background-color: #000;
}
#foort .lianjie{
	width: 100%;
	background-color: #483d8b;
}
#foort .lianjie p{
	width: 1140px;
	height: 50px;
	margin: auto;
	text-align: center;
	color: #fff;
}
#foort .lianjie p a{ 
	padding:0 20px; 
	color: #fff;
	line-height: 50px;
}
.beian{
	width: 1140px;
	height: 100%;
	margin: auto;
}
.beian p{
	color: #fff;
	line-height: 30px;
	text-align: center;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS重置样式：

实例

/*样式重置*/
body,ul,li,p,h1,h2,h3,h4,h5,h6,a,img{
	margin:0;
	padding: 0;
	font-size: 14px;
	list-style: none;
	text-decoration: none;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS公共样式：

实例

/*公共样式*/

#headr{
	width: 100%;
	
}
.top{
	width: 1140px;
	margin:5px auto;
	overflow: hidden;
}
.left{
	float: left;
}
.right{
	float: right;
	font-size: 16px;
}

.logo{
	margin: 10px auto;
	width: 1140px;
	height: 58px;
}
.logo img{
	font: left;
	width: 440px;
	height: 58px;
}

.sousuo{
	width: 600px;
	height: 58px;
	float: right;
	line-height: 58px;
	overflow: hidden;

}
.sousuo input{
	width: 280px;
	height: 36px;
	float: right;
		/*padding: 10px 0;*/
	border: solid 3px #ffa07a;
	margin-top: 10px;
}
.sousuo button{
	float: right;
	padding: 10px;
	margin-left: -4px;
	border: solid 3px #ffa07a;
	background-color: #ffa07a;
	margin-top: 10px; 
}

/*网站导航*/
.daohang{
	width: 100%;
	height: 50px;
	background-color: #000;
	overflow: hidden;
}
.daohang .dh1140{
	width: 1140px;
	margin: auto;
}
.daohang .dh1140 ul li{

	line-height: 50px;
}
.daohang .dh1140 ul li a{
	width: 130px;
	color: #fff;
	font-size: 16px;
	float: left;
	text-decoration: none;
	text-align: center;
}
.daohang .dh1140 ul li a:hover{
	background-color: coral;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

虽然只完成了首页，但也学到了不少的知识，熟能生巧，坚持多敲代码，多做些案例，相信完成一个网站的速度也是很快的。

实例

实例

实例

实例

相关文章