动态WEB入门 CSS+Div

动态WEB入门 CSS+Div

传统的网页制作采用两层架构，在表现层控制页面显示，代码比较混乱而且维护性不好，现在一般都采用div+css架构来实现网站页面的开发，本文只是一个简明手册，起到一个抛砖引玉的作用。

一．css-----层叠样式表

使用css文件可以灵活控制表现层。同一个页面文件，使用不同的CSS，可以具有不同的外观效果。因此，需要修改外观时，仅修改css文件，而不需要对页面文件做任何改动。

<group id="_x0000_s1026" style="WIDTH: 415.3pt; HEIGHT: 283.05pt; mso-position-horizontal-relative: char; mso-position-vertical-relative: line" coordsize="8574,5853" coordorigin="2362,1510" editas="canvas"><lock aspectratio="t" v:ext="edit"></lock><shapetype id="_x0000_t75" coordsize="21600,21600" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_s1027" style="LEFT: 2362px; WIDTH: 8574px; POSITION: absolute; TOP: 1510px; HEIGHT: 5853px" o:preferrelative="f" type="#_x0000_t75"><font size="3"><fill o:detectmouseclick="t"></fill><path o:connecttype="none" o:extrusionok="t"></path><lock v:ext="edit" text="t"></lock></font></shape><roundrect id="_x0000_s1028" style="LEFT: 5926px; WIDTH: 1601px; POSITION: absolute; TOP: 4331px; HEIGHT: 1046px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#fc9" o:bwmode="lightGrayScale" arcsize="10923f"><shadow color="#e48518"></shadow><textbox style="mso-next-textbox: #_x0000_s1028" inset="2.13361mm,1.0668mm,2.13361mm,1.0668mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">css</span><span style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">文件</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">1</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> </div> </td> </tr></tbody></table></textbox></roundrect><rect id="_x0000_s1029" style="LEFT: 6762px; WIDTH: 1666px; POSITION: absolute; TOP: 2869px; HEIGHT: 940px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-next-textbox: #_x0000_s1029" inset="2.13361mm,1.0668mm,2.13361mm,1.0668mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">页面文件</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">1</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><roundrect id="_x0000_s1030" style="LEFT: 8639px; WIDTH: 1601px; POSITION: absolute; TOP: 4331px; HEIGHT: 1046px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#fc0" o:bwmode="lightGrayScale" arcsize="10923f"><shadow color="#e48518"></shadow><textbox style="mso-next-textbox: #_x0000_s1030" inset="2.13361mm,1.0668mm,2.13361mm,1.0668mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">css</span><span style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">文件</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">2</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> </div> </td> </tr></tbody></table></textbox></roundrect><rect id="_x0000_s1031" style="LEFT: 4884px; WIDTH: 1666px; POSITION: absolute; TOP: 1510px; HEIGHT: 941px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#fc9" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-next-textbox: #_x0000_s1031" inset="2.13361mm,1.0668mm,2.13361mm,1.0668mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">页面文件</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">1</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1032" style="LEFT: 8536px; WIDTH: 1666px; POSITION: absolute; TOP: 1510px; HEIGHT: 941px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#fc0" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-next-textbox: #_x0000_s1032" inset="2.13361mm,1.0668mm,2.13361mm,1.0668mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">页面文件</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">1</span><span lang="EN-US" style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><line id="_x0000_s1033" style="POSITION: absolute; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle; flip: y" strokeweight=".25pt" o:bwmode="lightGrayScale" to="7388,4332" from="6866,3809"><stroke endarrow="block"></stroke><shadow color="#e48518"></shadow></line><line id="_x0000_s1034" style="POSITION: absolute; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle; flip: x y" strokeweight=".25pt" o:bwmode="lightGrayScale" to="9266,4332" from="8745,3809"><stroke endarrow="block"></stroke><shadow color="#e48518"></shadow></line><line id="_x0000_s1035" style="POSITION: absolute; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle; flip: x y" strokeweight=".25pt" o:bwmode="lightGrayScale" to="7179,2869" from="6762,2451"><stroke endarrow="block"></stroke><shadow color="#e48518"></shadow></line><line id="_x0000_s1036" style="POSITION: absolute; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle; flip: y" strokeweight=".25pt" o:bwmode="lightGrayScale" to="9371,2869" from="8953,2451"><stroke endarrow="block"></stroke><shadow color="#e48518"></shadow></line><rect id="_x0000_s1037" style="LEFT: 6553px; WIDTH: 2114px; POSITION: absolute; TOP: 6318px; HEIGHT: 1045px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-next-textbox: #_x0000_s1037" inset="2.13361mm,1.0668mm,2.13361mm,1.0668mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">后台处理文件</span><span style="FONT-SIZE: 15pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体"><p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><shapetype id="_x0000_t13" coordsize="21600,21600" path="m@0,l@0@1,0@1,0@2@0@2@0,21600,21600,10800xe" o:spt="13" adj="16200,5400"><stroke joinstyle="miter"></stroke><formulas><f eqn="val #0"></f><f eqn="val #1"></f><f eqn="sum height 0 #1"></f><f eqn="sum 10800 0 #1"></f><f eqn="sum width 0 #0"></f><f eqn="prod @4 @3 10800"></f><f eqn="sum width 0 @5"></f></formulas><path o:connecttype="custom" textboxrect="0,@1,@6,@2" o:connectangles="270,180,90,0" o:connectlocs="@0,0;0,10800;@0,21600;21600,10800"></path><handles><h yrange="0,10800" xrange="0,21600" position="#0,#1"></h></handles></shapetype><shape id="_x0000_s1038" style="LEFT: 3663px; WIDTH: 1046px; POSITION: absolute; TOP: 3445px; HEIGHT: 734px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" type="#_x0000_t13" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"><font size="3">表现层</font></span></p> </div> </td> </tr></tbody></table></textbox></shape><shape id="_x0000_s1039" style="LEFT: 3663px; WIDTH: 1046px; POSITION: absolute; TOP: 6510px; HEIGHT: 735px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" type="#_x0000_t13" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'"><font size="3">业务层</font></span></p> </div> </td> </tr></tbody></table></textbox></shape><shapetype id="_x0000_t202" coordsize="21600,21600" path="m,l,21600r21600,l21600,xe" o:spt="202"><stroke joinstyle="miter"></stroke><path o:connecttype="rect" gradientshapeok="t"></path></shapetype><shape id="_x0000_s1040" style="LEFT: 2362px; WIDTH: 436px; POSITION: absolute; TOP: 6457px; HEIGHT: 435px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: top-baseline" stroked="f" filled="f" type="#_x0000_t202" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-next-textbox: #_x0000_s1040; mso-fit-shape-to-text: t" inset="2.13361mm,1.0668mm,2.13361mm,1.0668mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span lang="EN-US" style="mso-bidi-font-size: 18.0pt"><p><font face="Times New Roman" size="3"></font></p></span></p> </div> </td> </tr></tbody></table></textbox></shape><line id="_x0000_s1041" style="POSITION: absolute; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle; flip: y" strokeweight=".25pt" o:bwmode="lightGrayScale" to="8119,6248" from="8119,3844"><font size="3"><font face="Times New Roman"><stroke endarrow="block"></stroke><shadow color="#e48518"></shadow></font></font></line><wrap type="none"></wrap><anchorlock></anchorlock></group>

目标----设计结构化的页面

u 以往的代码：

<table width=“500px" cellpadding="3" border="2" align="left">

u 结构化的代码

<table>

width、border等属性都称为表现层属性。结构化的页面，表现层属性全部在css中描述，不再出现在页面文件。

以上代码的css描述

table{

width:500px;

cellpadding:3;

border:2;

align:left;

}

注：属性后面使用冒号（：）来设定值

二．css基本知识

u css的引入：

１、页面引入

样式描述存在于页面文件中。样式仅在该页面有效。

<style type="text/css" media="screen">

table{width:500px;cellpadding:3;border:2;align:left;}

</style>

2、css文件引入

样式文件单独存在于一个样式文件，通常以.css为后缀。样式为全局有效。页面文件需要链接该样式文件才能使用样式描述。

通常会为一个网站建立一个css文件，以统一全局效果。对于局部特殊之处，再通过页面级样式以局部限定。

u 拾取器

table{width:500px;cellpadding:3;border:2;align:left;}

-------------------对table标记有效的样式

＃mydiv｛width:500px;border:2｝

-------------------对标记内　id＝“mydiv“　有效

.atag{width:500px;border:2}

-------------------对标记内 class=“atag”　有效

input.myinput{width:500px;border:2}

-------------------对标记为input　class=“myinput“　有效

#mydiv　 #mysubdiv{width:500px;border:2}

-------------对id=“mydiv”的内嵌标记id=“mysubdiv”有效

mytag{width:500px;border:2}

-------------自定义拾取器

使用举例

<div id=“mydiv”>

<div id=“mysubdiv”> -------------将该div放置于mydiv外，则该div不具有样式

<table>

<tr>

<td class=“atag”>

<input type=“input” class=“myinput”></input>

</td>

</tr>

</table>

</div>

<mytag>helloworld</mytag>

</div>

三．结构化界面布局－－div+css

u 现代理念：用div实现对页面结构的划分，用css控制表现。

<group id="_x0000_s1042" style="WIDTH: 415.3pt; HEIGHT: 179.25pt; mso-position-horizontal-relative: char; mso-position-vertical-relative: line" coordsize="9913,4285" coordorigin="2362,8800" editas="canvas"><lock aspectratio="t" v:ext="edit"></lock><shape id="_x0000_s1043" style="LEFT: 2362px; WIDTH: 9913px; POSITION: absolute; TOP: 8800px; HEIGHT: 4285px" o:preferrelative="f" type="#_x0000_t75"><font size="3"><fill o:detectmouseclick="t"></fill><path o:connecttype="none" o:extrusionok="t"></path><lock v:ext="edit" text="t"></lock></font></shape><group id="_x0000_s1044" style="LEFT: 2362px; WIDTH: 3548px; POSITION: absolute; TOP: 8800px; HEIGHT: 4285px" coordsize="1632,1968" coordorigin="336,1248"><rect id="_x0000_s1045" style="LEFT: 336px; WIDTH: 1632px; POSITION: absolute; TOP: 1248px; HEIGHT: 336px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">head<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1046" style="LEFT: 336px; WIDTH: 336px; POSITION: absolute; TOP: 1680px; HEIGHT: 1152px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">left<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1047" style="LEFT: 720px; WIDTH: 1248px; POSITION: absolute; TOP: 1680px; HEIGHT: 1152px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">main<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1048" style="LEFT: 336px; WIDTH: 1632px; POSITION: absolute; TOP: 2880px; HEIGHT: 336px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">foot<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect></group><group id="_x0000_s1049" style="LEFT: 8727px; WIDTH: 3548px; POSITION: absolute; TOP: 8800px; HEIGHT: 4285px" coordsize="1632,1968" coordorigin="2880,1248"><rect id="_x0000_s1050" style="LEFT: 2880px; WIDTH: 1632px; POSITION: absolute; TOP: 1248px; HEIGHT: 336px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">head<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1051" style="LEFT: 2880px; WIDTH: 528px; POSITION: absolute; TOP: 1680px; HEIGHT: 1152px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">left<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1052" style="LEFT: 2880px; WIDTH: 1632px; POSITION: absolute; TOP: 2880px; HEIGHT: 336px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">foot<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1053" style="LEFT: 3424px; WIDTH: 528px; POSITION: absolute; TOP: 1680px; HEIGHT: 1152px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">middle<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1054" style="LEFT: 3968px; WIDTH: 528px; POSITION: absolute; TOP: 1680px; HEIGHT: 1152px; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="1.85419mm,.92711mm,1.85419mm,.92711mm"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">right<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect></group><wrap type="none"></wrap><anchorlock></anchorlock></group>

div

u div是很好的布局元素，有几个重要属性需要了解：

1、position(absolute/relative)

定位属性。通常用absolute绝对定位，然后用其left、top等属性指明其坐标。但注意，是相对于父容器的坐标。

#wrap{left:100;top:100;}

#sub{left:50;top:50;}

<group id="_x0000_s1055" style="WIDTH: 415.3pt; HEIGHT: 109.55pt; mso-position-horizontal-relative: char; mso-position-vertical-relative: line" coordsize="12035,3179" coordorigin="2362,3775" editas="canvas"><lock aspectratio="t" v:ext="edit"></lock><shape id="_x0000_s1056" style="LEFT: 2362px; WIDTH: 12035px; POSITION: absolute; TOP: 3775px; HEIGHT: 3179px" o:preferrelative="f" type="#_x0000_t75"><font size="3"><font face="Times New Roman"><fill o:detectmouseclick="t"></fill><path o:connecttype="none" o:extrusionok="t"></path><lock v:ext="edit" text="t"></lock></font></font></shape><rect id="_x0000_s1057" style="LEFT: 5319px; WIDTH: 3026px; POSITION: absolute; TOP: 3775px; HEIGHT: 2613px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" filled="f" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"><font face="Times New Roman" size="3"></font></shadow></rect><rect id="_x0000_s1058" style="LEFT: 6050px; WIDTH: 947px; POSITION: absolute; TOP: 4402px; HEIGHT: 1777px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">wrap<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1059" style="LEFT: 5737px; WIDTH: 770px; POSITION: absolute; TOP: 4193px; HEIGHT: 1045px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">sub<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1060" style="LEFT: 2397px; WIDTH: 2714px; POSITION: absolute; TOP: 3810px; HEIGHT: 1866px; mso-position-horizontal: absolute; mso-position-vertical: absolute" stroked="f" filled="f" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-fit-shape-to-text: t" inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;div id=“wrap”&gt;</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;/div&gt;<p></p></span></p> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;div id=“sub”&gt;</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;/div&gt;<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1061" style="LEFT: 8971px; WIDTH: 3129px; POSITION: absolute; TOP: 3879px; HEIGHT: 1866px; mso-position-horizontal: absolute; mso-position-vertical: absolute" stroked="f" filled="f" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-fit-shape-to-text: t" inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;div id=“wrap”&gt;</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;div id=“sub”&gt;</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt; mso-bidi-font-family: 宋体"><p></p></span></p> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;/div&gt;<p></p></span></p> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-layout-grid-align: none"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">&lt;/div&gt;<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><shape id="_x0000_s1062" style="LEFT: 2362px; WIDTH: 2610px; POSITION: absolute; TOP: 5970px; HEIGHT: 996px; mso-position-horizontal: absolute; mso-position-vertical: absolute" stroked="f" filled="f" type="#_x0000_t202" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-fit-shape-to-text: t" inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">无嵌套：</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">sub</span><span style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">层的父容器为</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">body<p></p></span></p> </div> </td> </tr></tbody></table></textbox></shape><shape id="_x0000_s1063" style="LEFT: 8449px; WIDTH: 2939px; POSITION: absolute; TOP: 6073px; HEIGHT: 996px; mso-position-horizontal: absolute; mso-position-vertical: absolute" stroked="f" filled="f" type="#_x0000_t202" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-fit-shape-to-text: t" inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">有嵌套：</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">sub</span><span style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-size: 18.0pt; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-ansi-language: ZH-CN; mso-bidi-font-family: 宋体">层的父容器为</span><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">wrap<p></p></span></p> </div> </td> </tr></tbody></table></textbox></shape><rect id="_x0000_s1064" style="LEFT: 11371px; WIDTH: 3026px; POSITION: absolute; TOP: 3984px; HEIGHT: 2613px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" filled="f" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow></rect><rect id="_x0000_s1065" style="LEFT: 12100px; WIDTH: 948px; POSITION: absolute; TOP: 4611px; HEIGHT: 1777px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">wrap<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><rect id="_x0000_s1066" style="LEFT: 12552px; WIDTH: 771px; POSITION: absolute; TOP: 5063px; HEIGHT: 1047px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: middle" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">sub<p></p></span></p> </div> </td> </tr></tbody></table></textbox></rect><shape id="_x0000_s1067" style="LEFT: 12053px; WIDTH: 944px; POSITION: absolute; TOP: 4453px; HEIGHT: 560px; mso-wrap-style: none; mso-position-horizontal: absolute; mso-position-vertical: absolute; v-text-anchor: top-baseline" stroked="f" filled="f" type="#_x0000_t202" strokeweight=".25pt" fillcolor="#9cf" o:bwmode="lightGrayScale"><shadow color="#e48518"></shadow><textbox style="mso-fit-shape-to-text: t" inset="4.32pt,2.16pt,4.32pt,2.16pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #d4d0c8; BORDER-TOP: #d4d0c8; BORDER-LEFT: #d4d0c8; BORDER-BOTTOM: #d4d0c8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center; mso-layout-grid-align: none" align="center"><span lang="EN-US" style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 18.0pt">wrap<p></p></span></p> </div> </td> </tr></tbody></table></textbox></shape><wrap type="none"></wrap><anchorlock></anchorlock></group>

2、float（left/right/none)

如果没有设置该属性，当浏览器变大或变小时，层的位置不变。设置该属性后，层随着浏览器变化，始终居左或居右。

　

但注意，设置position:absolute后，该属性不起作用。

3、width（百分比/像素)

注：百分比仅对拾取器为id时有效。

用百分比表示与父容器之间的相对关系，用像素则表示绝对宽度。

4、height（像素）

无法用百分比设置相对高度，只能设计绝对大小，即高度不变，这是设计时的一个难点。网上有资料关于高度自适应问题的解决。

　

小技巧：使用height:expression(screen.height）/5，设置层的高度为显示器的1/5，使得层可以随浏览器不同而自动变化。

5、overflow(hidden/scroll/auto)

当层内的内容超过（溢出）层的高度和宽度时，层的显示方式。

　hidden：溢出部分不显示

　scroll：层显示水平、垂直滚动条

　auto：水平溢出自动显示水平滚动条，垂直溢出自动显示垂直滚动条。

　通常用auto。这样可以设计时就设定层的大小，运行时，其大小都不变，层的内容溢出时通过滚动条显示溢出部分，因此不至于影响其他页面元素，而导致破坏页面整体结构。

四．需要考虑的因素

客户端浏览器、分辨率大小是不固定的，页面元素如何适应客户端？

解决的方法无非就是两个：

思路一、外层固定大小，内层(包括div，table元素）相对大小。

很多网站采用这一思路。最外层的div的width设置成800，并居中。使得无论是15寸、17寸或19寸显示器，页面元素均不变化。但必然会有部分显示区域不能使用。

思路二、所有大小均用相对大小。

最外层大小通常根据计算客户端浏览器大小决定，内嵌层(包括div，table元素）用相对大小。提高显示区域的利用率。

五．结构化设计页面

u 1、设计页面结构，考虑采用是相对还是绝对大小思路；

u 2、用div规划整个页面布局，有时可以用框架（frameset）来划分页面布局；

u 3、用css控制div属性；

u 4、考虑整个网站会有哪些页面元素，并为他们设计css，包括拾取器的选用及命名。

u 5、页面引入css，并观察效果并改进css。

注意结构化：

1、用div结构化布局；

2、所有表现层属性均在css中定义。