前端公司网站实战案例----2018年03月29日 14点52分 - html+css

Home > List of blog posts > 前端公司网站实战案例----2018年03月29日 14点52分

Blogger Information

Blog 49

fans 0

comment 1

visits 46591

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<title>网站首页</title>
</head>
<body>
	<!--
    	作者：1083396620@qq.com
    	时间：2018-03-28
    	描述：
    	DOM结构
    -->
    
    <!--头部-->
    <div class="header">
    	<div class="head">
    		
    	
	    	<div class="top">
	    		<p>欢迎访问某某安防消防工程有限公司~</p>
	    		<p>咨询电话：020-22043297</p>
	    	</div>
    	</div>
    	<div class="middle">
    		<img src="images/logo.png"/ alt="logo">
    		
	    		<input type="button" id="searchbox" value="搜索" />
	    		<input type="text" id="searchbox" value="" placeholder="输入关键字" />
    		
    	</div>
    	<!--导航-->
    	<div class="bottom">
    		<div class="nav">
    			<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>
    				<li><a href="">应用案例</a></li>
    			</ul>
    		</div>
    	</div>
    	<!--banner图片-->
    	<div class="banner">
    		
    	</div>
    	<div class="bottom-tip">
    		
    	</div>
    </div>
    <!--产品列表-->
    <div class="product">
    	<div class="top">
    		<h1>产品<img src="images/proicon.png" alt="icon" />中心</h1>
    		<p>局域网远程、外网远程、手机远程、让监控 无处不在</p>
    	</div>
    	<div class="product-list">
    		<ul>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li><br>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li>
    			<li>
    				<a href=""></a>
    				<img src="images/product.jpg" alt="产品信息" /><br />
    				<a href="">产品应用案例</a>
    			</li>
    		</ul>
    	</div>
    </div>
    <div class="bg"></div>
    <!--我们能做什么-->
    <div class="make">
    	<div class="left">
    		<img src="images/make.png"/>
    	</div>
    	<div class="right">
    		
    		<p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p>
    		<a href="" class="more">了解更多</a>
    	</div>
    	
    </div><hr color="#8C8C8C" size="1"style="opacity: 0.3;"/>
    <!--新闻列表-->
    <div class="news">
    	<div class="img">
    		<img src="images/news.jpg"/>
    	</div>
    	
    	<div class="list-news">
    		<ul>
    			<li>
    				<span><h1>25</h1>
    				<p>2010-01</p></span>
    				<a href="">本公司参加第八十届广州商</a>
    				<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
    			</li>
    			<li>
    				<span><h1>25</h1>
    				<p>2010-01</p></span>
    				<a href="">本公司参加第八十届广州商</a>
    				<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
    			</li>
    			<li>
    				<span><h1>25</h1>
    				<p>2010-01</p></span>
    				<a href="">本公司参加第八十届广州商</a>
    				<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
    			</li>
    			<li>
    				<span><h1>25</h1>
    				<p>2010-01</p></span>
    				<a href="">本公司参加第八十届广州商</a>
    				<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
    			</li>
    			
    		</ul>
    	</div>
    	
    	
    </div>
    
    <!--底部-->
    <div class="footer">
    	<div class="link">
    		<ul>
    			<li><a href="">友情链接：</a></li>
    			<li><a href="">腾讯qq</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>
    			<li><a href="">PHP中文网</a></li>
    		</ul>
    	</div>
    	<div class="info">
    		<p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
    		<p>地址：广东省广州市天河区某某沙某某路沙某某路某某号  电话：020-22043297 传真：020-22043297</p>
    	</div>
    </div>
    
    
    
</body>
</html>

运行实例 »

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

实例

/*公共样式表
 */
/*头部公共样式*/
.header{
	width: 100%;
	height: 637px;

	
}
.header .head{
	background: #ECECEC;
	width: 100%;
}
.header .top{
	margin: 0 auto;
	width: 1140px;
	height: 25px;
	
	

	
}
.header .top p:first-child{
	
	float: left;
	font-size: 12px;
	margin-top:9px;
	margin-left: 50px;
	
}
.header .top p:last-child{
	font-size: 16px;
	float: right;
	margin-top:4px;
	margin-right: 40px;

}
.header .middle{
	width: 1140px;
	height: 92px;
	margin: 0 auto;
	overflow: hidden;
}
.header .middle img{
	float: left;
	width: 440px;
	height: 58px;
	margin-left: 40px;	
	margin-top: 16px;
	
}
.header .middle input{
	float: right;
	

	
}

.header .middle input:nth-child(3){
	margin: 40px;
	border:3px coral solid;
	width: 200px;
	height: 30px;
}
.header .middle input:nth-child(2){
	cursor: pointer;
	margin-top: 40px;
	margin-left:-40px ;
	width: 50px;
	height: 36px;
	border: none;
	border: 2px coral solid;
	background-color: coral;
}
/*头部导航*/
.bottom{
	width: 100%;
	height: 50px;
	background-color: black;
}



.nav{
	margin:0 auto;
	width: 1140px;
	height: 100%;
	overflow: hidden;
	
	
}
.nav ul{
	
	
	
}
.nav ul li{
	height: 100%;

	padding: 15px 30px;
	float: left;
	
}
.nav ul li a{
	color: white;
	font-size: 16px;	
}
.nav ul li:hover{
	background: coral;
	cursor: pointer;	
	
}
/*底部样式*/
.footer{
	width: 100%;
	height: 140px;
	background: #000000;
}
.footer .link{
	width: 100%;
	background: #4C4C4C;
	height: 40px;
}
 .footer .link ul{
	width: 1140px;
	margin: 0 auto;
}
 .footer .link ul li{
 	float: left;
 	margin: 10px 30px;
 }
 .footer .link ul li a{
 	text-align: center;
 	color: white;
 }
 .footer .info{
 	width: 1140px;
 	margin: 0 auto;
 	text-align: center;
 	
 	
 }
.footer .info p{
	padding-top:10px ;
	color: white;
	line-height:30px;
}

运行实例 »

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

实例

/*网站入口文件样式*/
/*banner图片*/
.header .banner{
	width: 100%;
	height: 452px;
	background-image: url(../images/banner.jpg);	
	background-repeat:no-repeat ;
	
}
.header .bottom-tip{
	height: 25px;
	width: 100%;
	background: #9C9C9C;
	opacity: 0.5;
	margin-top:-25px ;
}
/*产品中心*/
.product{
	width: 100%;
	
	
}
.product .top{
	width: 1140px;
	height: 60px;
	margin: 0 auto;
}

.product .top p{
	
	text-align: center;
	line-height: 60px;
	
	}
.product .top h1{
	text-align: center;
	background-image: url(../images/title_bg.jpg);
	background-repeat: no-repeat;
	padding-left: 25px;
}
.product .top img{
	padding-bottom: 5px;
	
}
/*产品列表*/
.product-list {
	width: 100%;
	height: 550px;

}
.product-list ul{
	width: 1140px;
	margin: 0 auto;
	
}
.product-list ul li{
	float: left;
	margin: 40px 10px 0;
	
}
.product-list ul li:hover{
	opacity: 0.8;
	
	
}
.product-list ul li img{
	max-height: 210px;
	max-width: 262px;
}
.product-list ul li a{

	
}
.product-list ul li a:hover{
	color: coral;
	
}
.product-list ul li a:last-child{
	text-align: center;
	margin-left: 88px;
	
}
/*产品背景*/
.bg{
	width: 100%;
	height: 452px;
	background: url(../images/ads.jpg);
	background-repeat: no-repeat;
	
}
/*我们是做什么的*/
.make{
	width: 1140px;
	height: 276px;
	margin: 0 auto;
	
}
.make .left{
	float: left;
	margin-right: 30px;
	overflow: hidden;
}
.make .right p{
	margin-top: 10px;
	letter-spacing: 5px;
	line-height: 1.6em;
}

.make a{
background-color: #4C4C4C;
display: block;
width: 135px;
text-align: center;
height: 32px;
margin-top: 20px;
margin-left:357px ;
color: white;
line-height: 32px;
}
.make a:hover{
	background-color: coral;
}
/*新闻列表*/
.news{
	width: 1140px;
	height: 480px;
	margin: 0 auto;
}
.news .img img{
	float: left;
	margin: 30px;
	margin-top: 80px;
}

.news .list-news{

	float: right;    margin-top: 57px;
	
}

.news .list-news ul li{
	display: block;
	overflow: hidden;
	border-bottom-color: #cccccc;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
	 margin-top: 10px;
	
}
.news .list-news span{

	float: left;
	display: block;
	background: #0C0C0C;
	height: 60px;
	width: 60px;
	margin-right: 40px;
	
}
.news .list-news span p,h1{
	color: white;
	text-align: center;
	
}
.news .list-news a+p{
	font-size: 12px;
	padding: 0 90px 35px;
}

.news .list-news a:hover{
	color: coral;
}

运行实例 »

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

实例

/*样式重置表
 */

*{
	margin: 0;padding: 0;
	font-family: "微软雅黑" "arial, helvetica, sans-serif";
}
p,a{
	text-decoration: none;
	font-size: 14px;
	color: #5C5C5C;
	
}
ul,li{
	list-style: none;
}

运行实例 »

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

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

php数据库基本操作

2018-03-10 14:40:33