前端开发_HTML5_模块化-图文混排效果实现

图文混排效果实现

1.引入

   上一次课程,我们使用栅格布局和ul-li标签实现了简单的导航栏目和菜单栏目的实现,接下来我们使用栅格布局和定义列表标签实现简单的图文混排的效果,这一个效果再电商项目或图片显示较多的项目中应用较为广泛。

2.图文混排效果实现

  我们再实现效果的时候还是按照上一次课程讲解的操作步骤一样。

3.代码以及实现效果

代码实现以及效果截图

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			/**定义基本的弹性布局内容**/
			.grid {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around;

			}

			/**按照比例定义栅格的宽度和收缩比例,这里我们把他划分为8个区域**/
			.grid-cell-1,
			.grid-cell-2,
			.grid-cell-3,
			.grid-cell-4,
			.grid-cell-5,
			.grid-cell-6,
			.grid-cell-7,
			.grid-cell-8 {
				flex-shrink: 1;
				/*设置收缩比率*/
				padding: 3px;
				/*设置内边距*/
			}

			/**设置扩展比例,也可以认为是所占据的比例的数量**/
			.grid-cell-1 {
				flex-grow: 1;
				/*占据比例数量的1/8*/
			}

			.grid-cell-2 {
				flex-grow: 2;
				/*占据比例数量的2/8*/
			}

			.grid-cell-3 {
				flex-grow: 3;
				/*占据比例数量的3/8*/
			}

			.grid-cell-4 {
				flex-grow: 4;
				/*占据比例数量的4/8*/
			}

			.grid-cell-5 {
				flex-grow: 5;
				/*占据比例数量的5/8*/
			}

			.grid-cell-6 {
				flex-grow: 6;
				/*占据比例数量的6/8*/
			}

			.grid-cell-7 {
				flex-grow: 7;
				/*占据比例数量的7/8*/
			}

			.grid-cell-8 {
				flex-grow: 8;
				/*占据比例数量的8/8*/
			}

			.box-m {
				background-color: #00AA00;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				color: #ffffff;
				font-family: "宋体";
			}

			dd {
				text-align: center;
				font-size: 25px;
				font-family: "宋体";
				color: #00AA00;
			}

			.org {
				color: #cbcbcb;
				text-decoration: line-through;
			}



			.discount {
				color: #ff5500;
				font-weight: 900;
			}


			.box-s {
				background-color: #00AA00;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				color: #ffffff;
				font-family: "宋体";
				text-align: center;
			}

			img {
				width: 100%;
			}
</style>
<div class="grid">
			<div class="grid-cell-4">
				<div class="box—m">
					<dl>
						<dt><img src="images/葡萄.jpg"></dt>
						<dd>热销产品:产自新疆吐鲁番的纯甜葡萄</dd>
						<dd>
							<span class="org">原价:¥35.00</span>
							<span class="discount">现价:¥15.00</span>
						</dd>
					</dl>
				</div>
			</div>
			<div class="grid-cell-4">
				<div class="box—m">
					<dl>
						<dt><img src="images/葡萄.jpg"></dt>
						<dd>热销产品:产自新疆吐鲁番的纯甜葡萄</dd>
						<dd>
							<span class="org">原价:¥35.00</span>
							<span class="discount">现价:¥15.00</span>
						</dd>
					</dl>
				</div>
			</div>
		</div>

		<div class="grid">
			<div class="grid-cell-2">
				<div class="box-s">
					<dl>
						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
						<dd>
							<span class="org">原价:¥20.00</span>
							<span class="discount">现价:¥10.00</span>
						</dd>
					</dl>
				</div>
			</div>
			<div class="grid-cell-2">
				<div class="box-s">
					<dl>
						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
						<dd>
							<span class="org">原价:¥20.00</span>
							<span class="discount">现价:¥10.00</span>
						</dd>
					</dl>
				</div>
			</div>
			<div class="grid-cell-2">
				<div class="box-s">
					<dl>
						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
						<dd>
							<span class="org">原价:¥20.00</span>
							<span class="discount">现价:¥10.00</span>
						</dd>
					</dl>
				</div>
			</div>
			<div class="grid-cell-2">
				<div class="box-s">
					<dl>
						<dt><img src="images/橘子.jpg" width="100" height="150"></dt>
						<dd>广西武鸣沃柑橘子桔子新鲜当季现摘批发10斤包邮水果一件代发</dd>
						<dd>
							<span class="org">原价:¥20.00</span>
							<span class="discount">现价:¥10.00</span>
						</dd>
					</dl>
				</div>
			</div>
</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

魔笛手7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值