div css 实现简单大气企业建站开发流程结构布局,结构简单,简单易用,下载即可使用。图标使用的是SVG格式、
使用方法:
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、body引入HTML代码
<div class="process-content">
<div class="process-group">
<h3 class="process-title">
<em>开发流程</em>
<span>一站式数据服务,助您领跑AI行业</span>
</h3>
<div class="process-container clearfix">
<div class="process-item">
<div class="process-item-title">数据</div>
<ul>
<li>
<i class="process-icon icon-wlw"></i>
物联网
</li>
<li>
<i class="process-icon icon-yun"></i>
云
</li>
<li>
<i class="process-icon icon-ccs"></i>
存储设备
</li>
<li>
<i class="process-icon icon-yds"></i>
移动设备
</li>
<li>
<i class="process-icon icon-hlw"></i>
互联网
</li>
</ul>
</div>
<div class="process-arrow"></div>
<div class="process-item">
<div class="process-item-title">接入</div>
<ul>
<li>
<a href="#">
<i class="process-icon icon-bdr"></i>
百度日志服务
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-wjr"></i>
物接入
</a>
</li>
</ul>
</div>
<div class="process-arrow"></div>
<div class="process-item">
<div class="process-item-title">存储</div>
<ul>
<li>
<a href="#">
<i class="process-icon icon-dxc"></i>
对象存储BOS
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-bdx"></i>
百度消息服务
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-gxx"></i>
关系型数据库RDS
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-jdh"></i>
简单缓存服务SCS
</a>
</li>
</ul>
</div>
<div class="process-arrow"></div>
<div class="process-item">
<div class="process-item-title">分析</div>
<ul>
<li>
<a href="#">
<i class="process-icon icon-bdm"></i>
百度MapReduce
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-bdj"></i>
百度机器学习
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-bds"></i>
百度数据仓库 Palo
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-bde"></i>
百度Elasticsearch
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-sdx"></i>
度深度学习
</a>
</li>
<li>
<a href="#">
<i class="process-icon icon-bdp"></i>
百度批量计算
</a>
</li>
</ul>
</div>
<div class="process-arrow"></div>
<div class="process-item">
<div class="process-item-title">解决方案</div>
<ul>
<li>
<i class="process-icon icon-wlw"></i>
数字广告营销
</li>
<li>
<i class="process-icon icon-yun"></i>
商品/商家推荐
</li>
<li>
<i class="process-icon icon-ccs"></i>
舆情分析
</li>
<li>
<i class="process-icon icon-yds"></i>
内容个性化
</li>
<li>
<i class="process-icon icon-hlw"></i>
生物基因工程
</li>
<li>
<i class="process-icon icon-ycj"></i>
异常检测
</li>
</ul>
</div>
</div>
</div>
</div>