大气的开源商城系统用户服务需求图片文字排列布局效果代码，这是一款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>

资源出处：https://www.moyublog.com/codes/292.html