代码入门教程（22）

第二章标签应用

第二十九节定位标签应用（1）

从本节开始讲解定位标签的应用。下面讲解三个方面的内容：一、常用的四种定位标签，二、对齐方式在段落标签、块区标签、表格标签中的应用,三、css中的绝对定位与相对定位。

在网页制作中，常常用到定位标签。

一、常用的四种定位标签：

（一）水平方向定位：

水平方向（align）定位有三种属值：left（左） center（中） right（右）

表达方式： align=left （居左对齐） align=center （居中对齐） align=right（居右对齐）

（二）垂直方向定位：

垂直方向（valign）定位有三种属值：top（靠顶）middle(居中) bottom（靠底）

表达方式： valign=top（靠顶对齐） valign=middle(中部对齐) valign=bottom（靠底对齐）

（三）垂直方向和水平方向结合定位：（可构成八种定位指令）

1、靠顶top的不同水平位置代码：

< align=LEFT valign=top>居左靠顶

< align=center valign=top>居中靠顶

< align=right valign=top>居右靠顶

2、居中的不同水平位置代码：

<align=LEFT valign=middle>居左居中

<align=center valign=middle>居中居中

<align=right valign=middle>居右居中

3、靠底bottom的不同水平位置代码：

<align=LEFT valign=bottom>居左靠底

<align=center valign=bottom>居中靠底

<align=right valign=tbottom>居右靠底

（四）居中标签： <center>

居中标签<center>常常作为一个单独的标签使用，而“水平方向定位”和“垂直方向定位”的标签则常常作为其它标签的属性与属值使用。

二、对齐方式在段落标签、块区标签、表格标签等标签中的应用：

常用的对齐方式是水平对齐方式。现举例如下：

（一）“段落”标签<p>中文字对齐方式的代码：

1、文字“左对齐”的代码：

文字内容<p align=left>

</font></P>

2、文字“居中对齐”的代码：

文字内容<p align=center>

</font></P>

3、文字“居右对齐”的代码：

文字内容<p align= right>

</font></P>

（二）“块区”标签<DIV>中文字对齐方式的代码：

1、文字“左对齐”的代码：

文字内容<p align=left>

</font></DIV>

2、文字“居中对齐”的代码：

文字内容<p align=center>

</font></DIV>

3、文字“居右对齐”的代码：

文字内容<p align= right>

</font></DIV>

（三）“表格”标签<table >中对齐方式的代码：

表格中的对齐方式，可以设置在“表格标签”中，也可以设置在表格的“行标签”中或者表格的“列标签”中。

1、“表格标签”中的“居中对齐”代码：

<table style="border-style: ridge; border-color: rgb(187, 85, 0);

border-collapse: collapse;" border="4" cellSpacing="0"

cellPadding="0" align="center">

2、“表格行标签”中的“居中对齐”代码：

3、“表格列标签”中的“居中对齐”代码：

三、css中的绝对定位与相对定位：

定位方法，除了上面所说的水平方向定位、垂直方向定位、水平方向和垂直方向的结合定位、居中标签这四种定位方法以外，还可以使用css的绝对定位和相对定位两种方法：

css的绝对定位：例如：

style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"

css的相对定位：例如：

style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"

代码解析：

style=内联css样式标记．

LEFT：0px 距离左边水平距离，值越大越靠右侧。

WIDTH：940px宽度．

POSITION：属性名称：定位类型．

absolute　定位的属值：绝对定位．

relative　定位的属值：相对定位．

TOP： 20px　距离顶部垂直距离，值越大越靠下部。

作业：

1、认识“水平定位”与“垂直定位”的代码，学会使用“水平定位”与“垂直定位”的表达方式。

2、认识css绝对定位与相对定位的“样式”，懂得“样式”中每个代码所表示的意思。

“春天没来”欢迎您

您迎欢“来没天春”

2012年12月17日于北京

第二章标签应用第三十节定位标签应用（2）

2012年12月17日于北京

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。