海格润德

切版网专注网页切版服务


演示地址:

http://www.qieban.cn/html/haige

html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>缘起</title>
<link rel="stylesheet" href="css/glide.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<!--[IF lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<script TYPE="text/javascript" src="js/jquery-1.7.2.js"></script>
<!--<script TYPE="text/javascript" src="js/jquery.nicescroll.min.js"></script>-->
<script TYPE="text/javascript" src="js/jquery.mousewheel.js"></script>
<script TYPE="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script TYPE="text/javascript" src="js/jquery.placeholder.js"></script>
<script TYPE="text/javascript" src="js/jquery.glide.js"></script>
<script TYPE='text/javascript' src='js/imagesloaded.pkgd.min.js'></script>
<script TYPE='text/javascript' src='js/jquery-waypoints-2.0.3.js'></script>
<script TYPE="text/javascript" src="js/p.js"></script>
<script TYPE="text/javascript" src="js/addons.js"></script>
</head>
 
<body>
<div class="layout">
<div class="header">
	<div class="wrapper">
		<div class="logo">
			<a href="#"><img src="imgs/logo.png"/></a>
		</div>
		<div class="tel">
			<h2>400-6116-106 </h2>
		</div>
		<div class="nav">
			<ul>
				<li class="selected"><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="yq-page1">
	<div class="img">
		<img src="imgs/img30.png"/>
	</div>
	<div class="nav">
		<ul>
			<li>
				<a href="#">
					<div class="ico">
						<img src="imgs/img31.png"/>
					</div>
					<h2>创意 </h2>
				</a>
			</li>
			<li>
				<a href="#">
					<div class="ico">
						<img src="imgs/img32.png"/>
					</div>
					<h2>服务 </h2>
				</a>
			</li>
			<li>
				<a href="#">
					<div class="ico">
						<img src="imgs/img33.png"/>
					</div>
					<h2>品质 </h2>
				</a>
			</li>
		</ul>
	</div>
</div>

 

css代码:

body{
	font-size: 12px; line-height: 1.8;
	transition: all 0.3s ease-in-out 0s; padding-top: 0;
	background: #000; padding-top: 80px;
}
.layout{
	-moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	background: #fff;
}
.layout.on{
	-webkit-transform:scale(.7,.7);
	-moz-transform:scale(.7,.7);
	transform:scale(.7,.7);
}
.header{
	height: 80px;  height: auto; overflow: hidden; z-index: 99; background: #fff; position: relative;
	transition: all 0.3s ease-in-out 0s;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
 
	position: fixed; left: 0; right: 0; top: 0;
 
}
.header-fixed{
 
}
.header-shadow{
	/*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
}
.header-hide{
	/*background: #fff;*/ top: -120px;
}
.header .logo{
	float: left; display: inline; margin-top: 10px; position: relative; z-index: 9;
}
.header .right{
 
}
.header .nav-wrap{
	position: absolute; left: 0; right: 0; top: -80px; background: #fff; padding:0 40px; height: 80px; opacity:0;
}
.header .ico-nav{
	background: url(../imgs/img14.png) no-repeat center; width: 80px; height: 80px; display: block;
}
.header .nav{
	float: right; display: inline; line-height: 80px;
}
.header .nav li{
	display: inline; font-size: 16px; margin-left: 40px;
}
.header .nav li a{
	transition: all 0.3s ease-in-out 0s;
}
.header .nav li.selected a,
.header .nav li a:hover{
	color: #e53e42; text-decoration: none;
}
.header .tel{
	margin-left: 70px; float: right; display: inline; line-height: 80px;
}
.header .tel h2{
	font-size: 24px; color: #f44a4f; font-weight: bold; background: url(../imgs/img1.png) no-repeat left center; padding-left: 50px; font-style:italic;
}
.header .wrapper{
	width: auto; padding: 0 40px;
}
.wrapper{
	width: 1840px; margin: 0 auto;
}
免费索取报价