Div+CSS 3.0网页布局案例精粹

.1.5.3 整体原则16
1.5.4 内容与形式相统一的原则17
1.5.5 更新和维护的原则18
1.6 网页设计师应具备的素质18
1.6.1 艺术素质18
1.6.2 技能素质19
1.6.3 综合素质19
1.7 网站的制作流程20
1.7.1 前期策划20
1.7.2 页面细化及实施21
1.7.3 后期维护22
1.8 静态页面的制作流程22
1.8.1 观察设计稿22
1.8.2 拆分设计稿23
1.8.3 网页设计的实现23
第2章 css样式入门25
2.1 css的基本概念26
2.1.1 css的特点26
2.1.2 css的类型27
2.1.3 css的基本语法28
2.1.4 css的冲突29
2.2 网页设计中的css30
2.2.1 怎样使用css30
2.2.2 css能做什么32
2.2.3 css不能做什么32
2.3 css样式表的基本用法33
2.3.1 怎样在html中插入样式表33
2.3.2 css样式表规则33
2.4 应用css到网页中34
2.4.1 内联样式34
2.4.2 嵌入样式表34
2.4.3 外部样式表35
2.5 单位和值35
2.5.1 定义颜色值36
2.5.2 定义字体37
2.5.3 群选择符38
2.5.4 派生选择符38
2.5.5 id选择符39
2.5.6 类别选择符39
2.6 应用实例——为页面添加css样式41
2.6.1 设计分析41
2.6.2 制作步骤41
2.6.3 案例总结47
2.7 举一反三——制作产品介绍网站48
2.7.1 案例分析48
2.7.2 视频操作49
第3章 使用div+css布局页面51
3.1 定义div52
3.1.1 什么是div52
3.1.2 插入div52
3.1.3 div的嵌套和固定格式54
3.2 css布局定位54
3.2.1 浮动定位55
3.2.2 position定位58
3.3 可视化盒模型60
3.3.1 盒子模型60
3.3.2 视觉可视化模型62
3.3.3 空白边叠加62
3.4 常用的布局方式63
3.4.1 居中布局设计63
3.4.2 浮动布局设计65
3.4.3 高度自适应设计68
3.5 css 3.0中盒模型的新增属性69
3.5.1 overflow69
3.5.2 overflow-x70
3.5.3 overflow-y71
3.6 应用实例——使用div+css布局页面72
3.6.1 设计分析73
3.6.2 制作步骤73
3.6.3 案例总结78
3.7 举一反三——制作健康网站78
3.7.1 案例分析78
3.7.2 视频操作79
第4章 使用css控制网页背景81
4.1 背景颜色82
4.1.1 设置页面背景颜色82
4.1.2 设置块背景颜色83
4.2 背景图片84
4.2.1 为页面设置背景图片84
4.2.2 背景图片的重复85
4.2.3 设置背景图片的位置86
4.2.4 设置背景滚动87
4.2.5 背景样式的缩写方式88
4.3 css 3.0中背景的新增属性89
4.3.1 background-origin89
4.3.2 background-clip90
4.3.3 background-size92
4.3.4 multiple backgrounds93
4.4 应用实例——制作金融类网站页面94
4.4.1 设计分析94
4.4.2 制作步骤95
4.4.3 案例总结101
4.5 举一反三——制作保健商品网站102
4.5.1 案例分析102
4.5.2 视频操作103
第5章 使用css控制文字样式105
5.1 控制文字样式106
5.1.1 字体和大小106
5.1.2 文字颜色和粗细110
5.1.3 斜体111
5.1.4 下画线、顶画线和删除线112
5.1.5 英文字母大小写113
5.2 控制段落样式113
5.2.1 段落水平对齐113
5.2.2 段落垂直对齐114
5.2.3 行间距和字间距115
5.2.4 首字下沉116
5.3 使用css对flash中的文字进行控制116
5.4 css 3.0中文字的新增属性118
5.4.1 text-shadow118
5.4.2 text-overflow119
5.4.3 word-wrap121
5.5 应用实例——制作设计类网站122
5.5.1 设计分析122
5.5.2 制作步骤122
5.5.3 案例总结129
5.6 举一反三——制作社区类网站129
5.6.1 案例分析129
5.6.2 视频操作130
第6章 使用css控制图片样式131
6.1 图片样式132
6.1.1 图片边框设置132
6.1.2 图片缩放设置135
6.2 图片对齐136
6.2.1 水平对齐设置136
6.2.2 垂直对齐设置137
6.3 图文混排138
6.3.1 文本混排138
6.3.2 设置混排间距139
6.4 css 3.0中边框的新增属性139
6.4.1 border-image140
6.4.2 border-radius141
6.4.3 box-shadow142
6.4.4 border-color143
6.5 应用实例——制作婚庆网站145
6.5.1 设计分析145
6.5.2 制作步骤146
6.5.3 案例总结150
6.6 举一反三——制作产品介绍网站150
6.6.1 案例分析151
6.6.2 视频操作152
第7章 使用css控制列表样式153
7.1 列表控制概述154
7.1.1 列表控制原则154
7.1.2 列表的类型及使用154
7.1.3 改变项目样式157
7.1.4 图片符号158
7.2 使用列表制作实用菜单159
7.2.1 无须表格的菜单159
7.2.2 菜单的横竖转换161
7.3 css 3.0中颜色的新增属性162
7.3.1 hsl colors162
7.3.2 hsla colors163
7.3.3 opacity164
7.3.4 rgba colors166
7.4 应用实例——制作音乐网站167
7.4.1 设计分析168
7.4.2 制作步骤168
7.4.3 案例总结172
7.5 举一反三——制作设计工作室网站172
7.5.1 案例分析173
7.5.2 视频操作173
第8章 使用css控制表单样式175
8.1 表单设计概述176
8.1.1 表单的设计原则176
8.1.2 表单应用分类177
8.2 表单的设计179
8.2.1 表单和表单元素179
8.2.2 标签、字段集和图例183
8.2.3 使用css控制文本字段185
8.2.4 使用css控制复选框与单选框185
8.2.5 使用css控制列表与跳转菜单186
8.3 css 3.0中控制内容的新增属性187
8.4 应用实例——制作用户注册页面188
8.4.1 设计分析189
8.4.2 制作步骤189
8.4.3 案例总结196
8.5 举一反三——制作用户登录页面196
8.5.1 案例分析197
8.5.2 视频操作197
第9章 使用css美化浏览器效果199
9.1 使用css控制超链接200
9.1.1 认识超链接200
9.1.2 关于链接路径202
9.1.3 超链接属性控制204
9.1.4 图像映射206
9.1.5 链接的打开方式208
9.2 超链接特效208
9.2.1 按钮式超链接208
9.2.2 浮雕式超链接210
9.3 鼠标特效210
9.3.1 css控制鼠标箭头211
9.3.2 鼠标变化的超链接211
9.4 css 3.0中用户界面的新增属性212
9.4.1 box-sizing212
9.4.2 resize214
9.4.3 outline215
9.4.4 nav-index216
9.5 应用实例——制作产品宣传网站218
9.5.1 设计分析218
9.5.2 制作步骤219
9.5.3 案例总结225
9.6 举一反三——制作运输公司网站225
9.6.1 案例分析225
9.6.2 视频操作226
第10章 应用css中的滤镜227
10.1 了解css滤镜228
10.1.1 alpha滤镜228
10.1.2 blur滤镜231
10.1.3 motionblur滤镜232
10.1.4 dropshadow滤镜233
10.1.5 shadow滤镜234
10.1.6 flip滤镜234
10.1.7 glow滤镜235
10.1.8 gray滤镜236
10.1.9 invert滤镜236
10.1.10 xray滤镜237
10.1.11 mask滤镜237
10.1.12 wave滤镜238
10.2 css 3.0中其他模块的新增属性239
10.2.1 @media239
10.2.2 columns240
10.2.3 @font-face242
10.2.4 speech243
10.3 应用实例——制作产品类网站245
10.3.1 设计分析245
10.3.2 制作步骤245
10.3.3 案例总结254
10.4 举一反三——制作网络游戏网站254
10.4.1 案例分析254
10.4.2 视频操作255
第11章 css与javascript的综合应用257
11.1 什么是javascript258
11.1.1 了解javascript258
11.1.2 javascript的特点260
11.1.3 javascript的应用范围261
11.1.4 css样式与javascript263
11.2 javascript的语法基础263
11.2.1 javascript的基本架构263
11.2.2 javascript的基本语法264
11.2.3 数据类型和变量267
11.2.4 表达式和运算符268
11.2.5 基本语句268
11.3 使用spry构件270
11.3.1 关于spry构件271
11.3.2 插入spry菜单271
11.3.3 插入spry选项卡式面板273
11.3.4 插入spry折叠式构件275
11.3.5 插入spry可折叠面板276
11.4 应用实例——在网页中应用spry构件278
11.4.1 设计分析279
11.4.2 制作步骤279
11.4.3 案例总结287
11.5 举一反三——制作婚纱摄影网站287
11.5.1 案例分析288
11.5.2 视频操作288
第12章 css与xml的综合应用289
12.1 xml基础290
12.1.1 xml的特点290
12.1.2 xml与html291
12.1.3 xml基本语法293
12.1.4 格式正确的xml文档296
12.2 xml与css的链接297
12.2.1 使用xml:stylesheet指令297
12.2.2 使用@import指令299
12.3 xml与css的应用299
12.3.1 显示学生信息299
12.3.2 实现隔行变色的表格302
12.4 应用实例——在html页面中调用xml数据305
12.4.1 设计分析306
12.4.2 制作步骤306
12.4.3 案例总结311
12.5 举一反三——制作企业网站311
12.5.1 案例分析312
12.5.2 视频操作313
第13章 css与ajax的综合应用315
13.1 了解ajax316
13.1.1 ajax简介316
13.1.2 ajax的关键元素317
13.1.3 ajax的优势318
13.1.4 实现ajax的步骤318
13.1.5 使用css的必要性319
13.2 ajax基础320
13.2.1 创建xmlhttprequest对象320
13.2.2 发出ajax请求321
13.2.3 处理服务器响应322
13.2.4 使用css样式322
13.3　html 5.0简介323
13.3.1 html 5.0标签323
13.3.2 html 5.0事件属性327
13.3.3 html 5.0标准属性329
13.4　应用实例——使用ajax 实现页面特效330
13.4.1 设计分析330
13.4.2 制作步骤330
13.4.3 案例总结338
13.5　举一反三——通过ajax 实现可拖动div块339
13.5.1 案例分析339
13.5.2 视频操作340
第14章 儿童教育类网站341
14.1 综合实例——制作儿童教育类网站342
14.1.1 设计分析342
14.1.2 制作步骤342
14.1.3 案例总结353
第15章 医疗保健类网站设计355
15.1 综合实例——制作医疗保健类网站356
15.1.1 设计分析356
15.1.2 制作步骤356
15.1.3 案例总结366
第16章 游戏类网站设计367
16.1　综合实例——制作游戏类网站368
16.1.1 设计分析368
16.1.2 制作步骤368
16.1.3 案例总结378