CSS网页布局与定位

1、本章知识要点一一、认识DIV二二、 DIV与CSS的使用三三、使用合适对象来布局四四、一列固定宽度五五、一列固定宽度居中六六、一列宽度自适应七七、二列固定宽度八八、二列右列宽度自适应九九、二列固定宽度居中一、一、 认识认识DIVDIV和和、一样，是一个标签，是一个专门用于布局一样，是一个标签，是一个专门用于布局的容器。以的容器。以的形式出现。如下：的形式出现。如下：长沙民政职业技术学院左分栏右分栏？为什么不能左右分栏的设置？答案：答案：DIV只是一个标识，只负责把内容标识成一个块区域，并只是一个标识，只负责把内容标识成一个块区域，并不负责其它事情，其它事由不负责其它事情，其它事由CSS来处理。

2、来处理。二、二、 DIV与与CSS的使用的使用DIV代码按照“表现与内容分离”原则，只能存在以下两种形式：区别：与ID不同的是,class允许重复，比如页面中的多个元素，都可以使用同一个class定义；如下：如下：Div布局外部样式表应用长沙民政职业技术学院头部左分栏左分栏三、三、 使用合适对象来布局使用合适对象来布局标题区导航在网页中以下列形式布局有误吗？答案：没错！完全没有问题，但考虑到答案：没错！完全没有问题，但考虑到XHTML中除了中除了DIV标签以标签以外，还有其它标签，从网页结构与优化看，我们应该采用合理的外，还有其它标签，从网页结构与优化看，我们应该采用合理的标签，如下：标签，如

3、下：标题区导航四、四、 一列固定宽度一列固定宽度一列式布局是一种固定宽度的布局样式，实现如下：1列固定宽度CSS代码如下：#layoutwidth:300px;height:300px;background-color:#cccccc;border:2px solid #333333;五、五、 一列固定宽度居中一列固定宽度居中实现如下：1列固定宽度CSS代码如下：#layoutwidth:300px;height:300px;background-color:#cccccc;border:2px solid #333333;margin:0px auto;六、六、 一列宽度自适应一列宽度自适应

4、自适应布局能够根据浏览器的大小，自动改变其宽度或高度值，实现如下：1列固定宽度CSS代码如下：#layoutwidth:80%;height:300px;background-color:#cccccc;border:2px solid #333333;七、七、 二列固定宽度二列固定宽度实现如下：左列右列CSS代码如下：#leftwidth:300px;height:300px;background-color:#cccccc;border:2px solid #333333;float:left#rightwidth:300px;height:300px;background-color:#

5、cccccc;border:2px solid #333333;float:left八、八、 二列右列宽度自适应二列右列宽度自适应实现如下：左列右列CSS代码如下：#leftwidth:300px;height:300px;background-color:#cccccc;border:2px solid #333333;float:left#rightheight:300px;background-color:#cccccc;border:2px solid #333333;float:left九、九、 二列固定宽度居中二列固定宽度居中实现如下：右列CSS代码如下：#leftwidth:30

6、0px;height:300px;background-color:#cccccc;border:2px solid #333333;float:left#rightheight:300px;height:300px;background-color:#cccccc;border:2px solid #333333;float:left左列#layoutwidth:608px;margin:0px auto;十、十、 三列浮动中间列宽度自适应三列浮动中间列宽度自适应#layoutposition:absolute;top:20px;left:40px;2、绝对定位（、绝对定位（absolute

7、）：）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位。1、相对定位（、相对定位（relative）：）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。 如：十、十、 三列浮动中间列宽度自适应三列浮动中间列宽度自适应实现如下：左列右列中列#leftposition:absolute;width:100px;height:300px;background-color:#cccccc;border:2px solid #333333;top:0px;

8、left:0px;#rightposition:absolute;width:100px;height:300px;background-color:#cccccc;border:2px solid #333333;top:0px;right:0px;#centerheight:300px;background-color:#cccccc;border:2px solid #333333;margin-left:104px;margin-right:104px;十一、十一、 高度自适应高度自适应实现如下：Html,bodymargin:0px;height:0px;#leftbackground-color:#cccccc;width:300px;height:100%;float:left;十二、十二、 DIV布局实例分析布局实例分析#top#container#center#footer十二、十二、 DIV布局实例分析布局实例分析#top#logo#nav#logoleft#logoright十二、十二、 DIV布局实例分析