当前位置:文档之家› 文字与图片的几种排版用法

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

文字与图片的几种排版用法常常有朋友问我怎么在图片左边和右边插入文字和在图片加上文字,现在简单的跟大家说一下: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=154align=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-repeat"vAlign=center align=middle background=图片地址FONTcolor=#ff0000文字BR文字/FONT BR/TD/TR/TBODY/TABLE/DIV DIV/DIV ==实例:看到现在页面的效果了吗?让图片和文字左右分开排列,有的时候真的是很需要这个效果。

其实处理起来很简单,使用一小段代码就可以了。

代码:img src="图片地址"align="left"用法:在"显示源代码"状态下(打勾)粘贴上面的代码――用你的图片地址代替上面的文字――恢复到正常编辑状态――在图片另一侧编辑文字。

如果你想把图片放在文字的右侧,可以用这个代码:img src="图片地址"align="right"有的图片比较大,用起来不方便,所以我改了一下代码,可以更改图片的大小,代码是这样的:img src="图片地址"width=250 height=200align="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=alternateheight=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 TDalign=middle MARQUEE scrollAmount=2 direction=up height=200 CENTER FONT style="FONT-SIZE:32pt"face=华文新魏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:302px"DIV align=center MARQUEE style="WIDTH:280px;HEIGHT:240px"scrollAmount=1 direction=up behavior=alternate width=210height=240 EMBED style="FILTER:invert();WIDTH:70px;HEIGHT:25px"src=type=audio/mpegvolume="0"loop="true"autostart="teue"ShowStatusBar="1"MARQUEE style="WIDTH:288px;HEIGHT:154px"scrollAmount=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;在需要时内容会自动添加滚动条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 BODY{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;}/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:#e5c8e5"br/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:145px"P 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:collapse"cellSpacing=0cellPadding=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 Palign=left/P/TD/TR/TBODY/TABLE说明:1.height=是图片高度,width=是图片宽度2.br是换行。

相关主题