div css3 实现简单大气企业建站优势列表图标文字布局代码, 结构清晰简单,简单易用,下载即可使用。
使用方法
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>2、body引入HTML代码
<div class="block-content"> <div class="block-content-box"> <ul class="block-content-box-list"> <li class="block-list-item"> <div class="block-list-item-box clearfix"> <div class="block-list-item-mask"> <div class="block-list-item-image"> <div class="block-list-item-content"> <div class="block-list-item-middle"> <img src="images/icon-item001.png" alt=""> </div> </div> </div> </div> <div class="block-list-item-text"> <div class="block-list-item-body"> <div class="block-list-item-body-title"> <p> <strong>自由编辑</strong> </p> </div> <div class="block-list-item-body-text"> <p>可视化编辑器,随时随地修改网站</p> </div> </div> </div> </div> </li> <li class="block-list-item"> <div class="block-list-item-box clearfix"> <div class="block-list-item-mask"> <div class="block-list-item-image"> <div class="block-list-item-content"> <div class="block-list-item-middle"> <img src="images/icon-item002.png" alt=""> </div> </div> </div> </div> <div class="block-list-item-text"> <div class="block-list-item-body"> <div class="block-list-item-body-title"> <p> <strong>全网兼容</strong> </p> </div> <div class="block-list-item-body-text"> <p>手机、平板、PC、微信全面兼容</p> </div> </div> </div> </div> </li> <li class="block-list-item"> <div class="block-list-item-box clearfix"> <div class="block-list-item-mask"> <div class="block-list-item-image"> <div class="block-list-item-content"> <div class="block-list-item-middle"> <img src="images/icon-item003.png" alt=""> </div> </div> </div> </div> <div class="block-list-item-text"> <div class="block-list-item-body"> <div class="block-list-item-body-title"> <p> <strong>顶级域名</strong> </p> </div> <div class="block-list-item-body-text"> <p>打造互联网品牌,绑定顶级域名</p> </div> </div> </div> </div> </li> <li class="block-list-item"> <div class="block-list-item-box clearfix"> <div class="block-list-item-mask"> <div class="block-list-item-image"> <div class="block-list-item-content"> <div class="block-list-item-middle"> <img src="images/icon-item004.png" alt=""> </div> </div> </div> </div> <div class="block-list-item-text"> <div class="block-list-item-body"> <div class="block-list-item-body-title"> <p> <strong>全球加速</strong> </p> </div> <div class="block-list-item-body-text"> <p>阿里云分布式存储,可自主切换节点</p> </div> </div> </div> </div> </li> <li class="block-list-item"> <div class="block-list-item-box clearfix"> <div class="block-list-item-mask"> <div class="block-list-item-image"> <div class="block-list-item-content"> <div class="block-list-item-middle"> <img src="images/icon-item005.png" alt=""> </div> </div> </div> </div> <div class="block-list-item-text"> <div class="block-list-item-body"> <div class="block-list-item-body-title"> <p> <strong>在线客服</strong> </p> </div> <div class="block-list-item-body-text"> <p>一键QQ、电话客服、微信快捷关注</p> </div> </div> </div> </div> </li> <li class="block-list-item"> <div class="block-list-item-box clearfix"> <div class="block-list-item-mask"> <div class="block-list-item-image"> <div class="block-list-item-content"> <div class="block-list-item-middle"> <img src="images/icon-item006.png" alt=""> </div> </div> </div> </div> <div class="block-list-item-text"> <div class="block-list-item-body"> <div class="block-list-item-body-title"> <p> <strong>客户CRM</strong> </p> </div> <div class="block-list-item-body-text"> <p>自定义表单,微信推送,客户管理</p> </div> </div> </div> </div> </li> </ul> </div> </div>