添加微信好友
访问网址：
http://www.qieban.cn/html/hejun/
html代码：
[codesyntax lang=”html4strict”]
<div class="section page2"> <!--<div class="gb-arrow"> 上下滑动切换 </div>--> <div class="wrapper"> <ul> <li class="l1"> <div class="bg"> </div> <div class="wrap"> <div class="ico"> </div> <h2>集团官网、站群设计开发</h2> <dl> <dd><img src="imgs/img9.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img10.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img11.png"/></dd> </dl> <p class="desc">集团官网专属的高端定制化服务<br/> 解决方案，全面满足建设核心与运行管理<br/> 并提升集团品牌的有效传播。</p> </div> <div class="img"> <img src="imgs/img2-1.jpg"/> </div> </li> <li class="l2"> <div class="bg"> </div> <div class="wrap"> <div class="ico"> </div> <h2>高端企业网站设计定制</h2> <dl> <dd><img src="imgs/img12.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img13.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img14.png"/></dd> </dl> <p class="desc">和君设计凭借多年的行业经验与专业团队<br/> 让各知名企业机构官网脱颖而出<br/> 从满足预期到走向卓越。</p> </div> <div class="img"> <img src="imgs/img2-2.jpg"/> </div> </li> <li class="l3"> <div class="bg"> </div> <div class="wrap"> <div class="ico"> </div> <h2>HTML5响应式网站开发</h2> <dl> <dd><img src="imgs/img15.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img16.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img17.png"/></dd> </dl> <p class="desc">HTML5+CSS3设计制作同时兼容<br/> 手机、IPAD等触屏设备分辨率，达到最优<br/> 访问效果，网站数据同步各终端。</p> </div> <div class="img"> <img src="imgs/img2-3.jpg"/> </div> </li> <li class="l4"> <div class="bg"> </div> <div class="wrap"> <div class="ico"> </div> <h2>移动端手机网站与APP</h2> <dl> <dd><img src="imgs/img18.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img19.png"/></dd> <dd><span></span></dd> <dd><img src="imgs/img20.png"/></dd> </dl> <p class="desc">专注移动端手机网站设计、微网站开发、APP定制开发，创造有活力的品牌网站，提升<br/> 用户体验和品牌价值感。</p> </div> <div class="img"> <img src="imgs/img2-4.jpg"/> </div> </li> </ul> </div> </div>
[/codesyntax]
css代码：
[codesyntax lang=”css”]
.page2{
background: url(../imgs/bg2.jpg) no-repeat center; background-size: cover !important; height: 964px;
}
.page2 .wrapper{
height: 100%;
}
.page2 ul{
height: 100%;
}
.page2 li{
width: 25%; float: left; display: inline; text-align: center; color: #fff; height: 100%; position: relative;
/*css3*/
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
}
.page2 li .bg{
position: absolute; left: 0; right: 0; bottom: 0; background: #9a02e0; height: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.page2 li.selected .bg{
height: 100%;
}
.page2 li.l2 .bg{
background-color: #acd146;
}
.page2 li.l3 .bg{
background-color: #04afa6;
}
.page2 li.l4 .bg{
background-color: #f8c200;
}
.page2 li .wrap{
position: absolute; left: 30px; right: 30px; top: 50%; margin-top: -110px;
}
.page2 li .ico{
width: 109px; height: 109px; border-radius: 109px; margin: 0 auto; background-position: center top; background-repeat: no-repeat; overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transition-delay:400ms;
transition-delay:400ms;
}
.page2 li.l1 .ico{
background-image: url(../imgs/img5.png);
}
.page2 li.l2 .ico{
background-image: url(../imgs/img6.png);
}
.page2 li.l3 .ico{
background-image: url(../imgs/img7.png);
}
.page2 li.l4 .ico{
background-image: url(../imgs/img8.png);
}
.page2 li.selected .ico{
background-position: center bottom;
}
.page2 li .link{
text-align: center; margin-top: 35px;
}
.page2 li .link a{
background: url(../imgs/img41.png) no-repeat; width: 48px; height: 48px; display: inline-block;
}
.page2 li .img{
position: absolute; left: 0; right: 0; bottom: -200px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transition-delay:400ms;
transition-delay:400ms;
opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
}
.page2 li.selected .img{
bottom: 0;
opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
}
.page2 li .img img{
display: block; width: 100%;
}
.page2 li a{
color: #fff; text-decoration: none;
}
.page2 li.selected{
}
.page2 li.l1{
-webkit-transform:translate3d(-600px, 0, 0);
-ms-transform:translate3d(-600px, 0, 0);
transform:translate3d(-600px, 0, 0);
}
.page2 li.l2{
-webkit-transform:translate3d(-300px, 0, 0);
-ms-transform:translate3d(-300px, 0, 0);
transform:translate3d(-300px, 0, 0);
}
.page2 li.l3{
-webkit-transform:translate3d(300px, 0, 0);
-ms-transform:translate3d(300px, 0, 0);
transform:translate3d(300px, 0, 0);
}
.page2 li.l4{
-webkit-transform:translate3d(600px, 0, 0);
-ms-transform:translate3d(600px, 0, 0);
transform:translate3d(600px, 0, 0);
}
.page2.active li{
-webkit-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
opacity: 1;
-webkit-opacity: 1;
-moz-opacity: 1;
}
.page2 li h2{
margin-top: 20px; font-size: 18px; font-weight: bold; line-height: 1;
}
.page2 li dl{
margin-top: 18px;
}
.page2 li dd{
display: inline;
}
.page2 li dd span{
width: 1px; height: 15px; display: inline-block; background: #fff; margin: 0 15px;
}
.page2 li p{
margin-top: 30px; line-height: 24px;
}
[/codesyntax]
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
