div css3制作申请流程仅需6步,即可完成产品认证步骤图布局代码。
使用方法
1、head引入css文件
<link rel="stylesheet" href="css/style.css" />2、body引入HTML代码
<section class="process"> <div class="container"> <h3>申请流程</h3> <p>仅需6步,即可完成产品认证</p> <ul class="flowline clearfix"> <li class="process-module process-0"> <span class="icon-block"> <img src="images/blank.gif" alt="注册云账号并企业实名" style="background-position: 0px 0"><br /> <span class="flow-line"></span> </span> <br /> <span>注册云账号并企业实名</span> </li> <li class="process-module process-1"> <span class="icon-block"> <img src="images/blank.gif" alt="提交申请" style="background-position: -32px 0"> <br /> <span class="flow-line"></span> </span> <br /> <span>提交申请</span> </li> <li class="process-module process-2"> <span class="icon-block"> <img src="images/blank.gif" alt="准备环境" style="background-position: -64px 0"> <br /> <span class="flow-line"></span> </span> <br /> <span>准备环境</span> </li> <li class="process-module process-3"> <span class="icon-block"> <img src="images/blank.gif" alt="对接测试" style="background-position: -96px 0"> <br /> <span class="flow-line"></span> </span> <br /> <span>对接测试</span> </li> <li class="process-module process-4"> <span class="icon-block"> <img src="images/blank.gif" alt="完成认证" style="background-position: -128px 0"> <br /> <span class="flow-line"></span> </span> <br /> <span>完成认证</span> </li> <li class="process-module process-5"> <span class="icon-block"> <img src="images/blank.gif" alt="评价与复审" style="background-position: -160px 0"> <br /> <span class="flow-line"></span> </span> <br /> <span>评价与复审</span> </li> </ul> </div> </section>