简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 3.28仿制页面首页
Blogger Information
Blog 30
fans 0
comment 0
visits 18006
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3.28仿制页面首页
宋的博客
Original
918 people have browsed it


QQ图片20180330002156.png

完成图如上：

首页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="toubu">
		<div class="info">
			<div class="left"><img src="images/logo.png" alt=""></div>
			<div class="caidan">
				<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>
				</ul>
			</div>
		</div>
	</div>

	<!-- 首页导航图 -->
	<div class="daohang">
		<img src="images/shouye.jpg" alt="">
		<div class="toumingtiao"></div>
	</div>

	<!-- 最新动态 -->
	<div class="dongtai">
		<div class="biaoti">新车专区</div>
		<ul>
			<li><a href=""><img src="images/t50.jpg" alt=""></a><a href="">金杯T50/T52领衔主演，小卡车市场迎来“春天”</a></li>
			<li><a href=""><img src="images/552.png" alt=""></a><a href="">金杯T50T52鑫动上市，创富2017！</a></li>
			<li><a href=""><img src="images/t51.jpg" alt=""></a><a href="">强动力 低油耗 解密新海狮全新动力系统</a></li>
			<li><a href=""><img src="images/t54.jpg" alt=""></a><a href="">华晨鑫源金杯新海狮  与众不同的产品</a></li>
		</ul>
		
	</div>

	<!-- 新闻 -->
	<div class="xinwen">
		<div class="zuo">
			<img src="images/news.jpg" alt=""><p>春天礼，惠给力|创富正当时，壕礼更放肆！</p>
		</div>
		<div class="you">
			<ul>
				<li><img src="images/zhaopin.png" alt=""><a href="">招聘 | 嘿，朋友！你长得像我下一位同事</a><p>人生要做出很多选择而选择一份靠谱的工作会让你的人生变得更加靠谱！</p></li>
				<li><img src="images/zhaopin.png" alt=""><a href="">招聘 | 嘿，朋友！你长得像我下一位同事</a><p>人生要做出很多选择而选择一份靠谱的工作会让你的人生变得更加靠谱！</p></li>
				<li><img src="images/zhaopin.png" alt=""><a href="">招聘 | 嘿，朋友！你长得像我下一位同事</a><p>人生要做出很多选择而选择一份靠谱的工作会让你的人生变得更加靠谱！</p></li>
			
			</ul>
		</div>
	</div>


	<!-- 底部 -->
	<div class="dibu">
		
		<div class="lianjie">
			<ul>
				<li><a href=""><p>友情链接:</p></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>
			</ul>
		</div>
		<div class="dh">
			<p>联系电话：0571-888666</p>
		</div>

	</div>
</body>
</html>

运行实例 »

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

CSS 文件

common 文件

实例

/*公共样式头部*/
/*头部*/
.toubu{
	width: 100%;
	height: 86px;

}

.info{
	width: 920px;
	margin: auto;

}

.toubu .info img{
	width: 265px;
	height: 47px;
	float:left;

}
.toubu .info .caidan{
	height: 86px;
	color: black;
}

.toubu .info .caidan ul li{
	float:left;
	text-align: center;
	line-height: 86px;
	padding: 0 30px;
	
}
.toubu .info .caidan ul li a{
	font-size:1.2em;
}

.toubu .info .caidan ul li:hover{
	background-color: skyblue;
}

/*公告 底部*/
.dibu .lianjie{
	width: 100%;
	height: 40px;
	background-color: lightgray;
	margin: auto;
}

.dibu .lianjie ul{
	width: 1200px;
	margin: auto;
}

.dibu .lianjie li *{	
	float: left;

}


.dibu .lianjie li a{
	height: 100%;
	padding: 0 20px;
	color: white;
	text-align: left;
	line-height: 40px;
}


.dibu .lianjie li a p{
	color: white;
}

.dibu  .dh{
	width: 100%;
	height: 40px;
	background-color: black;
	text-align: center;
	
}

.dibu .dh p{
	color: white;

	line-height: 40px;
}

运行实例 »

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

inxdex.css  文件

实例

/*首页样式*/*/
.daohang{
	
}

.daohang img{
	width: 100%;
	height:300px;
	vertical-align: top;
}

.daohang .toumingtiao{
	height: 30px;
	background-color: gray;
	opacity: 0.5;
	margin-top:-30px;
}
.dongtai{
	width: 1200px;
	margin: auto;
	overflow: hidden;
}

.dongtai .biaoti{
	text-align: center;
	font-size:1.5em;
	padding: 10px;
}

.dongtai li{
	width: 300px;
	height:200px;
	text-align: center;
	float: left;
}
.dongtai img{
	width: 290px;
	height:170px;
}

.xinwen{
	width: 1200px;
	margin: auto;
	background-color: lightgray
	overflow: hidden;
}

.xinwen .zuo{
	width: 300px;
	height: 330px;
	float: left;
}

.xinwe .zuo img{
	height: 40px;
	width:180px;

}
.xinwen .zuo p{
	width: 180px;
	font-size: 1.4em;
	padding: 3px;
	margin-top: 10px;
}


.xinwen .you {
	/*height: 400px;*/
overflow: hidden;
}

.xinwen .you ul{
margin-left: 50px;
}

.xinwen .you ul li{
	height:70px;

}

.xinwen .you ul li img{
	width: 40px;
	height: 40px;
	padding:5px;
	margin:auto;
	float: left;
}


.xinwen .you ul li p{
	font-size: 0.7em;
	margin-top: 5px;
}

运行实例 »

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

重置样式文件 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;
}

运行实例 »

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



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!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！