奥义思网站建设-www.aooly.com
奥义思坚信质量高于产量
我们的团队自成立以来,秉承着质量是衡量价值最重要标准的理念,致力于打造高品质数字产品。不放过任何一个小的瑕疵而一蹴而就,体现的不仅是我们对品质的苛求,也是对客户以及产品负责的态度。
马上联系我们,让天才的设计师帮您实现这一切。

    HTML中如何实现文字绕排

      在word中我们知道如何是文字绕排,但在web页面中如何实现呢?这个就不象word中那么容易了。但只要使用好html的元素一样能达到这样的效果。
      一般绕排有这样几种:文字绕图,文字绕文字等。我想讲的就是这两种。好吧,开始!
      本文的效果演示请看:http://ecom.xj169.net/vbgood/exmple/word.htm

      1.文字绕图

      如果我们使用正常的,例如:

      <TABLE cellpadding="15" width="200">
      <TR>
      <TD bgcolor="#EEEEFF"><IMG src="test.gif" hight=60>这里是普通的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
      </TR>
      </TABLE>

      这样的语句中图片比文字高度要高,则文字上部会有空白出现。页面的效果非常不好。如何解决呢?请看这个代码:

      <TABLE cellpadding="15" width="200">
      <TR>
      <TD bgcolor="#EEEEFF"><IMG src="test.gif" hspace="1" align="LEFT" hight=60>这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
      </TR>
      </TABLE>

      在img这个元素中加入这个属性就可以解决:align="center",问题就可以解决了。简单吧!至于hspace是定义图片与周围元素的宽度。于是否绕排无关系。

      2.文字绕文字。先看看这个效果:http://ecom.xj169.net/vbgood/exmple/word.htm#word

      这有是怎么作出来的呢?先看看这个代码:

      <table align=left cellspacing=0 cellpadding=0 width=200 border=1>
      <tr>
      <td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font> </table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
      </table>

      这样的效果又怎么实现呢?

      <table align=left cellspacing=0 cellpadding=0 width=200 border=1>
      <tr>
      <td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font>
      </table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
      </table>

      这段代码就说明了,聪明的你一看就知道了,只要把要放大的字放在这个table中就可以了。

      但现在如果我要让文字有背景色,有怎么办呢?哈,你真聪明,在table中加bgcolor属性,这样:

      <table align=left cellspacing=0 cellpadding=0 width=200 border=1>
      <tr>
      <td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><font color=red size="5"><b>在</b></font></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>

      但能出来吗?是不能,还要加东西呢(记得下次不要这么快回答哦:),这样:

      <table align=left cellspacing=0 cellpadding=0 width=200 border=1>
      <tr>
      <td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><td><font color=red size="5"><b>在</b></font></td></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>

      好了吧,达到目的了,还有个问题留给您吧,那就是如何文字绕表格?相信您一定能解决。