定位属性

春天没来 2013-01-28

展开全文

定位属性

一、定位属性有二种属性内容及属值：
定位属性内容：水平方向（align）和垂直方向（valign）．
水平方向align有三种属值：left（左对齐），center（居中），right（右对齐）．
垂直方向valign有二种属值：top（靠顶），bottom（靠底）。

二、定位属性应用模式：
<DIV 属性内容=属值> 块区中的定位</DIV>
<p 属性内容=属值> 段落中的定位</p>
1、文字左对齐的代码：
<p align=left>或者<p style="text-align: left">
<font style="font:15pt" face=黑体 color=0000ff>
文字左对齐</font></p>
<font style="font:15pt" face=黑体 color=0000ff>
</font></P>
2、文字居中的代码：
<p align=center>或者<p style="text-align: center">
<font style=font:15pt face=黑体 color=0000ff>
文字居中的标签</font></P>

<CENTER>居中标签</CENTER>
<DIV align=center> 居中标签</DIV>
显示结果：

3、文字右对齐的代码：
<p align=right>或者<p style="text-align: right">
<font style=font:15pt face=黑体 color=0000ff>
文字右对齐的标签:<p align=right>
</font></P>

显示结果：

垂直定位：

valign -- 代表垂直对齐方式。有三种方式：top(顶部对齐) middle(中部对齐) bottom(下部对齐)
垂直方向定位靠顶或靠底，可以结合水平方向左中右，构成六种位置指令．代码必须加在表格的列标签<d>中，才有效．一个单元格中只能执行一条指令.
代码模式：
<TD align=LEFT valign=top>
◆<TD 水平方向=左垂直方向=顶>
（一）　靠顶top的不同水平位置代码：
<TD align=LEFT valign=top>居左靠顶
<TD align=center valign=top>居中靠顶
<TD align=right valign=top>居右靠顶
（二）　靠底bottom的不同水平位置代码：
<TD align=LEFT valign=bottom>居左靠底
<TD align=center valign=bottom>居中靠底
<TD align=right valign=tbottom>居右靠底

css样式表中的对齐方式：

css的垂直居中代码：

line-height:100px; （实际上是“行高”代码）（取值必须与标签中的高度值相同。）

_______________________________________________________________________

css绝对定位、相对定位与相对于浏览器窗口定位的样式：

style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"
style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"
style="POSITION: fixed; WIDTH: 288px; TOP: 100px; HEIGHT: 288px; LEFT: 50px"

背景图片的定位：

style="BACKGROUND-POSITION: 0px -260px"
第一个值是水平定位，负值向左移动。例如：要从图片的水平位置50px处定位，就把水平定位值设置为-50px。

第二个值是垂直定位，负值向上移动。例如：要从图片的垂直位置50px处定位，就把垂直定位值设置为-50px。

背景图片只显示一次：
style="BACKGROUND-REPEAT: no-repeat;"

背景图片垂直方向平铺：

style="BACKGROUND-REPEAT: repeat-y;"

背景图片水平方向平铺：

style="BACKGROUND-REPEAT: repeat-x;"

————————————————————　

　◆style=内联css样式标记．

　　◆LEFT: 0px距离左边水平启点数，值越大越靠右侧。
　　◆LEFT: 0px也可设为RIGHT: 320px距离右边水平启点数．
　　◆WIDTH: 940px宽度．
　　◆POSITION　样式标记属性名称：定位．
　　◆absolute　定位的属值：绝对定位．
　　◆relative　定位的属值：相对定位．
　　◆TOP: 20px　距离顶部垂直启点，值越大越靠下部。

定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位(relative)。

“春天没来”整理收藏

2012年6月17日于北京