div基于css3制作蓝色创意的产品服务圆形图标文字布局代码。

使用方法

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>

2、body引入HTML代码

<div class="auto-box">
	<div class="main-box">
		<div class="index-tit">
			<h1>比公有云更多的，是精益求精的360°服务</h1>
			<p>近20年 IT 服务经验，千锤百炼打造面向企业的全程服务</p>
		</div>
		<ul class="index-tserver">
			<li class="tserver-list1">
				上云迁移服务
				<p class="animated zoomin">
					<a href="#">制定上云整体方案，实现专业、有序、安全迁移上云</a>
				</p>
			</li>
			<li class="tserver-list2">
				新手服务
				<p class="animated zoomin">
					<a href="#">提供云端架构、部署、产品和功能培训和指导</a>
				</p>
			</li>
			<li class="tserver-list3">
				网络安全服务
				<p class="animated zoomin">
					<a href="#">提供漏扫、态势感知、安全加固等全面网络安全防护服务</a>
				</p>
			</li>
			<li class="tserver-list4">
				资质服务
				<p class="animated zoomin">
					<a href="#">致力于为云上客户的应用提供更加安全防护与合规保障</a>
				</p>
			</li>
			<li class="tserver-list5">
				应用部署服务
				<p class="animated zoomin">
					<a href="#">整合CI/CD，提供面向应用的系统部署和运维服务</a>
				</p>
			</li>
			<li class="tserver-list6">
				混合托管服务
				<p class="animated zoomin">
					<a href="#">提供IDC托管混合、云与IDC数据混合，全方位混合云构建</a>
				</p>
			</li>
			<li class="tserver-list7">
				运维运营服务
				<p class="animated zoomin">
					<a href="#">提供各种技术代维和业务代维服务</a>
				</p>
			</li>
		</ul>
	</div>
	<div class="index-tserver-ad">
		<div class="main-box">
			<ul>
				<li><img src="statics/images/tserver-ad-icon1.png">7*24*365 服务支持</li>
				<li><img src="statics/images/tserver-ad-icon2.png">灵活定制行业解决方案</li>
				<li><img src="statics/images/tserver-ad-icon3.png">秒级快速响应</li>
				<li><img src="statics/images/tserver-ad-icon4.png">VVIP 大客户服务</li>
				<li><img src="statics/images/tserver-ad-icon5.png">最高15天免费试用</li>
			</ul>
		</div>
	</div>
</div>

资源出处：https://www.moyublog.com/codes/65.html