电脑端：设置一个类名，20%
手机端
代码
：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#manage{
margin: 0 0 55px 0;
}
#manage .col-zdlg-2-5{
width: 20%;
float: left;
}
#manage .col-zdlg-2-5 .div1{
width: auto;
height: 100px;
background: url("./image/service11.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div2{
width: auto;
height: 100px;
background: url("./image/service22.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div3{
width: auto;
height: 100px;
background: url("./image/service33.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div4{
width: auto;
height: 100px;
background: url("./image/service44.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div5{
width: auto;
height: 100px;
background: url("./image/service55.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div1:hover{
background: url("./image/service1.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div2:hover{
background: url("./image/service2.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div3:hover{
background: url("./image/service3.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div4:hover{
background: url("./image/service4.png") no-repeat center center;
}
#manage .col-zdlg-2-5 .div5:hover{
background: url("./image/service5.png") no-repeat center center;
}
@media screen and (min-width: 768px) {
#manage .col-zdlg-2-5{
float: left;
width:20%;
}
}
@media screen and (max-width: 767px) {
#manage .col-zdlg-2-5 {
float: left;
width: 100%;
}
}
</style>
</head>
<body>
<div id="manage">
<div class="container text-center">
<div class="row ">
<div class="col-zdlg-2-5 col-xs-6 text-center">
<div class="text-center div1"></div>
<h3>iOS开发</h3>
<p>公司拥有国内顶级IOS开发团队，为您提供一站式的IOS手机
app定制开发服务</p>
</div>
<div class="col-zdlg-2-5 col-xs-6 text-center">
<div class="text-center div2"></div>
<h3>Android开发</h3>
<p>安卓APP应用软件已经占据国内移动应用市场的50%以上，开发安卓手机
app软件的重要性日益凸显</p>
</div>
<div class="col-zdlg-2-5 col-xs-6 text-center">
<!--<img src="image/service33.png">-->
<div class="text-center div3"></div>
<h3>微信开发</h3>
<p>北京亿佰蓝图公司为您提供专业的微信公众平台二次开发以及微信商城网站
个性化定制开发服务</p>
</div>
<div class="col-zdlg-2-5 col-xs-6 text-center">
<div class="text-center div4"></div>
<h3>html5手机站开发</h3>
<p>HTML5是未来网络发展的趋势，可以实现各种多媒体效果，如视频、音频等
无需任何插件即可观看收听</p>
</div>
<div class="col-zdlg-2-5 col-xs-6 text-center">
<div class="text-center div5"></div>
<h3>WEB网站开发</h3>
<p>国内知名的web网站开发公司北京亿佰蓝图，拥有多年的网站建设经验，提供
高端型网站定制开发服务</p>
</div>
</div>
</div>
</div>
</body>
</html>