大气的开源商城系统用户服务需求图片文字排列布局效果代码,这是一款div css制作的实用创意的图文布局代码。
使用方法:
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>
2、body引入HTML代码
<div class="role">
<div class="w1200">
<!--左边-->
<div class="left">
<h3>满足多角色需求</h3>
<p>人人都需要的开源商城系统</p>
<a href="#">立即下载试用</a>
</div>
<!--右边-->
<div class="right">
<!--列表1-->
<div class="list">
<ul>
<li>
<div class="list_pic">
<img src="statics/images/pic1.png"/>
</div>
<h4>用户</h4>
<p>PC端城+APP商城+微商城多终端浏览、下单、在线支付...</p>
</li>
<li>
<div class="list_pic">
<img src="statics/images/pic2.png"/>
</div>
<h4>开发者</h4>
<p>完全开源,没有加密,帮助程序员建立完整的架构思路</p>
</li>
</ul>
</div>
<!--列表2-->
<div class="list list2">
<ul>
<li>
<div class="list_pic">
<img src="statics/images/pic3.png"/>
</div>
<h4>企业</h4>
<p>订单管理/会员积分/统一支付/团购/满减...获得大销量</p>
</li>
<li>
<div class="list_pic">
<img src="statics/images/pic4.png"/>
</div>
<h4>服务商</h4>
<p>提供小米/京东/天猫等上百个大牌模板,免费安装,想换就换</p>
</li>
</ul>
</div>
</div>
</div>
</div>