添加微信好友
演示地址：
http://www.qieban.cn/html/haige
html代码：
[codesyntax lang=”div”]
<!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>
[/codesyntax]
css代码：
[codesyntax lang=”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;
}
[/codesyntax]
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
