威尔森

切版网专注网页切版服务


演示地址:

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

html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<title>3 二级页面-量化决策 </title>
<link rel="stylesheet" href="css/jquery.fullPage.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]-->
</head>
<body>
<div class="header header-jc ">
	<div class="wrapper">
		<div class="logo">
			<a href="#"><img src="imgs/img23.png"/></a>
		</div>
		<div class="lang">
			<a href="#">English</a>
		</div>	
		<div class="sear">
			<div class="ico">搜索</div>
			<div class="form">
				<form action="" method="post">
					<input TYPE="text" class="text" name="" ID="" value="" />
					<input TYPE="submit" class="submit" value=""/>
				</form>
			</div>
		</div>
		<div class="nav">
			<ul>
				<li><a href="#">关于威尔森</a></li>
				<li><a href="#">建模咨询</a></li>
				<li><a href="#">市场监测分析</a></li>
				<li><a href="#">智能数据库</a></li>
			</ul>
		</div>
		<div class="gh"><a href="#"></a></div>
	</div>
</div>
<div ID="layout">

 

css代码:

.header{
	clear: both;  height: 107px; background: rgba(255,255,255,0.95); position: fixed; left: 0; right: 0; top: 0; z-index: 9; box-shadow: 0px 5px 80px rgba(0, 0, 0, 0.2); background: #fff; 
 
}
.header .wrapper{
	position: relative;
}
.header,
.header .logo,
.header .nav,
.header .lang,
.header .sear
{
	transition: all 1s;
	-webkit-transition: all 1s;
	-ms-transition: all 1s;
}
.header.small{
	height: 60px; 
}
 
.header .logo{
	float: left; display: inline; margin-top: 39px; width: 161px; height: 48px; margin-bottom: 20px;
}
 
.header.small .logo{
	margin-top: 3px;
}
.header .nav{
	float: right; display: inline; margin-top: 64px; text-align: right;
}
.header.small .nav{
	margin-top: 20px;
}
.header .nav li{
	font-size: 18px; display: inline-block; margin-right: 40px;
}
.header .nav li a{
	color: #313234;
}
.header .nav li.small a,.header .nav li a:hover{
	color: #0c4f8a;
}
.header.small .sear,
.header.small .lang{
	margin-top: 24px;
}
.header .sear{
	float: right; display: inline;margin-top: 70px; position: relative;width: 47px; height: 35px; text-align: center;
}
 
.header .sear .ico{
	font-size: 13px; color: #7e7e7e; border: 1px solid transparent;  padding-top: 5px; position: relative; top: -5px;
}
 
.header .on{width: 47px; border: 1px solid #C5C5C5 !important; height: 35px; border-bottom: none; text-align: center;}
 
.header .sear .form{position: absolute; right: -2px; top: 30px; z-index: 999; border: 1px solid #C5C5C5; width: 195px; background: #fff; border-top: none;}
 
.header .sear .form .text{width: 47px; height: 35px; padding-left: 5px; float: left;  border: none; border-top: 1px solid #C5C5C5;}
 
.header .sear.curr .form .text{width: 143px;}
 
.header .sear .form .submit{float: left; background: url(../imgs/img41.jpg) #fff no-repeat center; border: none; width: 47px; height: 35px; cursor: pointer;}
 
.header .sear .form{
	display: none;
}
 
.header .curr .form{display: block;}
 
.header .lang{
	float: right; display: inline; margin-top: 70px; width: 60px; text-align: right;
}
.hslide{
	clear: both; position: relative; overflow: hidden;
}
.hslide li{
	position: relative;
}
.hslide li img{
	display: block;
}
.hslide li h2{
	font-size: 60px;color: #000; position: absolute; top: 50%; text-align: center; left: 0; right: 0; 
}
免费索取报价