CSS布局剖析.ppt

例：6-7 图6.11用Div规划的页面布局 本网页布局共用了6个层，其中id为container的层作为容器层，包含了其它5个层。在#container块中页面的#banner(广告栏)放在最上方，然后是#navigation(一级导航栏)。接着是#links(二级导航栏)和#content(主要内容区)，二者分布在网页的中部，最下方是#footer(脚注信息)，用于显示版权等相关信息。Div的结构如下。 body{} #container{} #banner{} #navigation{} #links{} #content{} #footer{} 各Div嵌套的代码如下。 div id=container #container块，此处显示层id为container的内容 div id=banner#banner块(广告栏)，此处显示层id为banner的内容/div div id=navigation#navigation(一级导航栏)，此处显示层id为navigation的内容/div div id=links#links块(二级导航栏)，此处显示层id为links的内容/div div id=content#content(主要内容区)，此处显示层id为content的内容/div div id=footer#footer(脚注信息区)，此处显示层id为footer的内容/div /div 确定页面的整体结构后，就可以利用CSS对每个div块进行定位控制了。 2．设计各块的位置并用CSS定位 首先对body标签和父块#container进行设置，代码如下。 body { margin:0px; text-align:center; color:#F00; font-size:13px; font-family:Arial; } #container{ position:relative; border:1px solid #000000; width:765px; top:20px; } #banner{ height:107px; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #navigation{ height:37px; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #links{ float:left; background-color:#9F0; text-align:left; vertical-align:top; width:147px; height:311px; } #content{ float:right; text-align:left; vertical-align:top; background-color:#0FF; width:616px; height:311px; } #footer{ clear:both; /* 不受上方块的float属性影响 */ text-align:center; height:61px; background-color:#0F0; margin-top:2px; } 例 6-7-3 body div id=container div id=bannerimg src=../images/banner2.jpg width=763 height=107 alt=广告栏/div div id=navigationimg src=../images/navigation3.jpg width=763 height=37 alt=导航栏/div div id=linksimg src=../images/left2.jpg width=147 height=311 alt=二级导航栏/div div id=contentimg src=../images/main2.jpg width=616 height=311 alt=主要内容区/div div id=footerimg src=../images/bottom2.jpg width=763 height=61 alt=脚注信息/div /div /body 例6-7-3 图6.12用Div布局的页面 3 DIV+CSS常见布局 在长期的网页制作过程中，网页制作者们总结出了许多通用页面布局方式，这些通用页