CSS高級技能:文本围绕照片

日期:2021-01-20 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5


上1篇CSS实例教程 文章内容:CSS高級技能:拖动门 文本围绕照片(SandBags)
在包装印刷业中, 常见的文本照片混搭的排版法被拓宽到了Web视觉效果设计方案中, 怎样来进行呢?
这里说的其实不是简易的文本包围着照片, 但是基本原理很相近, 一样是根据float特性来进行实际效果的. 先看1看实际效果图:

这应当并不是简易的照片float能进行的了吧?
但是完成的基本原理還是并不是很强烈推荐, 由于有非常多的附加标识, 整份文本文档看起来其实不是是非非常词义化.
说归说, 示例编码還是要得出来的.
HTML编码以下:

<div class="wrap_area">
<img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />
<div class="shape_wrap">
<div style="width: 250px;"></div>
<div style="width: 280px;"></div>
<div style="width: 305px;"></div>
.
.
.
</div>
<p>Numerous blocks of text</p>
.
.
.
</div>

CSS编码大概以下:

div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }
div.shape_wrap div { float: left; clear: left; height: 20px; }

CSS把握的非常好的同学们应当就早已了解在其中的奥秘了, 一样是运用 float 将div一部分內容提出文本文档流, 随后等因而挖人力河1样, 用div的堆砌造出1条文章正文要根据的 "方式".
合适于纯视觉效果化设计方案的实际效果.
下1篇CSS实例教程 文章内容:CSS高級技能:合理布局