Div+CSS 3.0网页布局案例精粹(升级版)电子书

书名页

内容简介

版权页

前　言

第1章　网页和网站制作流程

1.1　认识网页和网站

1.1.1　网页和网站

1.1.2　网页的基本构成元素

1.2　什么是网页设计

1.2.1　网页设计概述

1.2.2　网页设计和网页制作

1.2.3　网页设计的特点

1.2.4　网页设计的相关术语

1.3　网页设计涵盖的内容

1.3.1　视听元素

1.3.2　版式设计

1.4　如何设计网页

1.4.1　网页设计的基本原则

1.4.2　网页设计成功的要素

1.4.3　网页设计风格及色彩搭配

1.5　网页设计的原则

1.5.1　为用户考虑原则

1.5.2　主题突出原则

1.5.3　整体性原则

1.5.4　内容与形式统一原则

1.5.5　及时更新和维护原则

1.6　网页设计师应具备的素质

1.6.1　艺术素质

1.6.2　技能素质

1.6.3　综合素质

1.7　网站的制作流程

1.7.1　前期策划

1.7.2　原型设计

1.7.3　页面美化

1.7.4　页面开发

1.7.5　后期维护

1.8　静态页面的制作流程

1.8.1　观察设计稿

1.8.2　拆分设计稿

1.8.3　网页设计实现

第2章　CSS入门

2.1　CSS的基本概念

2.1.1　CSS的特点

2.1.2　CSS的基本语法

2.1.3　CSS的冲突

2.2　网页设计中的CSS

2.2.1　如何使用CSS

2.2.2　CSS能做什么

2.2.3　CSS不能做什么

2.3　CSS的基本用法

2.3.1　内联样式表

2.3.2　嵌入样式表

2.3.3　外部样式表

2.4　CSS中的单位和值

2.4.1　定义颜色值

2.4.2　定义字体

2.5　CSS的基础选择符

2.5.1　通配选择符

2.5.2　标签选择符

2.5.3　id选择符

2.5.4　类选择符

2.5.5　群组选择符

2.5.6　基础选择符浏览器适配

2.6　CSS的层次选择符

2.6.1　后代选择符

2.6.2　子选择符

2.6.3　相邻兄弟选择符

2.6.4　通用兄弟选择符

2.6.5　层次选择符浏览器适配

2.7　伪类选择符和伪元素选择符

2.7.1　动态伪类选择符

2.7.2　目标伪类选择符

2.7.3　语言伪类选择符

2.7.4　UI元素状态伪类选择符

2.7.5　结构伪类选择符

2.7.6　伪类选择符浏览器适配

2.7.7　伪元素选择符

2.8　应用案例——为页面添加CSS样式

2.8.1　设计分析

2.8.2　制作步骤

2.8.3　案例总结

2.9　举一反三——制作产品介绍网站页面

2.9.1　案例分析

2.9.2　视频操作

第3章　使用Div+CSS布局页面

3.1　定义Div

3.1.1　什么是Div

3.1.2　插入Div

3.1.3　Div的嵌套和固定格式

3.2　CSS布局定位

3.2.1　浮动定位

3.2.2　position定位

3.3　可视化盒子模型

3.3.1　盒子模型

3.3.2　视觉可视化模型

3.3.3　空白边叠加

3.4　常见的网页布局方式

3.4.1　居中布局设计

3.4.2　浮动布局设计

3.4.3　高度自适应

3.5　盒子模型的控制属性

3.5.1　overflow

3.5.2　overflow-x

3.5.3　overflow-y

3.6　应用案例——使用Div+CSS布局页面

3.6.1　设计分析

3.6.2　制作步骤

3.6.3　案例总结

3.7　举一反三——制作健康网站页面

3.7.1　案例分析

3.7.2　视频操作

第4章　使用CSS控制网页中的背景

4.1　背景颜色

4.1.1　设置页面背景颜色

4.1.2　设置块背景颜色

4.1.3　渐变背景

4.2　背景图片

4.2.1　为页面设置背景图片

4.2.2　设置背景图片的重复方式

4.2.3　设置背景图片的位置

4.2.4　设置背景滚动

4.2.5　背景样式缩写的方式

4.3　背景定位

4.3.1　背景定位属性的语法

4.3.2　背景定位属性的浏览器适配

4.4　背景裁切

4.4.1　背景裁切属性的语法

4.4.2　背景裁切属性的浏览器适配

4.5　背景大小

4.5.1　背景大小属性的语法

4.5.2　背景大小属性的浏览器适配

4.6　多重背景图像

4.6.1　多重背景图像属性的语法

4.6.2　多重背景图像属性的浏览器适配

4.6.3　CSS多重背景属性的优势

4.7　应用案例——制作金融类网站页面

4.7.1　设计分析

4.7.2　制作步骤

4.7.3　案例总结

4.8　举一反三——制作电子商品网站页面

4.8.1　案例分析

4.8.2　视频操作

第5章　使用CSS控制页面文字样式

5.1　控制文字样式

5.1.1　文字字体和大小

5.1.2　文字颜色和粗细

5.1.3　文本的3种样式

5.1.4　文本的美化方式

5.1.5　英文字母大小写

5.2　控制段落样式

5.2.1　段落水平对齐

5.2.2　段落垂直对齐

5.2.3　行间距和字间距

5.2.4　首字下沉

5.3　文字阴影及模糊

5.3.1　文字阴影及模糊属性的语法

5.3.2　文字阴影及模糊属性的浏览器适配

5.4　文字溢出

5.4.1　文字溢出属性的语法

5.4.2　文字溢出属性的浏览器适配

5.5　文字断开转行

5.5.1　文字断开转行属性的语法

5.5.2　文字断开转行属性的浏览器适配

5.6　应用案例——制作设计类网站页面

5.6.1　设计分析

5.6.2　制作步骤

5.6.3　案例总结

5.7　举一反三——制作社区类网站页面

5.7.1　案例分析

5.7.2　视频操作

第6章　使用CSS控制图片样式

6.1　图片样式

6.1.1　图片边框设置

6.1.2　图片缩放设置

6.2　图片对齐

6.2.1　水平对齐设置

6.2.2　垂直对齐设置

6.3　图文混排

6.3.1　文本混排

6.3.2　设置混排间距

6.4　图像边框

6.4.1　图像边框属性的语法

6.4.2　图像边框属性的浏览器适配

6.5　边框圆角

6.5.1　边框圆角属性的语法

6.5.2　四个子属性

6.5.3　边框圆角属性的浏览器适配

6.6　边框阴影

6.6.1　边框阴影属性的语法

6.6.2　边框阴影属性的浏览器适配

6.7　边框颜色

6.7.1　边框颜色属性的语法

6.7.2　边框颜色属性的浏览器适配

6.8　应用案例——制作婚庆网站页面

6.8.1　设计分析

6.8.2　制作步骤

6.8.3　案例总结

6.9　举一反三——制作产品介绍网站页面

6.9.1　案例分析

6.9.2　视频操作

第7章　使用CSS控制列表样式

7.1　列表控制概述

7.1.1　列表控制原则

7.1.2　列表的类型及使用

7.1.3　改变项目样式

7.1.4　图片符号

7.2　使用列表制作实用菜单

7.2.1　无须表格的菜单

7.2.2　菜单的横竖转换

7.3　opacity

7.3.1　opacity属性的语法

7.3.2　Opacity属性的浏览器适配

7.4　CSS颜色模式

7.4.1　HSL颜色模式的语法

7.4.2　HSLA颜色模式的语法

7.4.3　RGBA颜色模式的语法

7.4.4　HSL、HSLA和RGBA颜色模式的浏览器适配

7.5　应用案例——制作音乐网站页面

7.5.1　设计分析

7.5.2　制作步骤

7.5.3　案例总结

7.6　举一反三——制作设计工作室网站页面

7.6.1　案例分析

7.6.2　视频操作

第8章　使用CSS控制表单样式

8.1　表单设计概述

8.1.1　表单的设计原则

8.1.2　表单的分类

8.2　表单的设计

8.2.1　表单和表单元素

8.2.2　标签、字段集和图例

8.2.3　使用CSS控制文本字段

8.2.4　使用CSS控制复选框与单选框

8.2.5　使用CSS控制列表与跳转菜单

8.3　应用案例——制作网站的用户注册页面

8.3.1　设计分析

8.3.2　制作步骤

8.3.3　案例总结

8.4　举一反三——制作网站的用户登录页面

8.4.1　案例分析

8.4.2　视频操作

第9章　使用CSS美化浏览器效果

9.1　使用CSS控制超链接

9.1.1　认识超链接

9.1.2　关于链接路径

9.1.3　超链接属性控制

9.1.4　伪元素的内容控制属性

9.1.5　图像映射

9.1.6　链接的打开方式

9.2　超链接特效

9.2.1　按钮式超链接

9.2.2　浮雕式超链接

9.3　鼠标指针特效

9.3.1　使用CSS控制鼠标指针样式

9.3.2　鼠标指针变化的超链接

9.4　box-sizing

9.4.1　box-sizing属性的语法

9.4.2　box-sizing属性的浏览器适配

9.5　resize

9.5.1　resize属性的语法

9.5.2　resize属性的浏览器适配

9.6　outline

9.6.1　outline属性语法

9.6.2　outline属性的浏览器适配

9.7　nav-index

9.7.1　nav-index属性的语法

9.7.2　nav-index属性的浏览器适配

9.8　应用案例——制作产品宣传网站页面

9.8.1　设计分析

9.8.2　制作步骤

9.8.3　案例总结

9.9　举一反三——制作运输公司网站页面

9.9.1　案例分析

9.9.2　视频操作

第10章　使用CSS控制变形动画效果

10.1　CSS变形属性简介

10.1.1　变形属性与函数

10.1.2　变形属性的浏览器适配

10.2　网页元素的2D变形效果

10.2.1　旋转变形

10.2.2　缩放和翻转变形

10.2.3　移动变形

10.2.4　倾斜变形

10.2.5　矩阵变形

10.2.6　定义变形的原点

10.2.7　同时使用多个变形函数

10.3　网页元素3D变形效果

10.3.1　3D移动变形

10.3.2　3D旋转变形

10.3.3　3D缩放变形

10.3.4　3D矩阵变形

10.4　CSS过渡效果

10.4.1　过渡属性简介

10.4.2　创建过渡动画

10.4.3　实现过渡效果

10.4.4　设置过渡时间

10.5　应用案例——实现网页元素变形过渡效果

10.5.1　设计分析

10.5.2　制作步骤

10.5.3　案例总结

10.6　举一反三——实现关键帧动画效果

10.6.1　案例分析

10.6.2　视频操作

第11章　CSS与JavaScript的综合应用

11.1　什么是JavaScript

11.1.1　了解JavaScript

11.1.2　JavaScript的特点

11.1.3　JavaScript的应用范围

11.1.4　CSS样式与JavaScript

11.2　JavaScript的语法基础

11.2.1　JavaScript的基本架构

11.2.2　JavaScript的基本语法

11.2.3　数据类型和变量

11.2.4　表达式和运算符

11.2.5　基本语句

11.3　jQuery

11.3.1　jQuery Mobile

11.3.2　jQuery UI

11.4　其他JavaScript框架

11.4.1　React

11.4.2　Vue

11.4.3　Angular

11.5　应用案例——在网页中应用交互效果

11.5.1　设计分析

11.5.2　制作步骤

11.5.3　案例总结

11.6　举一反三——制作婚纱摄影网站页面

11.6.1　案例分析

11.6.2　视频操作

第12章　CSS与XML的综合应用

12.1　XML基础

12.1.1　XML的特点

12.1.2　XML与HTML

12.1.3　XML基本语法

12.1.4　格式正确的XML文档

12.2　XML与CSS的链接

12.2.1　使用xml:stylesheet处理指令

12.2.2　使用@import指令

12.3　XML与CSS的应用

12.3.1　显示学生信息XML文档

12.3.2　XML文档实现隔行变色的表格

12.4　应用案例——在页面中调用XML数据

12.4.1　设计分析

12.4.2　制作步骤

12.4.3　案例总结

12.5　举一反三——制作企业网站页面

12.5.1　案例分析

12.5.2　视频操作

第13章　CSS与Ajax的综合应用

13.1　了解Ajax

13.1.1　Ajax简介

13.1.2　Ajax的关键元素

13.1.3　Ajax的优势

13.1.4　实现Ajax的步骤

13.1.5　使用CSS的必要性

13.2　Ajax基础

13.2.1　创建XMLHttpRequest对象

13.2.2　发出Ajax请求

13.2.3　处理服务器响应

13.2.4　使用CSS样式

13.3　HTML简介

13.3.1　HTML标签

13.3.2　HTML事件属性

13.3.3　HTML标准属性

13.4　应用案例——使用Ajax实现页面特效

13.4.1　设计分析

13.4.2　制作步骤

13.4.3　案例总结

13.5　举一反三——通过Ajax实现可拖动Div块

13.5.1　案例分析

13.5.2　视频操作

第14章　综合商业案例

14.1　综合案例——制作游戏类网站页面

14.1.1　设计分析

14.1.2　制作步骤

14.1.3　案例总结

14.2　综合案例——制作医疗保健类网站页面

14.2.1　设计分析

14.2.2　制作步骤

14.2.3　案例总结