弹性布局实战 - A8源码实例

基本信息

源码名称：弹性布局实战

源码大小：1.00M

文件格式：.zip

开发语言：CSS

更新时间：2017-05-18

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 5 元　

源码介绍

弹性布局实战练习

HTML代码

<body>
		<!--内容-->
		<div class="content">
			<!--左边开始-->
			<ul class="content_left_list">
				<li class="animated tada">
					<a href="###"><img src="img/visit.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/contract.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/admin.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/guide.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/expo.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/axam.png" alt="" /></a>
				</li>
			</ul>
			<!--左边结束-->
			
			<!--右边开始-->
			<ul class="content_right_list">
				<li>
					<a href="###"><img src="img/sjzx.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/sina.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/hall.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/tencent.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/traval.png" alt="" /></a>
				</li>
				<li>
					<a href="###"><img src="img/weico.png" alt="" /></a>
				</li>
			</ul>
			<!--右边结束-->
		</div>
		
	</body>

CSS 样式：

body {
	background:url(../img/bg.png) no-repeat;
}

/*内容*/
.content {
	width: 864px;
	margin: 100px auto 0;
	/*设置为弹性容器*/
	display: flex;
	/*设置主轴对齐方式*/
	justify-content: space-between;
}