一步一步学代码---文字处理(文字显示位置的控制)[连载3]

月下独酌

一步一步学代码---文字处理(文字显示位置的控制)[连载3]

[ 录入者:没起名 | 时间:2007-09-13 23:14:00 | 作者:没起名 个人文集 | 来源: | 浏览:52次 ]

一  文字处理     2 文字显示位置的控制 文字显示位置分别为： 水平方向（align），垂直方向（valign） 水平方向即左中右： left（左对齐） CENTER（居中） RIGHT（右对齐） 垂直方向即靠顶和靠底. top（靠顶）、bottom（靠底）等。 举例如下： 水平方向即左中右的代码： <p align=left><font style=font:15pt face=黑体 color=fff000>向左对齐</font></P> 显示效果如下： 向左对齐 <p align=CENTER><font style=font:15pt face=黑体 color=fff000>表示居中</font></P> 显示效果如下： 表示居中 <p align=RIGHT><font style=font:15pt face=黑体 color=fff000>向右对齐</font></P> 显示效果如下：  向右对齐 应用举例  祝你进步 祝你幸福！ 没起名  代码如下： <CENTER> <TABLE borderColor=olive height=425 width=555 background=http://cache19.51.com/photo/6c/ed/huang8168/200511251226574.jpg border=8> <TBODY> <TR> <TD vAlign=top align=middle><BR><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B> <P align=left>祝你进步</P><BR> <P align=center>祝你幸福！</P><BR><BR><BR><BR> <P align=right>没起名</P></B></FONT></TD></TR></TOBDY></TBODY></TABLE></CENTER>  垂直方向valign）靠顶的代码： <TD align=LEFT valign=top>居左靠顶</TD> <TD align=center valign=top>居中靠顶</TD> <TDalign=RIGHT valign=top>居右靠顶</TD> 垂直方向valign）靠底的代码： <TD align=LEFT valign=bottom>居左靠底</TD> <TD align=center valign=bottom>居中靠底</TD> <TD align=RIGHT valign=bottom>居右靠底</TD>    文字输出位置垂直方向的代码是设置在单元格里（TD），方便易用。 应用举例： 居左靠顶的代码  代码如下：  <CENTER> <TABLE borderColor=olive height=350 width=480 background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18> <TBODY> <TR> <TD vAlign=top align=left><FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>居左靠顶的代码<BR></FONT></B></TD></TR></TOBDY></TBODY></TABLE></CENTER><BR><BR>  文字（或图片）放置的地位， 还可以用空格和空行（BR）等办法调整。   练习:     1 按个人爱好按水平方向即左中右的代码、垂直方向靠顶和靠底的代码，显示出你用代码做的文字。并给出你所用的全部代码。     1 按个人爱好按水平方向即左中右的代码、垂直方向靠顶和靠底的代码，显示出你用代码做的文字。并给出你所用的全部代码。                2 在一个图片上添加你要的文字及显示位置。  注意：     在所选的图片上点右键--属性，出来的画面上有图片的地址和图片的宽和高的尺寸，这些要记下！用你的图片尺寸代替上面第一个“应用举例”中的宽度（555）和高度（425）；用你的图片地址代替其中的ttp://cache19.51.com/photo/6c/ed/huang8168/200511251226574.jpg             用你的文字代替其中的“祝你进步”等。其余可不动（套用！） 教材编写：没起名 熟能生巧，要多加练习哦！

寒香

谢谢楼主！

月下独酌

一步一步学代码---文字处理(文字编辑几种常用代码语句)[连载5]

[ 录入者:没起名 | 时间:2007-09-15 17:41:10 | 作者:没起名 个人文集 | 来源: | 浏览:50次 ]

一  文字处理     4 文字编辑几种常用代码语句 掌握HTML语法中的分隔标签非常有必要，娴熟地 应用分隔标签，能令帖子可读性强、外观整洁漂亮。 文字编辑常用代码语句： <BR> 换行标记一个<BR>令文字显示于下一行，二个<BR>留一空白行。 <p>文字编辑 段落标记 令文字之间留一空白行。 用键盘的空格可令文字之间留一空隔。 <b> 令字体加粗</b>（双标签） <u> 令文字加上底线</u>（双标签） <CENTER> 居中 令字、画、表格等显示于中间</CENTER>（双标签） 对<BR> 换行标记，即强行换行指令的认识。 下面这首李白的诗，在输入编辑时虽然有分行，但无用强行换行<BR>标签，由于系统有顺延功能作用，所以仍然是从左侧顺延联成一片显示出来。 先看文字设置无换行标记的一组代码：  <P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=#fff000> 《 望庐山瀑布》 李 白 日照香炉生紫烟，遥看瀑布挂前川。 飞流直下三千尺，疑是银河落九天。 </P></FONT> 显示效果是联成一片。 《 望庐山瀑布》 李 白日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。 再看文字编辑时，在要断行的地方加入<BR>分隔标签的一组代码： <P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=lime> 《 望庐山瀑布》 李 白<BR><BR> 日照香炉生紫烟，遥看瀑布挂前川。<BR> 飞流直下三千尺，疑是银河落九天。<BR> </P></FONT> 显示效果: 《 望庐山瀑布》 李 白 日照香炉生紫烟，遥看瀑布挂前川。 飞流直下三千尺，疑是银河落九天。   在页面上文字显示位置的实例。 《 望庐山瀑布》 李 白 日照香炉生紫烟，遥看瀑布挂前川。 飞流直下三千尺，疑是银河落九天。 《 望庐山瀑布》 李 白 日照香炉生紫烟，遥看瀑布挂前川。 飞流直下三千尺，疑是银河落九天。 《 望庐山瀑布》 李 白 日照香炉生紫烟，遥看瀑布挂前川。 飞流直下三千尺，疑是银河落九天。 在页面上文字显示位置的实例的一组代码： <P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 15pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=lime> <P align=LEFT>   《 望庐山瀑布》 李 白<BR><BR> 日照香炉生紫烟，遥看瀑布挂前川。<BR> 飞流直下三千尺，疑是银河落九天。<BR></P> <BR><BR> <P align=center> 《 望庐山瀑布》 李 白<BR><BR>      <BR> 日照香炉生紫烟，遥看瀑布挂前川。<BR> 飞流直下三千尺，疑是银河落九天。<BR></P> <BR><BR> <P align=RIGHT> 《 望庐山瀑布》 李 白      <BR><BR> 日照香炉生紫烟，遥看瀑布挂前川。<BR> 飞流直下三千尺，疑是银河落九天。</P><BR> </FONT> <BR> 说明：文字显示位置的关键代码语句。 <P align=LEFT>左对齐</P> <P align=center>居中</P> <P align=RIGHT>右对齐</P> 注意这三个代码都是双标签，要成对使用。  练习：选择一首七律诗词，按行排在页面中间、靠左、靠右位置等显示出你用代码做的文字。并给出你所用的全部代码。 注意：上述代码中的字的颜色在本图框内不太清楚，故将显示后的颜色改成了红色了！         熟能生巧，要多加练习哦！

月下独酌

一步一步学代码---文字处理(文字移动属性的设置)[连载4]

[ 录入者:没起名 | 时间:2007-09-13 23:16:34 | 作者:没起名 个人文集 | 来源: | 浏览:62次 ]

一  文字处理     3 文字移动属性的设置 <marquee>内容文字或图片</marquee> 上面是最简单的移动标签。把它复制粘贴发表结果如下： 内容文字或图片 移动属性值主要的有几个内容： 移动方向 <direction=#> 速度 <scrollamount=#> 方式 <bihavior=#> 循环 <loop=#> 延时 <scrolldelay=#> 方向和速度。 移动方向 direction=left 从右向左移 direction=right 从左向右移 direction=down 从上向下移 direction=up 从下向上移 移动代码:-文字从右向左移 <marquee direction=left scrollAmount=2> <font style=font:15pt face=黑体 color=fff000> 文字从右向左移！</font></marquee> 显示效果： 文字从右向左移！ 移动方向-文字从左向右移的代杩。 <marquee direction=right scrollAmount=2> <font style=font:15pt face=黑体 color=fff000> 文字从左向右移！！</font></marquee> 显示效果： 文字从左向右移！ 移动方向-文字从上向下移的代码：。 <marquee direction=direction=down scrollAmount=2> <font style=font:15pt face=黑体 color=fff000><CENTER> 文字从上向下移！！</font></CENTER></marquee> 显示效果： 文字从上向下移！！ 移动方向-文字从下向上移！的代码：。 <marquee direction=up scrollAmount=2> <font style=font:15pt face=黑体 color=fff000> 文字从下向上移！！！</font></marquee> 显示效果： 文字从下向上移！！ 文字来回走代码: <marquee behavior=alternate scrollAmount=8> <font style=font:15pt face=黑体 color=fff000> 文字来回走耶！！！</font></marquee> 显示效果： 文字来回走耶！！ 移动速度 <scrollamount=#> 移动速度设置数值小就走得慢的代码： <marquee direction=left scrollAmount=2> <font style=font:15pt face=黑体 color=fff000> 移动速度设置数值小就走得慢！！</font></marquee> 显示效果： 移动速度设置数值小就走得慢！！ 移动速度设置数值大就走得快！的代码： <marquee direction=left scrollAmount=8> <font style=font:15pt face=黑体 color=fff000>移动速度设置数值大就走得快！！</font></marquee> 显示效果： 移动速度设置数值大就走得快！！ 文字上下移动代码： <font size=5 face=隶书 color=lime> <MARQUEE scrollAmount=5 direction=up behavior=alternate height=60> <center> 文字上下移动</center></marquee>    文字上下移动 应用举例：文字图片走四方                   欣赏文字图片走四方 代码如下： <DIV align=left> <TABLE borderColor=#fff000 height=350 cellSpacing=1 cellPadding=10 width=450 border=3> <TBODY> <TR> <TD bgColor=#000000> <MARQUEE scrollAmount=3 direction=down behavior=alternate height=350> <MARQUEE style="WIDTH: 414px; HEIGHT: 132px" scrollAmount=3 behavior=alternate width=414><IMG src="http://www.dabaoku.com/gif/164/gif001.gif"> <FONT color=#fff000 size=3><B>欣赏文字图片走四方</B></FONT></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></DIV>    练习：1 选择你要的文字按从右向左移、从左向右移、从上向下移、从下向上移、文字来回走等显示出你用代码做的文字。并给出你所用的全部代码。         2  用你在论坛里的头像图片（或其它小图片）并在图片后面加上你的做个“文字图片走四方”的图。  注意：要更改“应用举例”中的图片地址，若有需要还要更改相应的尺寸！试验一下吧。 熟能生巧，要多加练习哦！

但愿人人都会制作自己钟爱的音画帖子。

雪舞红梅

但愿人人都可以制作自己钟爱的音画帖。

[em14][em14]