H5研究三：图文混排的实现

来源：互联网发布：植物生物学杨继淘宝编辑：程序博客网时间：2024/06/05 16:10

准备实现两个布局：

1 2

第一个布局：

分析：

1.有一个标题，用h1标签，对齐方式为居中；2.一个时间，用p标签，更改颜色和字体大小，对齐方式为左对齐3.一张图片，居中，和上面下面的文字有点间距4.一段文字，左对齐5.作为整体来看，上下左右相对于整个窗口来看，是有间距的

于是代码如下

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            p{                text-align: left;               }            div{            position: relative;            margin: 10%;            }        </style>    </head>    <body>        <div>        <h1 style="text-align: center;">原标题：苹果10.5寸iPad Pro开箱图赏：改变总在毫厘之间</h1>        <span style="color: gainsboro;">2017-06-24 16:15</span>        <p><img src="http://img.mp.itc.cn/upload/20170624/76c4d5926ad540b3a22b30691b9ce548_th.jpg" alt=""></p>        <p>此次IT之家拿到的除一台10.5寸iPad Pro外，还包括Smart Keyboard键盘、iPad Pro皮革保护套、Apple Pencil手写笔、以及Apple Pencil笔套。各个都是价值不菲的官方配件，均属高档皮革材质，佩戴后的契合程度非常高，做工和质感确实没得挑，如果不考虑售价，IT之家小编非常推荐大家入手。</p>        <p><img src="http://img.mp.itc.cn/upload/20170624/3d84a215a711421a9df905245f9b2449_th.jpg" alt=""></p>        <p>此次收到的iPad Pro为512GB的Wi-Fi版，既然号称是生产力工具，那容量的提升几乎是必然的，10.5寸iPad Pro的起步容量来到了64GB，同时价格也涨到了5188元起。苹果不仅想让用户拿iPad用来看电视打游戏，还想让更多的用户把iPad当作移动办公设备。当然小编我长这么大，还没用过512GB的iPad，不知大家觉得iPad究竟多大存储才够用？</p>    </div>    </body></html>

其中:
1.position 可设为绝对定位，在此并没有影响
2.css中的margin的10%，是估测的距离，可自行更改。
3.时间的颜色为gainsboro
4.span标签可用p标签代替

第二个布局

分析：
1.像是tableview的cell
2.要有个left 浮动属性

代码：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            div{            position: absolute;            margin: 10%;            }            img{                float: left;                width: 25%;                height: width;            }        </style>    </head>    <body>        <div>                       <h1>带电的ofo来了，但恐怕进不了北上广</h1>                <img src="//img.mp.itc.cn/c_fill,w_450,h_300,g_faces/upload/20170629/3883839652564c9ba312c9f86188383c_th.jpg" />                                            <img src="//img.mp.itc.cn/c_fill,w_450,h_300,g_faces/upload/20170629/69231af3b457480ebc2b1f482411c27d_th.jpg"/>                                <img src="//img.mp.itc.cn/c_fill,w_450,h_300,g_faces/upload/20170629/7490230160d74d0d92e13fffcfb40797_th.jpg" />                                <img src="//img.mp.itc.cn/c_fill,w_450,h_300,g_faces/upload/20170629/c3e82cc7023346269fa1c31812c70969_th.jpg" />                <div style="top: 10px;color: gray;margin-left: 0px;position: relative;">                     <img src="img/image1.jpg"style="width: 30px;height: 30px;float: left; border-radius: 15px;" />                    <p>火星情报局 · 2016年12月</p>                 </div>    </body></html>

width: 25%;

阅读全文

1 0