HTML学习笔记☆定位代码应用

吉祥如意988 2014-06-11

展开全文

HTML学习笔记☆定位代码应用

一、页面上要在那一个位置插入文字或图片等内容，有三种方法：

第一，是在标签中用定位属性赋予属值。

第二，是用表格多行多列，在单元格内插入内容。

第三，是html标签行内套用css语句，设置绝对定位加叠内容。

二、定位有二种属性内容并各有三种属值：　

定位属性内容：水平方向 align 和垂直方向 valign。　

水平方向align有三种属值：left 左对齐，center 居中，right 右对齐。

垂直方向valign有三种属值：top 靠顶，middle 中部， bottom 靠底。

三、定位代码语法表达式：

<p 定位属性=属值>定位代码模式1</p>

<div 定位属性=属值>定位代码模式2</div>

在段落标签<p>或块区标签<div>中运用属性赋予属值来控制需要定位的内容到指定的位置。

四、水平方向左、中、右定位：

1、居左对齐代码与效果：

代码：

效果：

我居左对齐

2、居中对齐代码与效果：

代码：

<align=center>居中对齐</P>或<p style="text-align:center">居中对齐</p>

效果：

我居中对齐

3、居右对齐代码与效果：

代码：

效果：

我居右对齐

4、图片居左对齐代码与效果：

代码：

效果：

5、图片居中对齐代码与效果：

代码：

效果：

6、图片居右对齐代码与效果：

代码：

效果：

五、垂直方向顶部、中部、底部定位：

垂直方向顶部、中部、底部定位与水平方向左、中、右定位，可以构成多种位置指令，垂直定位代码必须加在表格的列标签<td>中才有效，一个单元格中只能执行一条指令。

代码模式定位指令与解析：

<td align=left valign=top>★水平方向=居左，垂直方向=居左顶部。

<td align=center valign=top>★水平方向=居中，垂直方向=居中顶部。

<td align=right valign=top>★水平方向=居右，垂直方向=居右顶部。

<td align=left valign=bottom>★水平方向=居左，垂直方向=居左底部。

<td align=center valign=bottom>★水平方向=居中，垂直方向=底部。

<td align=right valign=bottom>★水平方向=居右，垂直方向=底部。

综合练习代码与效果：

代码：

<DIV>
<P align=center>
<TABLE borderColor=#ffd700 cellPadding=4 width=550

align=center background=背景图片地址

heirght="450" cellspacing="4" boeder="1">
<TBODY>
<TR>
<TD height=50 vAlign=top align=left>
<DIV><FONT face="楷体" color=#ff0000 size=4><B>春天没来老师：

</B></FONT><BR></DIV></TD>
<TR>
<TD vAlign=middle align=center hright="200"><FONT face="楷体"

color=#ffff00 size=5><B>祝誉满图书馆
贺桃李满天下</B></FONT>
<TR>
<TD height=80 vAlign=bottom align=right><FONT face="楷体"

color=#ff0000 size=4><B>吉祥如意988<BR>2014年6月</B>

</FONT></TD></TR></TBODY></TABLE></P></DIV>

效果：

春天没来老师：

祝誉满图书馆
贺桃李满天下

吉祥如意988
2014年6月

六、移动标签中移动屏幕定位方式:

居左向上、居中向下、居右向上的移动代码与效果：

代码：

<marquee align=left direction=up scrollamount=3><font color=#ffffff size=4 face="楷体">吉祥如意欢迎您<br>吉祥如意欢迎您<br>吉祥如意欢迎您<br>吉祥如意欢迎您</marquee> <marquee align=center direction=down scrollamount=3><font color=#ffffff size=4 face="楷体">吉祥如意欢迎您<br>吉祥如意欢迎您<br>吉祥如意欢迎您<br>吉祥如意欢迎您</marquee> <marquee align=right direction=up scrollamount=3><font color=#ffffff size=4 face="楷体">吉祥如意欢迎您<br>吉祥如意欢迎您<br>吉祥如意欢迎您<br>吉祥如意欢迎您</marquee>

效果：

吉祥如意欢迎您
吉祥如意欢迎您
吉祥如意欢迎您
吉祥如意欢迎您吉祥如意欢迎您
吉祥如意欢迎您
吉祥如意欢迎您
吉祥如意欢迎您吉祥如意欢迎您
吉祥如意欢迎您
吉祥如意欢迎您
吉祥如意欢迎您

七、表格标签中的定位方式：

1、居左对齐的表格代码与效果：

代码：

效果：

插入内容

2、居中对齐的表格代码与效果：

代码：

效果：

插入内容

3、居右对齐的表格代码与效果：