div+css网页标准布局实例

关于DIV布局的技巧二、DIV+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用DIV+CSS 布局的代码如下：XHTML 代码：一列固定宽度CSS 代码：#main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用DIV+CSS 布局的代码如下：XHTML 代码：一列自适应宽度CSS 代码：#main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在DIV+CSS 布局中采用如下代码来实现：XHTML 代码：一列自适应宽度CSS 代码：DIV+CSS 网页布局方法探析。

如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。

但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点DIV+CSS 布局的技巧。

4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用DIV+CSS 布局的代码如下：XHTML 代码：左侧右侧CSS 代码：#left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; }5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的DIV 作为容器，将二列分栏的DIV 放置在容器中，从而就实现二列的居中显示。

8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf

页 的优 势 远 远 不 只这 些 。下 面 一起 来 感受
一
一
个 目的 是 让 代 码 易 读 ，区块 分 明 ，强 化
下用 Ｃ Ｓ Ｓ盒 子 模式 排版 的优 势 。
代 码 重 用 ，所 以结 构 很 重 要 。如 果 用 Ｃ Ｓ Ｓ 实现不了的效果 ， 一 般 用 表 格 也 是 很 难 实
＜／ ｄ ｉ ｖ ＞
（ ｂ ｏ ｒ ｄ ｅ ｒ ） 、边 界 （ ｍａ ｒ ｇ ｉ ｎ ） ， 而 Ｃ Ｓ Ｓ盒 子 模 不 满 意 ，特 别 是 色 调 的 话 ，那 么 改 起 来 就
式都具备这些属性 。
■＾ ＲＯ Ｉ Ｎ进葬 置子之冀曲难膏
Ｂ ＯＲ Ｄ Ｅ Ｒ Ａ ‘
设 计 中 常 听 到 一 些 属 性 名 如 ： 内 容 实 用 的 好 处 ，如 果 是 接 单 做 网站 的 ，如 果 ＝ ｎａ ｙ ＞ ＜／ ｄ ｉ ｖ ＞ ＜ｄ ｉ ｖ ？ｉ ｄ 一”ｃ ｏ ｎ ｔ ｅ ｎ ｔ ＞
Ｓ Ｓ排版 网 页 ， 做 到 后 来 客 户 有 什 么 ＜ ／ ｄ ｉ ｖ ＞＜ｄ ｉ ｖ ？ｉ ｄ 一”ｆ ｏ ｏ ｔ ｅ ｒ ＞ ＜／ ｄ ｉ ｖ ＞ （ ｐ ａ ｄ ｄ ｉ ｎ ｇ） 、 边 框 用 了 Ｃ
相 当 容 易 ，甚 至 还 可 以 定 制 几 种 风 格 的
最 外 边 的大 盒 子 要 让 它 在 页 面 居 中 ，
６ ０像 素 ，同 时加 上 边 Ｃ Ｓ Ｓ文 件 供 客 户 选择 ，又 或 者 写 一 个 程 序 并 重 定义 其宽 度 为 ９
。 － Ｉ
、
Ｐ Ａ 。 Ｂ 蕈 竞 谊予 且 妇 簟 吏尊
的 大 小 不 一 的 盒 子 和 盒 子 的 嵌 套 来 编 排 离

块 （ ｂ ｌ ｏ ｃ ｋ — ｌ ｅ ｖ ｅ １ ）的 内容提 供结 构和 背景 的元 素 。 也 可 以是 用 户 自定 义 的样 式 Ｐ ｒ ｏ ｐ ｅ ｒ ｔ ｖ为 属 性 ， Ｄ Ｉ Ｖ的起始 标 签和结 束标 签 之 间 的所 有 内容 都是 ｖ ａ ｌ ｕ ｅ 为属 性值 属 性 和属 性值 之 问用 冒号 隔开 用来 构 成 这 个块 的 ． Ｄ Ｉ Ｖ 的 作 用 就 是 把 内 容标 识 多 个 定 义 之 问 用 分 号 隔 开 在一 个 区域 内 ． 并不 负 责其 它事情 ． 其 中所包 含元 素 的特性 均 由 Ｃ Ｓ Ｓ样 式 来 完 成
三、 实 例 演Hale Waihona Puke 示 需要 新 建和 删除
首 先根 据 客户 的需求进 行 页面 的绘 制 ．绘制 完成 后进行 切 割 ． 切 割后进行 布 局设计 ． 似 设我 们 当几 个元 素样 式属性 一样 时 ．可 以共 同渊用 绘 制 完 成 后 的 网 页 布 局 如 下 ３所 示 ．
际 案 例 来 分 析 ＤＩ Ｖ＋ＣＳ Ｓ排 版 网 页的 过 程 和 方 法
【 关 键词 】 ： 网页排 版
一
ＤＩ Ｖ Ｃ Ｓ Ｓ盒子 Ｃ Ｓ Ｓ 语 法
任何 Ｈ Ｔ ＭＬ元 素都可 以看作 是 一个盒 子 ． 用 Ｃ Ｓ Ｓ
、
前 言
随 着 ＷＥ Ｂ标 准 的 推 广 和 普 及 ．越 来 越 多 的 布 局 网 页 主 要 就 是 通 过 Ｃ Ｓ Ｓ定 义 的 大 小 不 一 的
ｌ ６ ８
福 建 电
脑
Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ网页 排版 技 术 探讨
韩 竹 萍
（厦 门 工 商 旅 游 学 校 福 建 厦 门 ３ ６ １ ０ （ ） ４）