CSS+div网页布局.ppt

1 第8章CSS div网页布局 2 学习目标 CSS排版是将页面首先在整体上进行标记分块 然后对各个块进行CSS定位 最后再在各个块中添加相应的内容 通过CSS排版的页面 更新十分容易 甚至是页面的拓扑结构 都可以通过修改CSS属性来重新定位 ppt中所有实例参考网页设计与制作电子教材及源代码 3 8 1将页面用div分块 CSS排版要求设计者首先对页面有一个整体的框架规划 包括整个页面分为哪些模块 各个模块之间的父子关系 等等 以最简单的框架为例 页面由Banner 主体内容 content 菜单导航 links 和脚注 footer 几个部分 各个部分分别用自己的id来标识 整体内容如下图所示 4 8 1将页面用div分块 5 8 1将页面用div分块 上图中每个色块都是一个 这里直接用CSS的ID标识方法来标识各个块 页面的所有div块都属于块 container 一般的div排版都会在最外面加上一个父div 便于对页面的整体进行调整 对于每个子div块 还可以再加入各种块元素或者行内元素 以 content和 links为例 如下图 6 8 1将页面用div分块 7 框架代码如文件8 1 html所示 CSS排版 8 8 2设计各块的位置 当页面的内容已经确定后 则需要根据内容本身考虑整体的页面版型 例如单栏 双栏或左中右等 这里考虑到导航条的易用性 采用常见的双栏模式 如下图所示 9 8 2设计各块的位置 10 8 3用CSS定位 整理好页面的框架后 便可以利用CSS对各个块进行定位 实现对页面的整体规划 然后再往各个模块中添加内容 首先对标记与 container父块进行设置 其他代码参考源文件 body margin 0px font size 13px font family Arial container position relative width 100 11 8 4固定宽度且居中的版式 宽度固定而且居中的版式是网络中最常见的排版方式之一 下面介绍两种方法实现对下面页面的居中设计 固定宽度且居中的版式页面具体内容 12 8 4固定宽度且居中的版式 方法一body html margin 0 text align center container position relative margin 0auto width 700px text align left 13 8 4固定宽度且居中的版式 方法二 body html margin 0px container position relative left 50 width 700px margin left 350px 14 8 4固定宽度且居中的版式 15 8 5左中右版式 将页面分割为左中右3块也是网页中常见的一种排版模式 本节以此结构为例来进一步讲解CSS排版的方法 页面结构如下图所示 16 8 5左中右版式 首先搭建HTML的结构框架 代码如下 左中右left正文内容right 17 8 5左中右版式 首先搭建HTML的结构框架 代码如下 左中右left正文内容right 18 8 5左中右版式 设置标记的样式 包括margin padding 字体 颜色和背景色等 这些对整体结构都没有太大的影响 代码如下 body margin 0px padding 0px font family arial color 060 background color CCCCCC 然后分别设置 left middle和 right的样式 19 8 5左中右版式 left position absolute top 0px left 0px margin 0px background FFF width 190px 固定宽度 middle padding 10px background FFF margin 0px190px0px190px 左右空190px margin top 0