仿站首页——2018年3月30日14：59 - 每日作业

Home > List of blog posts > 仿站首页——2018年3月30日14：59

Blogger Information

Blog 33

fans 0

comment 0

visits 24513

Special Recommendation

More>

Related recommendations

实例

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

运行实例 »

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

效果图如下：

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

Correction status：qualified

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

3月15日作业

2018-03-16 17:03:32