从零开始:HTML+CSS3快速入门教程

第 1章 初识HTML5——完成第 一个HTML5 页面

1.1 准备HTML5 开发环境 010

1.1.1 浏览器的使用 010

1.1.2 下载编辑器 013

1.1.3 HTML5 的学习方法 014

1.2 第 一个HTML5 页面 015

1.2.1 用HBuilderX 创建一个项目 015

1.2.2 在页面中写入内容 016

1.3 用CSS 美化页面 017

1.3.1 给页面添加背景 018

1.3.2 将页面中的文本元素居中 021

1.3.3 调整页面文字的字体和颜色 023

1.3.4 给按钮添加边框和背景色 024

1.3.5 给页面增加动态效果 026

1.4 在手机上查看页面 028

第 2章 HTML 语法和基础标签

2.1 HTML 基础语法 032

2.1.1 HTML 语法规则 032

2.1.2 HTML 文档的基础结构 033

2.1.3 元素的嵌套 033

2.2 文本元素 034

2.2.1 标题 035

2.2.2 段落—— 标签 035

2.2.3 HTML 折行——
标签 036

2.2.4 文本格式化 037

2.3 HTML 超链接—— 标签 038

2.3.1 初识超链接 038

2.3.2 超链接语法 039

2.3.3 href 属性——绝对路径和相对路径 040

2.3.4 target 属性 041

2.3.5 标签的应用 041

2.4 HTML 图像—— 标签 045

2.5 列表 047

2.5.1 无序列表 048

2.5.2 有序列表 048

2.5.3 定义列表 048

2.5.4 列表的嵌套 049

第3章 CSS 语法和基础属性

3.1 在HTML 文档中引入CSS 的

3 种常用方法 054

3.1.1 外部样式表——

使用 标签引入CSS 样式表 055

3.1.2 内部样式表 057

3.1.3 内联样式 058

3.2 CSS 语法 058

3.2.1 CSS 结构与规则 058

3.2.2 选择器的种类 060

3.2.3 继承 063

3.3 CSS 颜色 065

3.4 文本的常用样式 066

3.4.1 文本的颜色和常用属性 066

3.4.2 字体 068

3.4.3 背景 072

3.4.4 CSS 链接 079

第4章 盒模型布局——DIV CSS3 页面布局

4.1 盒模型的基础知识 084

4.1.1 盒模型的组成 084

4.1.2 查看元素的盒模型 084

4.2 边框 085

4.2.1 边框的组成 085

4.2.2 使用边框的特性制作三角形 086

4.2.3 边框的圆角效果——border-radius 088

4.3 内边距 088

4.3.1 padding 会撑大元素的大小 089

4.3.2 padding 的复合写法 090

4.4 外边距 091

4.4.1 margin 的作用 091

4.4.2 margin 在使用中的问题 094

4.5 盒模型的大小 098

4.6 元素的display 属性 102

4.6.1 元素的隐藏 102

4.6.2 块元素和内联元素 104

4.6.3 块元素与内联元素之间的转化 106

4.6.4 auto 实现块元素居中显示 108

4.7 内联块 109

4.8 初始化页面样式 112

第5章 浮动布局——实现网页的经典布局

5.1 浮动的基本语法 117

5.1.1 浮动的定义 117

5.1.2 float 属性 118

5.2 浮动的特征 119

5.3 clear 属性 125

5.4 清除浮动 126

5.4.1 高度塌陷 126

5.4.2 清除浮动的方法 128

5.4.3 使用伪类清除浮动 131

5.5 实战练习 134

5.6 页面布局的建议 144

第6章 定位——实现元素的叠加

6.1 定位的position 属性 149

6.2 层级 150

6.3 相对定位 151

6.4 绝对定位 152

6.5 固定定位 155

6.6 透明度 157

6.6.1 opacity 157

6.6.2 rgba(r, g, b, a) 159

第7章 表格与表单——信息展示与信息采集

7.1 表格 165

7.1.1 表格结构 165

7.1.2 表格的边框 166

7.1.3 区分表格头部与表格主体 167

7.1.4 单元格合并 169

7.1.5 带标题的表格 171

7.1.6 美化表格 171

7.2 表单 177

7.2.1 form 元素 177

7.2.2 input 元素 177

7.2.3 其他表单元素 183

第8章 HTML5 与CSS3 的新特性

8.1 HTML5 的新增元素 191

8.2 CSS3 的新增样式 194

8.2.1 文本属性 194

8.2.2 字体属性 195

8.2.3 背景 196

8.2.4 过渡效果 200

8.2.5 动画 201

8.2.6 圆角边框 202

8.2.7 2D 转换 203

8.2.8 calc() 函数计算 206

第9章 PC 端实战——制作一个购物网页

9.1 PxCook 工具介绍 211

9.1.1 PxCook 下载 211

9.1.2 PxCook 安装 211

9.1.3 PxCook“快速入门”文档 212

9.1.4 新建项目 212

9.1.5 开发模式 213

9.1.6 设计模式 214

9.1.7 配合Photoshop 完成切图 215

9.2 项目结构 215

9.3 网页制作前的准备 217

9.3.1 分辨率 217

9.3.2 内容居中 217

9.4 项目布局 218

9.5 部分难点讲解 220

9.5.1 图文对齐 220

9.5.2 锚点 223

9.6部分中.page1 难点 223

9.6.1 复杂页面的选择器使用 224

9.6.2 留白较多的页面怎样布局 225

9.7部分中.page2 难点 225

9.8部分中.page3 难点 225

9.9 小结 226

附录

HTML 元素速查表（按字母顺序排列） 227

CSS 属性速查表 230

盒模型相关属性 232

HTML 实体符号速查表 236

CSS3 选择器 239

CSS 单位速查表 240

思考与练习答案 241