软件学堂

网游分类软件分类

JS代码实现文字环绕图片

2012-11-07 来源:网络

【实例名称】

JS代码实现文字环绕图片

【实例描述】

在Word文档的制作过程中经常会遇到图片和文字都存在的情况,为了版面更合理通常需要特殊的效果,如文字环绕图片。本例就学习如何使文字环绕图片。

【实例代码】

 <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>无标题页-学无忧(www.xue51.com)</title> </head> <body> <div style="background:#EEEEEE;padding:10px;width:240px;"> <img src="logo1.gif"   width=100 height=95 id=img1 style="float:right;">  <div id="mydiv" style="clear:none;">国家环保总局宣布今 起松花江进入为期十年的“休养期”,并提出70条具体的治理措施,其中包括 停止审批所有从松花江流域向外流域的调水工程,逐步淘汰松花江流域钢铁、 电力、焦炭、造纸等行业的落后生产能力。</div> </body> </html>

 

 

【运行效果】

 文字环绕图片运行效果

【难点剖析】

本例的重点是样式表中的“clear”:在一个大容器内如果定义了float元素(本例中img图片定义了float样式),那么后面的元素会与其一起分享大容器剩下的宽度.如果既不想和float一起同行显示,又不想在浏览器中错位,那就得用到”clear:both”取消所有浮动。

【源码下载】

为了JS代码的准确性,请点击:文字环绕图片 进行本实例源码下载 

上一篇:JS代码实现图片的渐隐播放效果
下一篇:JS实现图片切换的特殊效果

相关文章