search

博客列表 >仿站首页——2018年3月30日14：59

仿站首页——2018年3月30日14：59

张鑫的博客
张鑫的博客原创
2018年03月30日 15:11:39608浏览

网站首页分为html代码和css代码（index.css，common.css，reset.css）

下面是html代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</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>
	<!--1.公共头部的div -->
	<div class="header">
		<!-- （01）最上面的条子 -->
		<div class="top">
			<div class="info">
			<p class="left">欢迎访问某某安防消防工程有限公司~</p>
			<p class="right">咨询电话：020-22043297</p>
			</div>
		</div>

		<!-- (02)中间部分的广告 -->
		<div class="info">
			<div class="left"><img src="images/logo.png" alt=""></div>
		

		<div class="input">
			<input type="text" name="text" placeholder="请输入关键字">
			<button>搜索</button>
		</div>
	    </div>

	    <!-- （03）导航栏目设置 -->
	    <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>

	<!-- 2.banner部分的div设置 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="图片">
		<div class="bottom"></div>
	</div>

	<!-- 3.产品中心的div -->
	<div class="product">
		
		<div class="top">
			<h1>产品<img src="images/proicon.png" alt="">中心</h1>
			<p>局域网远程、外网远程、手机远程、让监控 无处不在</p>
		</div>


		<ul>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg" alt=""></a>
				<a href="">产品应用案例</a>
			</li>
			
		</ul>
	</div>

	<!-- 4.广告部分的div -->
	<div class="ad"></div>

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

		<div>
			<ul>
				<li>
					<span><h1>25</h1><p>2018-03</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
				</li>

				<li>
					<span><h1>25</h1><p>2018-03</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
				</li>

				<li>
					<span><h1>25</h1><p>2018-03</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
				</li>

				<li>
					<span><h1>25</h1><p>2018-03</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
				</li>
				
			</ul>
		</div>

	</div>

	<!-- 7.公共底部的div -->
	<div class="footer">

		<div class="top">

			<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 class="bottom">
			<div class="info">
			<p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
			<p>地址：广东省广州市天河区某某沙某某路沙某某路某某号  电话：020-22043297 传真：020-22043297</p>
			</div>
		</div>
	</div>
</body>
</html>

运行实例 »

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

index.css代码：

实例

.banner img{
	width: 100%;
	height: 452px;
	vertical-align:top;
}

.banner .bottom{
	height: 40px;
	margin-top:-40px;
	background-color:#696969;
	opacity: 0.8;
}

.product .top{
	width: 1140px;
	text-align: center;
	background-image: url(../images/title_bg.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin: auto;

}

.product .top img{
	padding:0 4px;

}

.product ul{
	width: 1140px;
	margin: auto;
	overflow:hidden;

}

.product ul li{
	width: 260px;
	height: 282px;
	float: left;
	text-align:center;
	margin: 10px;
}

.product ul li img{
	width: 262px;
	height: 196px;
	margin-bottom: 10px;
}

.product ul li img:hover{
	opacity: 0.8;
}

.ad{
	background-image: url(../images/ads.jpg);
	width: 100%;
	height: 412px;
}

.do{
	width: 1040px;
	margin: 30px auto;
}

.do img{
	width: 286px;
	height: 177px;
	float: left;
    margin-right: 50px;
}

.do p{
	line-height: 2em;
	margin-bottom: 20px;
}
.do button{
	width: 100px;
	height: 40px;
	background-color: gray;
	color: white;
	font-size: 1.4m;
}
.do button:hover{
		background-color: orange;
		cursor:pointer;
}

.news{
	width: 1140px;
	margin:20px auto;
	/*overflow:hidden;*/
}

.news img{
	width: 500px;
	height: 315px;
	float: left;
	margin-right: 30px;
}


.news ul li{
	overflow:hidden;
	padding:20px 0;
	border-bottom:1px dotted #333;
}

.news span{
	float: left;
	width: 70px;
	height: 60px;
	background-color: gray;
	text-align: center;
	margin-right: 30px;
}
.news span *{
	color: white;
}

.news a{
	color: black;
	font-size: 1.4em;
}

.news a:hover{
	 color: orange;
}

运行实例 »

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

common.css代码：

实例

.header{
	width: 100%;
	height: 170px;
}

.header .top{
	height: 28px;
	background-color: lightgray;
	border-top:1px solid gray; 
	border-bottom:1px solid gray; 
	margin-bottom: 20px;
}
.info{
	width: 1140px;
	margin:auto;
	overflow:hidden;
	text-align: center;
}

.header .left{
	float: left;
	line-height: 28px;
}

.header .right{
	float: right;
	line-height: 28px;
}


.header .info img{
	width: 440px;
	height: 58px;
	float: left;
}

.header .info .input{
	float: right;
	height: 58px;
	line-height: 58px;
}

.header .info .input input{
	height:20px;
	border: 2px solid orange;
}

.header .info .input button{
	background-color: orange;
	color: white;
	border: none;
	height: 26px;
	margin-left: -40px;

}

.header .info .input button:hover{
	cursor:pointer;
}

.header .menu{
	height: 50px;
	background-color: black;
	margin-top: 20px;
}

.header .menu ul li{
	float: left;
	padding: 0 50px;
	line-height: 50px;
}

.header .menu ul li a{
	color: white;
}

.header .menu ul li:hover{
	cursor:pointer;
	background-color: orange;
}

.footer .top{
	width: 100%;
	height: 50px;
	background-color: #3E3E3E;
}

/*.footer .top ul{
	margin: auto;
}
*/
.footer .top li{
	float: left;
}

.footer .top li a{
	color: white;
	padding: 0 30px;
	line-height: 50px;

	
}



.footer .bottom{
	width: 100%;
	height: 80px;
	background-color: #1F1F1F;
}

.footer .bottom p{
	color: white;
	line-height: 2.5em;

}

运行实例 »

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

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;
}

运行实例 »

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

效果图如下：

01.png02.png03.png04.png

总结：写起来不是特别熟练，还需要多多联系。

上一条：329-JS入门案例下一条：3月29作业代码提交
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多