第9讲 css实现网页布局(1).ppt

第9讲css实现网页布局 一 css实现网页布局 学习目标 学习利用Css实现优秀页面的布局方法及导航的编写重点 利用css对整体页面布局导航的编写方法难点 代码标准性对页面显示方式的影响课时 2课时授课方法 案例教学法 本次课将概览css布局中的布局定位方法 即首先搭建一个可视的排版框架 然后再向框架中填充排版的细节 这就是css布局定位的基本作用 认识divDiv与其他xhtml标签一样是个容器 以的形式出现 CSS布局定位 一列固定宽度一列宽度自适应二列固定宽度二列宽度自适应两列右列宽度自适应二列固定宽度居中三列浮动中间列宽度自适应高度自适应 一列固定宽度 Xhtml代码如下 一列固定宽度居中Css代码如下 layout1 width 900px height 400px margin 0auto border solid1px 0000FF background CCCCCC 一列宽度自适应 width 80 二列固定宽度 Xhtml代码如下 左侧右侧 Css代码如下 left1 width 200px height 300px background CC9933 float left right1 width 700px height 300px background CCCC33 float left 两列右列宽度自适应 Xhtml代码如下 左侧固定右侧宽度自适应 Css代码如下 left2 width 200px height 300px background CC9900 float left right2 height 300px background CCCC33 二列固定宽度居中 Xhtml代码如下 leftright Css代码如下 layout2 width 900px margin 0auto left3 width 200px height 300px float left background color CC9900 right3 width 700px height 300px float left background color 99FF00 三列浮动中间列宽度自适应 Xhtml代码如下 leftcenterright Css代码如下 left width 200px height 300px background color 99CC00 position absolute top 0px left 0 right width 200px height 300px background color 99CC66 position absolute top 0 right 0 center height 300px background color 99CC99 margin left 200px margin right 200px 高度自适应 Xhtml代码如下 高度自适应 Css代码如下 layout3 background color FF9900 width 80 height 100 html body margin 0px pad