17-CSS布局.pptVIP

17. DIV + CSS布局基础 网页设计与制作实例教程 Static Top、left、bottom、right不起作用。 相当于不设置position属性。 Absolute 绝对定位 CSS中 的写法是：position:absolute; ，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT进行定位，默认 父标签的坐标原始点为原始点。没有有效父标签的以浏览器左上角为原始点进行定位。 除第一个层外的各个层的top和left需要计算得出。 Relative：相对定位 首先要知道relative的意思是什么。我们知道，是相对的意思。相对谁呢？相对position为static时的位置，也就是不设置position属性时的位置。 除第一个层外的各个层的top和left需要计算得出。 float CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对 象，默认分为两种：块元素(block?element)、内联元素(inline?element)，虽然也存在着可变元素，但只是随上下文关系确定该 元素是块元素或者内联元素。其实CSS的float属性，作用就是改变块元素(block?element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。 使用浮动（float)的时候经常会使用一个容器(层）把各个浮动的层组织在一起，使一个层中包含多个层，达到更好的布局效果。 Clear（去除浮动，另起一行） 语法：clear : none | left | right | both 取值：none?? : 默认值。允许两边都可以有浮动对象 left?? : 不允许左边有浮动对象 right?? : 不允许右边有浮动对象 both?? : 不允许有浮动对象 小技巧 容器的Margin的值上下为0左右为自动（auto）， 可以达到层的居中效果。 作业 作业说明 作业1：用绝对定位完成上面的布局。 作业2：用相对定位完成上面的布局。 作业3：用浮动的方法完成上面的布局。 说明：各个区域的大小自己确定。 作业2：实现下列页面（选作） 作业2说明 这个例子的页面主要代码如下： div id=header/divdiv id=mainbox????div id=menu/div????div id=sidebar/div????div id=content/div/divdiv id=footer/div 具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内 容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。 网页设计与制作实例教程 *