首页 > 代码修改 > 网页设计中文本绕图效果实现的方法!
2011
05-19

网页设计中文本绕图效果实现的方法!

网页设计中文本绕图效果实现的方法! - 第1张  | 心岛博客

  网页设计中经常遇到需要制作文本绕图效果(如上图所示),如何实现的呢?其实很简单主要利用了图片的浮动属性,具体步骤如下:
  第一,首先制作背景图,如下图:

网页设计中文本绕图效果实现的方法! - 第2张  | 心岛博客

  关于蓝色的标题文字,主要使用<h2>标签即可实现,不再多说!
 主要说下部文本绕图效果,因为整体是一段文字(尽管有图片也是嵌套在文本中的),因而笔者使用<p>标签,代码如下:
  <p>中华民族具有辉煌灿烂的文化,对人类文明做出过重大贡献,在人类进入新世纪之际,如何始终坚持中国先进文化前进方向,<span><img src=”images/index/tsg-new_13.gif” align=”left” /></span>是一个十分严肃而重大的历史课题。</p>
  说明:1、为了方便图片的浮动,本人使用了<span>标签。2、至于span标签的位置是在DW中调整的结果,根据实际效果而定!
  那么真正实现此效果的CSS样式表如下:
   p{ font-size:12px; text-align:left; width:170px; padding:5px;text-indent:2em;}
  p span{ float:right; height:60px; width:90px;}
  此方法简单有效!特此推荐!
最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。