本书从Web前端技术角度出发，以具体商业网站页面的制作为编写主线，分为8章内容，包括网页设计概述、创建网站项目、盒子模型、常见的HTML标签与CSS的搭配、常见布局流、个人网页布局实战、CSS进阶知识、商业网站布局实战。

本书内容的组织考虑了初学者知识接纳的程度与提升空间，遵循了难度循序渐进的教学原则，体现了网页设计的完整流程，通过本书的学习，读者将对素材搜集、代码开发、后期维护方面的工作有所认识。

本书既可作为职业院校计算机、电子商务、大数据相关专业的教材，也可作为网页设计师、淘宝美工等相关人员的培训教材或参考书。

前言

第1章　网页设计概述1

1.1　HTML、CSS的概念1

1.2　网页制作初学者上手工具5

1.2.1　选择高效的代码编辑器6

1.2.2　安装调试用的浏览器6

1.2.3　善于使用搜索引擎求解问题7

1.3　基础练习11

1.4　扩展练习18

第2章　创建网站项目19

2.1　站点相关命名规范19

2.2　图片文件规范化22

2.2.1　图片格式22

2.2.2　图片尺寸24

2.2.3　图片命名25

2.3　书写HTML代码的习惯26

2.3.1　保持正确的缩进26

2.3.2　充分的注释28

2.3.3　标签尽可能语义化29

2.4　基础练习30

2.5　扩展练习35

第3章　盒子模型37

3.1　盒子模型的特点37

3.2　标准盒子模型38

3.3　盒子模型的相关属性39

3.3.1　width和height属性39

3.3.2　margin属性52

3.3.3　padding属性55

3.3.4　border属性56

3.3.5　background属性57

3.4　基础练习58

3.5　扩展练习72

第4章　常见的HTML标签与CSS的搭配73

4.1　块元素、内联元素、内联块级元素的特征74

4.2　常见CSS属性75

4.3　常见的选择器类型76

4.3.1　标签选择器76

4.3.2　id选择器77

4.3.3　类选择器82

4.3.4　通配符选择器（通用选择器）85

4.3.5　后代选择器86

4.3.6　标签选择器、id选择器、类选择器的优先级86

4.4　结构类标签88

4.4.1　<header>标签88

4.4.2　<nav>标签88

4.4.3　<article>标签91

4.4.4　<section>标签91

4.4.5　<footer>标签92

4.5　文本类标签92

4.5.1　<p>标签92

4.5.2　<h1> ~ <h6>标签94

4.5.3　<br>标签96

4.5.4　<span>和<i>标签97

4.5.5　<sub>和<sup>标签97

4.5.6　<em>和<strong>标签97

4.6　<a>标签98

4.7　图像、视音频类标签102

4.7.1　< img>标签102

4.7.2　<video>标签104

4.7.3　<audio>标签106

4.8　列表类标签107

4.8.1　<ul>标签107

4.8.2　<ol>标签113

4.8.3　<dl>标签116

4.9　表格标签118

4.10　表单类标签125

4.10.1　<form>标签125

4.10.2　<input>标签126

4.10.3　<textarea>标签126

4.10.4　<select>标签126

4.11　基础练习127

4.12　扩展练习131

第5章　常见布局流132

5.1　标准文档流布局132

5.2　浮动流布局138

5.3　定位流布局149

5.3.1　相对定位149

5.3.2　绝对定位151

5.3.3　固定定位153

5.4　网格、弹性盒子等布局流156

5.5　基础练习157

5.6　扩展练习162

第6章　个人网页布局实战163

6.1　将网页截图切片163

6.2　网站目录、文件整理167

6.3　搭建项目并进行页面布局168

6.4　代码整理173

6.5　扩展练习175

第7章　CSS进阶知识177

7.1　外部样式表177

7.2　进一步了解CSS的样式优先级178

7.3　掌握更多的CSS选择器179

7.3.1　关系选择器179

7.3.2　属性选择器183

7.3.3　伪类选择器184

7.3.4　伪元素选择器189

7.4　CSS过渡与动画191

7.4.1　过渡效果191

7.4.2　@keyframes规则193

7.5　扩展练习195

第8章　商业网站布局实战197

8.1　确定研究目标197

8.2　搜集相关图文素材197

8.3　网站目录及文件的搭建、整理198

8.4　制作首页布局199

8.4.1　初步搭建页面主要容器的HTML结构 200

8.4.2　原型优化阶段203

8.4.3　代码整理阶段208

8.5　设计一级栏目页面213

8.5.1　准备工作213

8.5.2　复用首页中有用的代码及样式214

8.5.3　更新海报区代码215

8.5.4　内容区的设计216

8.5.5　CSS代码的整理及样式表外联221

8.6　设计详情页布局224

8.6.1　复用首页中的相关代码225

8.6.2　页头区的设计225

8.6.3　内容区容器的布局226

8.6.4　在内容区添加图文混排内容227

8.6.5　在内容区底部添加上下文的链接228

8.6.6　代码整理229

8.7　扩展练习230

参考文献　231