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

 使用方法:

1、head引入css文件

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

2、body引入HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<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>

发表评论

后才能评论