切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2017年05月24日

和君

本文就“和君”展开讨论，作者切版网，发布于2017年05月24日 全文共4660个字，预计阅读时长15分32秒。

访问网址：

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]

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。