文字与图片的几种排版用法

1、文字与图片的几种排版用法常常有朋友问我怎么在图片左边和右边插入文字和在图片加上文字，现在 简单的跟大家说一下：1把图片放在文字的左边：在图片右边写文字的源代码：P IMG height=201 hspace=30 src=图片连接地址width=154 align=leftborder=0 FONT face=Arial 你要输入的文字 /FONT/P height=是图片高 度,width=是图片宽度,hspace=是与文字之间的距离，可以自己调整数值，2把图片放在文字的右边在图片左边写字的源代码：P IMG height=201 hspace=30 src=图片连接地址width=154a

2、lign=right border=0 FONT face=Arial你要输入的文字 /FONT/P height=是图片高度,width=是图片宽度,hspace=是与文字之间的距离，可以自己调整数值3图片上写字代码DIV/DIV DIV alig n=ce nter TABLE height=300 width=400 TBODY TR TD style=BACKGROUND-POSITIONsenter center ； BACKGROUND-REPEAL repeatvAlign=center align=middle background=图片地址 FONTcolor=#ff0000

3、 文字 BR文字/FONT BR/TD/TR/TBODY/TABLE/DIV DIV/DIV实例:看到现在页面的效果了吗？让图片和文字左右分开排列，有的时候真的是很 需要这个效果。其实处理起来很简单，使用一小段代码就可以了。代码：img src=图片地址align=left用法：在显示源代码状态下（打勾）粘贴上面的代码一一用你的图片地址 代替上面的文字一一恢复到正常编辑状态一一在图片另一侧编辑文字。如果你想把图片放在文字的右侧，可以用这个代码：img src=图片地址alig n=right有的图片比较大，用起来不方便，所以我改了一下代码，可以更改图片的大小，代码是这样的：img src=图片

4、地址width=250 height=200alig n=left红色的数字可以根据自己的需要更改。一、在任意图片上写字的代码：1、 首先将要在上面写文章的图片上传，得到URL地址，然后将得到的URL 地址带入到以下代码中TABLE width=650 cellSpaci ng=1 cellPadd in g=1 bgColor=#005F01border=1 TBODY TR TD backgrou nd=蓝色：为图片地址粉色：为图片宽度绿色：为框的颜色代码（不需要框，将1改为0）2、将鼠标放在图片上按回车键任意选择长度，直接复制图片在底图上。3、再设定文本框在图片里，设定文本框宽度，在文本

5、框里直接书写文章。、在任意照片上写字的代码:1、 首先将要在上面写文章的图片上传，得到URL地址，然后将得到的URL 地址带入到以下代码中TABLE width=500 cellSpaci ng=1 cellPadd in g=1 height=375 border=1TBODY TR TD backgrou nd=蓝色：为图片地址粉色：为图片宽度绿色：为图片的高度（不需要框，将1改为0）2、再设定文本框在图片里，设定文本框宽度，在文本框里直接书写文章。3、文本框里的1 一定要改成0。三、在照片上全屏移动文字的代码：TABLE borderColor=#cd5c5c height=600 wi

6、dth=650 alig n=cen ter border=3 TBODY TR TD backgrou nd=MARQUEE scrollAm oun t=3 directi on=dow n behavior=alter nateheight=400 MARQUEE scrollAmou nt=3 behavior=alternate width=500Palign=center FONT color=red size=6 B 图片上的文字 /B/FONT/P/MARQUEE/MARQUEE/TD/TR/TBODY/TABLE单击文字，调整文字飘动范围！width为浮动文字框架的宽度；he

7、ight为浮动文字框架的高度；color=red表示文字颜色为红色（请在网上查询颜色代码再修改。图片上的文字在照片上由下往上移动文字的代码：TABLE height=500 width=650 backgrou nd=border=0 TBODY TR TDalig n=middle MARQUEE scrollAmou nt=2 directio n=up height=200 CENTERFONT style=FONT-SIZE: 32ptface=华文新魏 color=red B 加入文字/B/FONT/CENTER/MARQUEE/TD/TR/TOBDY/TBODY/TABLE CEN

8、TER/CENTER蓝色：为照片地址；红色：照片高度；粉色：照片宽度；绿色：加入文字。加入文字在照片旁边写文字的代码：图片靠左边的代码，这样文字就可以写在图片的右边了！P IMG src=图片连接地址height=100 width=100 align=left 文章内容BR BR clear=left/P代码说明：height=100 width=100 是图片的高和宽实际上不用调整数值，单击图片就可以拉动图片修改大小！alig n=left文字在右边图在左边修改成 alig n=right 文字在左边图在右边在照片上由下往上移动文字走走停停的代码：DIV align=center FIEL

9、DSET style=WIDTH : 336px； HEIGHT 302pxDIV align=center MARQUEE style=WIDTH : 280px; HEIGHT240pxscrollAm oun t=1 direct ion=up behavior=alter nate width=210height=240 EMBED style=FILTER : invert()； WIDTH 70px； HEIGHT25pxsrc=type=audio/mpeg volume=0loop=trueautostart=teueShowStatusBar=1MARQUEE style=W

10、IDTH288px; HEIGHT 154pxscrollAmount=1direction=up width=288 height=154 FONT style=FONT-SIZE : 13pt; FILTER Alpha(opacity=100,style=2)face=华文行楷 color=#abc111 FONT size=4 图片上的文字/FONT/FONT/MARQUEE/MARQUEE/DIV/FIELDSET/DIV文章滚动条代码滚动条样式主要涉及到如下CSS属性：overflow属性：检索或设置当对象的内容超过其指定高度及宽度时如何显 示内容overflow : auto ;

11、在需要时内容会自动添加滚动条overflow : scroll ;总是显示滚动条overflow-x : hidden ;禁止横向的滚动条overflow-y : scroll ;总是显示纵向滚动条width : 568px； width : 98%设置区域的宽度像素/百分比等等height : 120px；设置区域的高度像素/百分比等等scrollbar-base-color : #006699;设置基色设置该选项后可以不设置下面的属性，浏览器会依据基色自动调整scrollbar-track-color : rgb(10,100,254);底板轨迹颜色scrollbar-3dlight-co

12、lor:;上 /左边沿亮边颜色scrollbar-arrow-color:;两端箭头颜色scrollbar-darkshadow-color :; 下 / 右边沿颜色 scrollbar-face-color :;表面颜色scrollbar-highlight-color :;上 / 左斜面亮边框颜色 scrollbar-shadow-color :;下/右斜面暗边框颜色 颜色设置可参考下列工具：我们可以改变上边的颜色代码部分，自定义出自己喜欢的样式。要选择CSS的方式输出代码，得到的代码要经过更改，我们只要颜色的设置部分。如生成：style BODYSCROLLBAR-ARROW-CQLOR

13、FFFFF SCROLLBAR-FACE-COLOROFFOO;SCROLLBAR-DARKSHADOW-CQDGFFOO;SCROLLBAR-HIGHLIGHT-COLOROFFOOSCROLLBAR-3DLIGHT-COLOFFOO;SCROLLBAR-SHADOW-COLORFFOOSCROLLBAR-TRACK-CQLORCCCCC/style我们只要括号里的东西。SCROLLBAR-ARROW-COI#FRFFFFSCROLLBAR-FACE-COLOROFFOO;SCROLLBAR-DARKSHADOW-C(#DGFFOO;SCROLLBAR-HIGHLIGHT-COLOROFFO

14、0SCROLLBAR-3DLIGHT-COLOFFOO;SCROLLBAR-SHADOW-COLORFFOQscrollbar-track-cqlorccccc标准的滚动条代码：div style=overflow : auto ； width : 98% height : 100px； line-height 15px； border-width : 1px ； border-color : #ffccff ; border-style : dotted ; scrollbar-base-color : #ff66ff ; scrollbar-face-color : none； scrol

15、lbararrow-color :none； scrollbar-track-color : #ffefff ； scrollbar-3dlight- color : #ffffff ； scrollbar-darkshadow-color : #ffffff ； scrollbarhighlight-color : #f5d8f5 ； scrollbar-shadow-color : #e5c8e5br/div这里为文字输入区br/这里为文字输入区br/这里为文字输入区br/这 里为文字输入区br/这里为文字输入区br/br/br/div/div文字滚动的公告栏代码、代码：CENTER TA

16、BLE width=190 border=O TBODY TR TD backgro un d=t 景图片地 址（也可不放背景图片）DIV align=center DIV style=OVERFLOW : auto ; WIDTH 159px; HEIGHT 145pxP alig n=cen ter MARQUEE scrollAmou nt=1 scrollDelay=60 directio n=up height=60 FONT color=#ff0000 size=3公告内容br各位博友：br由于时间的关系br不能回复br请原谅/FONT/MARQUEE/P/DIV/DIV/TD/T

17、R/TBODY/TABLE/CENTER二、效果：公告内容各位博友：由于时间的关系不能一一回复请原谅一、左图右文混排代码：TABLE style=BORDER-COLLAPSEsollapsecellSpaci ng=0cellPaddi ng=0 width=410 border=0 TBODY TR TD width=197 IMG height=150 src=图片地址width=200 border=0/TD TD vAlign=top width=200 rowSpan=3 Palign=right FONT color=#808080 BR这里写文字 BR./FONT FONTsize=2/FONT/P Palig n=left/P/TD/TR/TBODY/TABLE说明：1.height=是图片高度,width=是图片宽度2.br是换行。FONT size=2代表字体的大小，数字越大，二、看看效果吧：AAAAAAAAAAAAAAA