前端开发_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>