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

文字与图片的几种排版用法常常有朋友问我怎么在图片左边和右边插入文字和在图片加上文字，现在简单的跟大家说一下：1把图片放在文字的左边：在图片右边写文字的源代码：P IMG height=201 hspace=30 src=图片连接地址width=154 align=left border=0 FONT face=Arial你要输入的文字/FONT/P height=是图片高度,width=是图片宽度,hspace=是与文字之间的距离，可以自己调整数值,=2把图片放在文字的右边在图片左边写字的源代码：P IMG height=201 hspace=30 src=图片连接地址width=154 align=right border=0 FONT face=Arial你要输入的文字/FONT/P height=是图片高度,width=是图片宽度,hspace=是与文字之间的距离，可以自己调整数值=3图片上写字代码DIV/DIV DIV align=center TABLE height=300 width=400 TBODY TR TD style=BACKGROUND-POSITION：center center；BACKGROUND-REPEAT：no-repeatvAlign=center align=middle background=图片地址FONT color=#ff0000文字BR文字/FONT BR/TD/TR/TBODY/TABLE/DIV DIV/DIV=实例：看到现在页面的效果了吗?让图片和文字左右分开排列，有的时候真的是很需要这个效果。其实处理起来很简单，使用一小段代码就可以了。代码：img src=图片地址align=left用法：在显示源代码状态下(打勾)粘贴上面的代码用你的图片地址代替上面的文字恢复到正常编辑状态在图片另一侧编辑文字。如果你想把图片放在文字的右侧，可以用这个代码：img src=图片地址align=right有的图片比较大，用起来不方便，所以我改了一下代码，可以更改图片的大小，代码是这样的：img src=图片地址width=250 height=200 align=left红色的数字可以根据自己的需要更改。=一、在任意图片上写字的代码：1、首先将要在上面写文章的图片上传，得到URL地址，然后将得到的URL地址带入到以下代码中TABLE width=650 cellSpacing=1 cellPadding=1 bgColor=#005F01 border=1 TBODY TR TD background=蓝色：为图片地址粉色：为图片宽度绿色：为框的颜色代码(不需要框，将1改为0)2、将鼠标放在图片上按回车键任意选择长度，直接复制图片在底图上。3、再设定文本框在图片里，设定文本框宽度，在文本框里直接书写文章。二、在任意照片上写字的代码：1、首先将要在上面写文章的图片上传，得到URL地址，然后将得到的URL地址带入到以下代码中TABLE width=500 cellSpacing=1 cellPadding=1 height=375 border=1 TBODY TR TD background=蓝色：为图片地址粉色：为图片宽度绿色：为图片的高度(不需要框，将1改为0)2、再设定文本框在图片里，设定文本框宽度，在文本框里直接书写文章。3、文本框里的1一定要改成0。三、在照片上全屏移动文字的代码：TABLE borderColor=#cd5c5c height=600 width=650 align=center border=3 TBODY TR TD background=MARQUEE scrollAmount=3 direction=down behavior=alternate height=400 MARQUEE scrollAmount=3 behavior=alternate width=500 Palign=center FONT color=red size=6 B图片上的文字/B/FONT/P/MARQUEE/MARQUEE/TD/TR/TBODY/TABLE单击文字,调整文字飘动范围！width为浮动文字框架的宽度；height为浮动文字框架的高度；color=red表示文字颜色为红色(请在网上查询颜色代码再修改。图片上的文字在照片上由下往上移动文字的代码：TABLE height=500 width=650 background=border=0 TBODY TR TD align=middle MARQUEE scrollAmount=2 direction=up height=200 CENTER FONT style=FONT-SIZE：32ptface=华文新魏color=red B加入文字/B/FONT/CENTER/MARQUEE/TD/TR/TOBDY/TBODY/TABLE CENTER/CENTER蓝色：为照片地址；红色：照片高度；粉色：照片宽度；绿色：加入文字。加入文字在照片旁边写文字的代码：图片靠左边的代码,这样文字就可以写在图片的右边了！P IMG src=图片连接地址height=100 width=100 align=left文章内容BR BR clear=left/P代码说明：height=100 width=100是图片的高和宽实际上不用调整数值，单击图片就可以拉动图片修改大小！align=left文字在右边图在左边修改成align=right文字在左边图在右边在照片上由下往上移动文字走走停停的代码：DIV align=center FIELDSET style=WIDTH：336px；HEIGHT：302pxDIV align=center MARQUEE style=WIDTH：280px；HEIGHT：240pxscrollAmount=1 direction=up behavior=alternate width=210 height=240 EMBED style=FILTER：invert()；WIDTH：70px；HEIGHT：25pxsrc=type=audio/mpeg volume=0loop=trueautostart=teueShowStatusBar=1MARQUEE style=WIDTH：288px；HEIGHT：154pxscrollAmount=1 direction=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；在需要时内容会自动添加滚动条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-color：；上/左边沿亮边颜色scrollbar-arrow-color：；两端箭头颜色scrollbar-darkshadow-color：；下/右边沿颜色scrollbar-face-color：；表面颜色scrollbar-highlight-color：；上/左斜面亮边框颜色scrollbar-shadow-color：；下/右斜面暗边框颜色颜色设置可参考下列工具：我们可以改变上边的颜色代码部分，自定义出自己喜欢的样式。要选择CSS的方式输出代码，得到的代码要经过更改，我们只要颜色的设置部分。如生成：style BODYSCROLLBAR-ARROW-COLOR：#FFFFFF；SCROLLBAR-FACE-COLOR：#00FF00；SCROLLBAR-DARKSHADOW-COLOR：#00FF00；SCROLLBAR-HIGHLIGHT-COLOR：#00FF00；SCROLLBAR-3DLIGHT-COLOR：#00FF00；SCROLLBAR-SHADOW-COLOR：#00FF00；SCROLLBAR-TRACK-COLOR：#CCCCCC；/style我们只要括号里的东西。SCROLLBAR-ARROW-COLOR：#FFFFFF；SCROLLBAR-FACE-COLOR：#00FF00；SCROLLBAR-DARKSHADOW-COLOR：#00FF00；SCROLLBAR-HIGHLIGHT-COLOR：#00FF00；SCROLLBAR-3DLIGHT-COLOR：#00FF00；SCROLLBAR-SHADOW-COLOR：#00FF00；SCROLLBAR-TRACK-COLOR：#CCCCCC；标准的滚动条代码：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；scrollbar-arrow-color：none；scrollbar-track-color：#ffefff；scrollbar-3dlight-color：#ffffff；scrollbar-darkshadow-color：#ffffff；scrollbar-highlight-color：#f5d8f5；scrollbar-shadow-color：#e5c8e5br/div这里为文字输入区br/这里为文字输入区br/这里为文字输入区br/这里为文字输入区br/这里为文字输入区br/br/br/div/div=文字滚动的公告栏代码一、代码：CENTER TABLE width=190 border=0 TBODY TR TD background=背景图片地址(也可不放背景图片)DIV align=center DIV style=OVERFLOW：auto；WIDTH：159px；HEIGHT：145pxP align=center MARQUEE scrollAmount=1 scrollDelay=60 direction=up height=60 FONT color=#ff0000 size=3公告内容br各位博友：br由于时间的关系br不能一一回复br请原谅/FONT/MARQUEE/P/DIV/DIV/TD/TR/TBODY/TABLE/CENTER二、效果：公告内容各位博友：由于时间的关系不能一一回复请原谅=一、左图右文混排代码：TABLE style=BORDER-COLLAPSE：collapsecellSpacing=0 cellPadding=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 FONT size=2/FONT/P Palign=left/P/TD/TR/TBODY/TABLE说明：1.height=是图片高度,width=是图片宽度2.br是换行。FONT size=2代表字体的大小，数字越大，二、看看效果吧：AAAAAAAAAAAAAAAAAAAAAAAAA