DivCss布局一两栏布局.doc

DivCss布局一　两栏布局 通常网页的布局只有几种：平铺式、两栏式、三栏式，有人会说没有听说过什么平铺式，呵呵，这是我自己起的名字，指的是那种整个网页内容都在一块区域全部列出来的页面。 DivCss布局--两栏布局 来源：黄超[点击放大]在制作网页的时候，不管水平方向有多少行，我们都是按照垂直方向进行整体大布局的，所以两栏和三栏的布局是十分重要的，需要熟练掌握。 本文先讲解两栏布局的基本制作方法，首先大家看一下图一，我们要制作的两栏布局就是如图一所示的，包含header（网站抬头banner）、footer（页脚，版权信息）、sidebar（边侧的工具栏）和mainbody（主要内容区域）四块内容。 拿到这个页面结构图时，首先要考虑一下页面基本结构的制作方法，要用到几个Div，虽然这个布局也能用table进行制作，但我们的目的是学习Div布局，所以一定要用Div加上css来完成。 下面我来列举几点制作页面时我经常想到的几点： 页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示； 是否居中，考虑页面是否要居中显示； 页面数量和可重复元素，由于网站页面不可能只有一个，所以需要统计页面数量，并且确定页面中是否有需要重复利用的元素，比如标题、导航、工具栏等。利用好这些元素可以提高制作速度、效率，也能使页面风格统一。 整体布局的Div嵌套关系。 再看下图一，在首页以外的其他网页中可能用到的可重复元素有Header、Footer、和SideBar，经常变换和更换的只有MainBody里的内容了。而且页面宽度是固定的，所以要在所有的元素外面做一个外框。在心中打完草稿后，在着手制作就不是那么困难了。 按照以上的设想，页面的结构基本如下： div id=Wrap!--页面层容器-- div id=Header页面头部/div div id=PageBody!--页面主体-- div id=Sidebar侧边栏/div div id=MainBody主体内容/div /div div id=Footer页面底部/div /div 新建一个网页，将以上代码复制到body与/body之间。 这些只是Div的结构，在页面里只会显示出一些堆叠在一起的内容，如果想让他变成图中的样子需要css来定义。 style type=text/css !-- /*基本信息*/ body {font:12px Simsun;margin:0px;background:#FFF;color:#000;} /*页面层容器*/ #wrap {width:900px;clear:both;} /*页面头部*/ #Header {clear:both;height:100px;background:#FFCC99;} /*页面主体*/ #PageBody {clear:both;height:400px;background:#CCFF00;} #Sidebar {width:200px;float:left;} #MainBody {width:700px;float:right;height:100%;background:#EEE;} /*页面底部*/ #Footer {clear:both;height:50px;background:#00FFFF;} -- /style css中加了相应的注释，想必大家会看的比较明白了，如果实在看不明白可以翻看一下原来的文章。 简单说明一下上面css的含义。 body中设置的是页面的整体效果，这里定义的是12像素宋体字，上下左右边距都为零，页面背景色为白色，字体颜色为黑色。 Wrap里定义的是最外面的边框，宽度为900像素，清楚左右两侧，也就是它独自占一行。 Header定义的是页面头部div，高度为100像素，背景色为:#FFCC99，Footer定义的是页脚部分，高度为50像素，背景色为#00FFFF。 PageBody是中间SideBar和MainBody外面的容器，为了不发生错位现象，所以需要PageBody对两侧进行清除，让它独占一行。 SideBar定义为200像素，居左显示；Mainbody定义为700像素，居右显示，两者加起来是最外边框的900像素。 现在把以上的css样式表全部复制下来，粘贴到页面的head与/head之间，然后预览一下页面。 大家可以看到，整个外框是居左的，如果想要整个外框居中显示呢？ 只要把#Wrap里面加上“margin:0 auto; ”，变成： #wrap {width:900px;clear:both;margin:0 auto;} 然后再预览一下，已经居