`

不规则图片环绕文字

    博客分类:
  • CSS
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>
<head>
<title>不规则图片环绕文字</title>
<style>
html, body {
  margin: 0px;
  padding: 40px 0 0 100px;
  background:#000;color:#fff;font-size:14px;
}
div{margin: 0px;
  padding: 0px;
  border: 0px;
color:#fff;font-size:14px;}
#content {
  background: url(http://www.donews.net/images/www_donews_net/dodo/49134/o_003.jpg) no-repeat;
  margin: 0px;
  padding: 0px;
  border: 0px;
  line-height:155%
}
.blank {
  float: left;
  clear: left;
  margin: 0px 25px 0px 0px;
  font-size:9px;font-family:arial;
  height:21px
}
</style>
</head>
<body>
<div id="content">
<div class="blank" style="width:175px;">1 </div>
<div class="blank" style="width:180px;">2 </div>
<div class="blank" style="width:170px;">3 </div>
<div class="blank" style="width:166px;">4 </div>
<div class="blank" style="width:160px;">5 </div>
<div class="blank" style="width:155px;">6 </div>
<div class="blank" style="width:138px;">7 </div>
<div class="blank" style="width:136px;">8 </div>
<div class="blank" style="width:120px;">9 </div>
<div class="blank" style="width:126px;">10 </div>
<div class="blank" style="width:132px;">11 </div>
<div class="blank" style="width:138px;">12 </div>
<div class="blank" style="width:138px;">13 </div>
<div class="blank" style="width:138px;">14 </div>
月色正朦胧<br />
与清风把酒相送<br />
太多的诗颂<br />
醉生梦死也空<br />

和你醉后缠绵<br />
你曾记得<br />
乱了分寸的心动<br />
怎么只有这首歌<br />
会让你轻声合<br />
醉清风<br />

梦镜的虚有<br />
琴声一曲相送<br />
还有没有情浓<br />
风花雪月颜容<br />


</div>
</body>
</html>
分享到:
评论

相关推荐

    Word中图片被文字环绕的处理方法.docx

    如果是不规则形状,则文字会紧密贴合图片边缘。 - 这种方式能够更灵活地适应不同形状的图片。 4. **衬于文字下方**: - 图片位于文字下方,文字覆盖在图片之上。 - 适合创建水印效果或背景图案。 5. **浮于文字...

    设置Word2021文字环绕图片的方式.docx

    紧密型环绕,如果图片是矩形,则文字以矩形方式环绕在图片周围,如果图片是不规则图形,则文字将紧密环绕在图片四周。在这种方式下,文字将紧贴图片的边缘,形成一个紧凑的环绕效果。这是一种非常实用的图片环绕方式...

    [Word基础教程合集一]设置文字环绕图片.docx

    如果图片是矩形,则文字以矩形方式环绕在图片周围,如果图片是不规则图形,则文字将紧密环绕在图片四周。在这种方式下,文字会紧密环绕在图片周围,形成一个整体的效果。 第四种环绕图片方式:衬于文字下方 在这种...

    word插件,图片处理专用

    5. 文字环绕:方便地设置图片与文字的关系,如四周型、紧密型、穿越型等,使图文布局更加美观。 6. 水印添加:为保护版权或增加个性化,用户可以添加自定义的文字或图像水印。 7. 批量处理:对于大量图片的操作,...

    CSS3绘制不规则图形的一些方法示例

    `shape-outside`属性特别适用于创建文本环绕不规则图形的效果。通过将此属性应用于浮动元素,可以实现文本流环绕图形的布局。值得注意的是,目前`shape-outside`仅能应用于块级元素和浮动元素。因此,如果想要在非...

    多种图文排版方案——图文排版合集PPT模板.pptx

    此外,模板中还可能包含其他创新的排版设计,如梯形、圆形、不规则图形等,这些都可以根据实际内容和场合进行选择和调整。 在实际操作中,要注意以下几点: - **色彩搭配**:合理运用色彩可以增强视觉冲击力,同时...

    2016教师信息化应用培训模拟题(第4套).docx

    5. **图片环绕方式**:Word 2010中,可将图片设置为不同的环绕方式,如**四周型**环绕允许文字围绕图片排列;**上下型环绕**则使得文字只在图片的上下两端自动调整。 ### PowerPoint相关知识点 1. **艺术字插入**...

    计算机应用 (总结与提高)Word基础排_编辑个人风采文档.docx

    比如,结合矩形、圆形、不规则形状等,让页面看起来更加生动。 - **活泼版面**:灵活地组合图形,避免过于死板的布局,可以使文档更富有活力。 4. **Word操作技能**: - **插入图形与文字环绕**:在Word中插入...

    小学信息技术教学课件制作奖状.ppt

    4. **输入正文**:在奖状中输入文字是必不可少的,可以通过点击鼠标左键并开始输入,或者在文本框内直接复制粘贴已准备好的文本。确保文字清晰易读,符合排版规则。 5. **插入图片**:为了增加奖状的视觉效果,可以...

    高考班信息技术考试题.pdf

    12. 文字环绕图片:在Word中,让文字环绕图片需要选择“格式”选项卡的“排列”组,自动换行命令组中的“文字环绕”,并选择“四周环绕”。 13. Word编辑操作:删除句柄间的字符,会将字符合并,所以原句变为“飞流...

    高中信息技术会考试题(附答案).pdf

    - 图片的文字环绕方式中,"衬于文字下方"指的是文字在图片之上,图片位于文字的下方。 11. 图像编辑软件: - 小芳需要处理照片,最适合的软件是Photoshop,它具有强大的图像编辑和处理功能。 12. 信息获取与处理...

    计算机应用基础简答题(1).doc

    在文档中,图片的正文环绕方式有5种:四周型、紧密型、衬于文字下方型、浮于文字上方型和嵌入型。每种方式会影响图片与文字的相对位置,通过右键点击图片,选择“设置图片格式”,在“版式”选项卡中设置。 5. ...

    企业制度文件格式规范.pdf

    页眉中央放置公司LOGO,尺寸为2厘米高,2厘米宽,使用嵌入型文字环绕。页脚设置页码,格式为“第X页*/*共Y页”,字体为微软雅黑 Light,字号小五,中文和英文均适用。 2. **正文编辑** - 三级标题结构:总标题、一...

    2021-2022计算机二级等级考试试题及答案No.12986.docx

    在计算机二级等级考试中...24. Word中的图片环绕:在Word中,图片可以设置各种环绕方式,如紧密环绕、穿越环绕等,使得文字可以环绕图片显示(选项描述错误)。 以上就是计算机二级考试中涉及的各个知识点的详细解释。

    新版计算机应用基础简答题.doc

    在Word中,图片的正文环绕方式有5种:四周型、紧密型、衬于文字下方型、浮于文字上方型和嵌入型。每种方式会改变图片与文字的相对位置,通过右键点击图片选择“设置图片格式”可进行设置。 5. 文本框和文本链接...

    HIWEB网站快车中带简介文章列表标签模板详解

    - **绕排方式**:指定文字环绕图片的方式。 #### 三、示例与应用 通过以上设置,我们可以看到一个典型的“带简介文章列表”的示例效果。这种布局不仅美观,而且能够有效地提高用户的阅读体验。例如,在新闻网站、...

    完整word版-中职-计算机应用基础试卷A.doc

    4. Word 2003 图片环绕方式:图片的文字环绕方式包括嵌入型、上下型、穿越型、紧密型、四周型、浮于文字下方和浮于文字上方。 5. Windows 文件名规则:文件名最多可以有255个字符,且不能包含\ / * ? &lt; &gt; 空格等...

Global site tag (gtag.js) - Google Analytics