CSS+DIV网页布局技术详解电子书

内容简介

前言

第1篇 CSS布局基础知识

第1章 Web标准布局的本质

1.1 为什么要建立Web标准

1.2 什么是Web标准

1.3 结构和表现

1.4 两种思考方式

1.5 Web标准的前景

1.6 Web标准网站欣赏

第2章 XHTML书写规范

2.1 为什么要使用XHTML

2.2 什么是XHTML

2.3 XHTML语法基础

2.4 XHTML代码规范

第3章 CSS基础与书写规范

3.1 CSS的基础知识

3.2 CSS编码规范

3.3 怎样更好地应用CSS

3.4 关于CSS的学习

第2篇 CSS页面布局技巧

第4章 网页头部元素的详细定义

4.1 DOCTYPE的选择

4.2 名字空间

4.3 编码问题

4.4 meta标签

4.5 CSS的调用

4.6 网页头部实例

第5章 CSS基本布局属性

5.1 页面的制作流程和整体分析

5.2 元素定位基础知识

5.3 定位属性详解

5.4 定位属性的应用

5.5 页面背景的设定

5.6 背景的综合应用

5.7 布局的基础知识

5.8 浮动属性

5.9 关于ul和li的样式详解

5.10 一个纵向导航菜单的制作

5.11 一个横向导航菜单的制作

5.12 清除浮动

5.13 页面header部分的制作

第6章 CSS容器属性

6.1 什么是盒模型

6.2 补白属性

6.3 边框属性

6.4 边界属性

6.5 父元素与子元素之间的距离

6.6 嵌套的元素中使用负边界

6.7 固定大小的问题

6.8 自适应问题

6.9 制作一个简单的页面框架

6.10 header部分的进一步完善

6.11 页面主体结构的制作

6.12 页面主体部分CSS的编写

第7章 CSS定义文本属性

7.1 文本的缩进和对齐

7.2 行高与间隔

7.3 水平和垂直居中问题

7.4 字体的综合属性

7.5 文本的修饰和链接

7.6 完成页面header部分的制作

7.7 main部分的完善

7.8 footer部分的制作

7.9 页面在IE浏览器中的显示效果

第8章 元素的修饰和CSS常见应用

8.1 图片的修饰

8.2 使用图片制作简单圆角框

8.3 复杂圆角框的制作

8.4 用CSS制作代替图片的圆角

8.5 表单的修饰

8.6 登录框的制作

8.7 滚动条的修饰

8.8 表格的修饰

8.9 分隔线的修饰

8.10 关于导航栏的制作和修饰

8.11 下拉菜单的制作

8.12 遮盖的问题

第3篇 整站的CSS定义技巧

第9章 DIV+CSS布局基础

9.1 初识DIV+CSS布局的流程

9.2 了解盒模型

9.3 页面元素的布局

第10章 关于整站样式表的分析

10.1 站点页面的分析

10.2 站点二级页面的制作

第11章 关于标准的校验

11.1 为什么要进行标准的校验

11.2 怎样进行标准的校验

11.3 实例页面的校验

第4篇 DIV+CSS布局实例

第12章 DIV+CSS页面布局设计

12.1 页面布局的准备

12.2 页面的制作

第13章 新闻系统的页面布局

13.1 新闻系统的页面分析

13.2 新闻系统首页的设计

13.3 新闻系统栏目页面的设计

13.4 新闻系统列表页的设计

13.5 新闻系统内容页的设计

第14章 微博系统的页面布局

14.1 微博系统的页面分析

14.2 微博系统个人首页的设计

14.3 微博系统相册列表页的设计

14.4 微博系统相册幻灯页的设计

14.5 微博系统日志详情页的设计

14.6 微博系统微频道（广场）的设计

第15章 论坛系统的页面布局

15.1 论坛系统的页面分析

15.2 论坛系统首页的设计

15.3 论坛系统栏目页的设计

15.4 论坛系统版块页的设计

15.5 论坛系统内容页的设计

第16章 商城系统的页面布局

16.1 商城系统的页面分析

16.2 商城系统首页的设计

附录A CSS标记速查

A.1 字体属性

A.1.1 设置字体——font-family

A.1.2 设置字号——font-size

A.1.3 字体风格——font-style

A.1.4 设置加粗字体——font-weight

A.1.5 小型的大写字母——font-variant

A.1.6 复合属性：字体——font

A.2 颜色及背景属性

A.2.1 颜色属性设置——color

A.2.2 背景颜色——background-color

A.2.3 背景图像——background-image

A.2.4 背景重复——background-repeat

A.2.5 背景附件——background-attachment

A.2.6 背景位置——background-position

A.2.7 复合属性：背景——background

A.3 文本属性

A.3.1 单词间隔——word-spacing

A.3.2 字符间隔——letter-spacing

A.3.3 文字修饰——text-decoration

A.3.4 纵向排列——vertical-align

A.3.5 文本转换——text-transform

A.3.6 文本排列——text-align

A.3.7 文本缩进——text-indent

A.3.8 文本行高——line-height

A.3.9 处理空白——white-space

A.3.10 文本反排——unicode-bidi与direction

A.4 边距与填充属性

A.4.1 顶端边距——margin-top

A.4.2 其他边距——margin-bottom、margin-left、margin-right

A.4.3 复合属性：边距——margin

A.4.4 顶端填充——padding-top

A.4.5 其他填充——padding-bottom、padding-left、padding-right

A.4.6 复合属性：填充——padding

A.5 边框属性

A.5.1 边框样式——border-style

A.5.2 边框宽度——border-width

A.5.3 边框颜色——border-color

A.5.4 边框属性——border

A.6 定位及尺寸属性

A.6.1 定位方式——position

A.6.2 元素位置——top、right、bottom、left

A.6.3 层叠顺序——z-index

A.6.4 浮动属性——float

A.6.5 清除属性——clear

A.6.6 可视区域——clip

A.6.7 设定大小——width、height

A.6.8 超出范围——overflow

A.6.9 可见属性——visibility

A.7 列表属性

A.7.1 列表符号——list-style-type

A.7.2 图像符号——list-style-image

A.7.3 列表缩进——list-style-position

A.7.4 复合属性：列表——list-style

A.8 光标属性——cursor

A.9 滤镜属性

A.9.1 不透明度——alpha

A.9.2 动感模糊——blur

A.9.3 对颜色进行透明处理——chroma

A.9.4 设置阴影——dropShadow

A.9.5 对象的翻转——flipH、flipV

A.9.6 发光效果——glow

A.9.7 灰度处理——gray

A.9.8 反相——invert

A.9.9 X光片效果——Xray

A.9.10 遮罩效果——mask

A.9.11 波形滤镜——wave

附录B