现在位置:首页 » 代码修改 »

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

心岛发布于2011年05月19日  分类: 代码修改  浏览:2890 人次  评论:0 
文本绕图效果图
  网页设计中经常遇到需要制作文本绕图效果(如上图所示),如何实现的呢?其实很简单主要利用了图片的浮动属性,具体步骤如下:
  第一,首先制作背景图,如下图:
背景图
  关于蓝色的标题文字,主要使用<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;}
  此方法简单有效!特此推荐!
赞 (0次) 打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫

本文由心岛原创或编辑,转载请保留链接【网页设计中文本绕图效果实现的方法!】http://www.liangxin.name/?post=19
本文百度已收录,点此查看详细信息
本文标签: 代码修改
上一篇: 利用php整站套件做服务器环境
下一篇:今天利用十分钟的时间给emlog设计了一份标识
目前有 0 条评论