天涯部落

小圈子，大声音！呼朋引伴网聚部落！

从零启步学代码【三】

此帖绝对不能点击“编辑”“不能编辑”两个按钮。否则，帖子中的示范代码就没有了，只剩下效果了。切记！！！

欢迎您！启步学代码

（原创编辑:游子。供初学HTML代码的朋友参考）

文字显示位置的控制

文字显示位置分别为：

水平方向（align），垂直方向（valign）
水平方向即左中右：
left（左对齐）
center（居中）
RIGHT（右对齐）

垂直方向即靠顶和靠底.

top（靠顶）、bottom（靠底）等。

水平方向即左中右的代码：

原创编辑:游子。
　

显示效果如下：

向左对齐

表示居中

向右对齐

实例：

送给春兰妹妹

祝你生日快乐！

大姐冬梅
20060228

实例代码：

<CENTER>
<TABLE width=480 height=320 bordercolor=olive background=http://img3.laibafile.cn/p/l/116936644.jpg border=18>
<TBODY>
<TR>
<td align=center valign=top><br>
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#ff00ff><B>
<p align=left>送给春兰妹妹</P><br>
<p align=CENTER>祝你生日快乐！</P><BR><BR>
<p align=RIGHT>大姐冬梅<br>20060228</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）和(/TD)，方便易用。实例如下：

居左靠顶的代

align=LEFT valign=top

居中靠顶的代码

align=center valign=top

居右靠底的代码

align=RIGHT valign=bottom

代码：

<BR>
<CENTER>
<TABLE width=480 height=320 bordercolor=olive background=http://img3.laibafile.cn/p/l/116936645.jpg border=18>
<TR>
<TD>
<TABLE width=460 height=320 bordercolor=olive border=0>
<TR>
<TD align=LEFT valign=top height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B> </FONT></TD></TR>
<TR>
<TD align=center valign=top height=160><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居中靠顶的代码<BR><h3>align=center valign=top</h3></B> </FONT></TD></TR>
<TR>
<TD align=RIGHT valign=bottom height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居右靠底的代码<BR><h3>align=RIGHT valign=bottom</h3></B> </FONT>
</TD></TR></TABLE>
</TD></TR></TABLE></CENTER>

　　【说明】
　　◇垂直方向设置必须在表格的单元格里（TD）和(/TD)。
　　◇本实例在图框内插入一张空表格，分为三横排。
　　◇根据各行插入内容设置高度。
　　◇在一张表格中，设置每一行的关键语句。
　　行的开始标签：
<TR>
<TD align=center valign=top height=160>
插入内容
　　行的结束标签：
</TD></TR>

原创编辑:游子。
　

文字（或图片）放置的地位，
还可以用空格（ ）和空行（BR）调整；
用代码编辑绝对位置挂贴（外部定位）等办法。

举报 |

| 收藏 | 更多 | 楼主回复

楼主：人间惆怅客SD 时间：2012-09-11 00:07:53

举报 | 收藏 | 1楼 | 打赏 | 评论

作者：枫叶Fs 时间：2012-09-11 12:54:56

　　好喜欢这个编辑，谢谢惆怅啦！辛苦了。。。

举报 | 收藏 | 2楼 | 打赏 | 评论

作者：星连193 时间：2012-09-11 13:42:42

　　现在才知道为什么老师有工资拿，而学生没有。

举报 | 收藏 | 3楼 | 打赏 | 评论

作者：2012雨中的邂逅时间：2012-10-02 17:09:21

　　好学习

举报 | 收藏 | 4楼 | 打赏 | 评论

作者：偷笑的兔子时间：2012-10-10 15:54:39

　　老师您辛苦了！学习，问好！

举报 | 收藏 | 5楼 | 打赏 | 评论

作者：孤客在路上时间：2012-12-12 20:05:18

　　学习了。

举报 | 收藏 | 6楼 | 打赏 | 评论

作者：不与莉花同梦时间：2013-05-24 10:23:09

　　我这脑子，只能一步步来了。

举报 | 收藏 | 7楼 | 打赏 | 评论

作者：花若怜_泪涧成线时间：2013-07-12 16:57:46

　　O(∩_∩)O谢谢楼主！！！

举报 | 收藏 | 8楼 | 打赏 | 评论

天涯部落

从零启步学代码【三】

align=LEFT valign=top

align=center valign=top

align=RIGHT valign=bottom

相关推荐