CSS+div网页布局.ppt

《CSS+div网页布局.ppt》由会员分享，可在线阅读，更多相关《CSS+div网页布局.ppt（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第8章 CSS+div网页布局 1学习目标学习目标lCSS排版是将页面首先在整体上进行标记分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。lppt中所有实例参考网网页页设设计计与与制制作作电电子子教教材材及源代码及源代码 28.1将页面用将页面用div分块分块 CSS排版要求设计者首先对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系，等等。以最简单的框架为例，页面由Banner、主体内容(content)、菜单导航(links)和脚注(footer)几个部

2、分，各个部分分别用自己的id来标识，整体内容如下图所示：38.1将页面用将页面用div分块分块 48.1将页面用将页面用div分块分块 上图中每个色块都是一个，这里直接用CSS的ID标识方法来标识各个块。页面的所有div块都属于块#container，一般的div排版都会在最外面加上一个父div，便于对页面的整体进行调整。对于每个子div块，还可以再加入各种块元素或者行内元素，以#content和#links为例：如下图：58.1将页面用将页面用div分块分块 6框架代码如文件框架代码如文件8-1.html所示：所示：CSS排版排版 78.2 设计各块的位置设计各块的位置 当页面的内容已经确定

3、后，则需要根据内容本身考虑整体的页面版型，例如单栏、双栏或左中右等。这里考虑到导航条的易用性，采用常见的双栏模式，如下图所示：88.2 设计各块的位置设计各块的位置 98.3 用用CSS定位定位 整理好页面的框架后，便可以利用CSS对各个块进行定位，实现对页面的整体规划，然后再往各个模块中添加内容。首先对标记与#container父块进行设置，其他代码参考源文件：bodymargin:0px;font-size:13px;font-family:Arial;#containerposition:relative;width:100%;108.4 固定宽度且居中的版式固定宽度且居中的版式 宽度固

4、定而且居中的版式是网络中最常见的排版方式之一，下面介绍两种方法实现对下面页面的居中设计：固定宽度且居中的版式页面具体内容118.4 固定宽度且居中的版式固定宽度且居中的版式 l方法一方法一 body，htmlmargin:0;text-align:center;#containerposition:relative;margin:0 auto;width:700px;text-align:left;l128.4 固定宽度且居中的版式固定宽度且居中的版式 l方法二：body,htmlmargin：0px；#containerposition：relative；left：50%；width:700

5、px;margin-left:-350px;138.4 固定宽度且居中的版式固定宽度且居中的版式148.5左中右版式左中右版式 将页面分割为左中右3块也是网页中常见的一种排版模式，本节以此结构为例来进一步讲解CSS排版的方法，页面结构如下图所示：158.5左中右版式左中右版式 首先搭建HTML的结构框架，代码如下：左中右left 正文内容right168.5左中右版式左中右版式 首先搭建HTML的结构框架，代码如下：左中右left 正文内容right178.5左中右版式左中右版式 设置标记的样式，包括margin、padding、字体、颜色和背景色等，这些对整体结构都没有太大的影响，代码如下：

6、bodymargin:0px;padding:0px;font-family:arial;color:#060;background-color:#CCCCCC;然后分别设置#left、#middle和#right的样式 188.5左中右版式左中右版式#leftposition:absolute;top:0px;left:0px;margin:0px;background:#FFF;width:190px;/*固定宽度固定宽度*/#middlepadding:10px;background:#FFF;margin:0px 190px 0px 190px;/*左右空左右空190px*/margin-top:0px;#rightposition:absolute;top:0px;right:0px;margin:0px;background:#FFF;width:190px;/*固定宽度固定宽度*/19