前端HTML+CSS修炼之道 视频同步+直播PDF电子书下载

第1章探本溯源，前端开发基础漫谈 2

1.1前端开发是做什么的 2

1.2前端开发技术 5

1.2.1HTML超文本标记语言：搭建网页“结构” 5

1.2.2 CSS层叠样式表：给网页添加“样式” 6

1.2.3 JavaScript：让网页响应某种“行为” 6

1.3前端开发所需软件 7

1.3.1 Photoshop 8

1.3.2编辑器 11

1.3.3浏览器 12

1.4第一个HTML页面 12

1.4.1基本标记标签 13

1.4.2标签嵌套关系 19

1.5 ＜div＞标签简介 19

练习题 20

第2章CSS基础语法、选择器和样式冲突的解决方案 22

2.1 CSS概述 22

2.2定义CSS的基本语法 23

2.3基本选择器 25

2.3.1元素选择器 25

2.3.2 ID选择器 26

2.3.3类选择器 29

2.3.4伪类选择器 33

2.3.5伪元素选择器 35

2.3.6通用选择器 38

2.4复合选择器 39

2.4.1交集选择器 39

2.4.2并集选择器 40

2.4.3后代选择器 41

2.4.4子元素选择器 43

2.4.5相邻兄弟选择器 44

2.4.6属性选择器 45

2.5 CSS选择器的使用方法 47

2.6 CSS应用到 HTML页面的常用方式 47

2.6.1行内式 47

2.6.2内嵌式 48

2.6.3链接式 49

2.7 CSS的冲突与解决 50

练习题 53

第3章网页排版利器：CSS字体、文本、背景属性设置 55

3.1字体属性 55

3.1.1字体粗细属性：font-weight 55

3.1.2字体风格属性：font-style 56

3.1.3字体大小属性：font-size 58

3.1.4字体族属性：font-family 59

3.1.5文本行高属性：line-height 62

3.1.6字体属性：font 65

3.2文本属性 66

3.2.1颜色属性：color 66

3.2.2水平对齐属性：text-align 69

3.2.3首行缩进属性：text-indent 70

3.2.4文本修饰属性：text-decoration 71

3.2.5字符间距属性：letter-spacing 73

3.2.6字间距属性：word-spacing 74

3.3背景属性 75

3.3.1背景颜色属性：background-color 75

3.3.2背景图片属性：background-image 76

3.3.3背景图片重复属性：background-repeat 77

3.3.4背景图片位置属性：background-position 79

3.3.5背景图片滚动属性：background-attachment 81

3.3.6背景属性：background 83

练习题 84

第4章剖析“盒模型”特性，详解布局方寸间的逻辑关系 86

4.1盒子模型的组成 86

4.2盒子边框（border）设置 88

4.2.1设置边框风格 88

4.2.2设置边框宽度 90

4.2.3设置边框颜色 93

4.2.4统一设置边框的宽度、颜色和风格 95

4.2.5边框的形状 98

4.3盒子内边距（padding）设置 100

4.3.1内边距的设置 100

4.3.2 padding内边距的特点 103

4.4盒子外边距（margin）设置 105

4.4.1外边距的设置 105

4.4.2盒子外边距合并 107

4.4.3相邻盒子之间的水平间距 113

练习题 116

第5章世界是多样化的，标签是语义化的 118

5.1常用文本标签 118

5.1.1段落与换行标签 118

5.1.2标题字标签 119

5.1.3 ＜strong＞标签 121

5.1.4 ＜em＞标签 122

5.1.5 ＜mark＞标签 122

5.1.6＜time＞标签 123

5.1.7 ＜span＞标签 124

5.1.8空格和特殊字符的输入 124

5.2文档结构标签 126

5.2.1 ＜header＞标签 127

5.2.2＜article＞标签 128

5.2.3 ＜section＞标签 129

5.2.4＜main＞标签 130

5.2.5 ＜nav＞标签 130

5.2.6 ＜aside＞标签 131

5.2.7 ＜footer＞标签 131

练习题 132

第6章探究多媒体标签，揭秘各种元素类型 134

6.1多媒体标签 134

6.1.1 ＜object＞标签 134

6.1.2 ＜embed＞标签 136

6.1.3 ＜video＞标签 137

6.1.4 ＜audio＞标签 138

6.2元素类型 139

6.2.1 block块级元素 139

6.2.2 inline行内元素 140

6.2.3 inline-block行内块元素 142

6.2.4使用display属性改变元素类型 144

6.3使用CSS reset标签样式 147

练习题 148

第7章为网页配上精美图片、让列表清晰传达具象内容 150

7.1使用＜img＞标签在网页中插入图片 150

7.1.1网页常用图片格式 150

7.1.2插入图片的基本语法 150

7.1.3设置图片提示信息和替换信息 152

7.1.4使用标签属性设置图片大小 153

7.1.5使用CSS设置图片样式 154

7.2使用列表标签创建列表 156

7.2.1创建有序列表 156

7.2.2创建无序列表 159

7.2.3创建定义列表 161

7.2.4创建嵌套列表 162

7.2.5使用CSS列表属性设置列表样式 163

7.2.6使用列表和列表属性创建纵向菜单 164

7.2.7使用列表和display：inline创建横向菜单 166

7.2.8使用列表和display：inline-block实现图文横排 167

练习题 169

第8章使用超链接构建信息间的连接关系 171

8.1使用＜a＞标签创建链接 171

8.1.1创建链接的基本语法 171

8.1.2设置链接目标窗口 172

8.1.3链接路径的设置 173

8.2使用＜base＞标签设置链接基准URL 176

8.3链接的类型 178

8.4使用伪类设置链接样式 185

8.5链接与内联框架 187

8.5.1内联框架标签＜iframe＞ 187

8.5.2修改内联框架默认样式 188

8.5.3使用内联框架作为链接的目标窗口 188

8.5.4使用内联框架的优缺点 189

练习题 190

第9章呈现数据的利器：网页表格 192

9.1表格概述 192

9.2表格标签 194

9.2.1 ＜table＞标签 194

9.2.2 ＜tr＞标签 195

9.2.3 ＜td＞和＜th＞标签 195

9.2.4 ＜caption＞标签 195

9.2.5 ＜thead＞、＜tbody＞和＜tfoot＞标签 196

9.2.6使用colspan属性实现单元格跨列合并 197

9.2.7使用rowspan属性实现跨行操作 199

9.2.8使用表格标签属性格式化表格 200

9.3 CSS表格属性 202

9.4使用CSS格式化表格 204

9.5表格各元素的display属性值 206

9.6表格综合案例 206

练习题 210

第10章构建在控件之上的数据交互方案：网页表单 212

10.1表单概述 212

10.2 ＜form＞标签 212

10.3 input表单控件 213

10.3.1 input表单控件概述 213

10.3.2文本框 214

10.3.3密码框 215

10.3.4隐藏域 215

10.3.5文件域 216

10.3.6单选框和复选框 217

10.3.7提交按钮 218

10.3.8普通按钮 219

10.3.9重置按钮 220

10.3.10图像按钮 220

10.3.11 button元素按钮 222

10.4 label标签 223

10.5选择列表 224

10.6多行文本域 227

10.7表单元素的disabled和readonly属性 228

10.8表单新增属性 230

10.8.1 form属性 230

10.8.2 formaction属性 231

10.8.3 autofocus属性 231

10.8.4 pattern属性 232

10.8.5 placeholder属性 233

10.8.6 required属性 234

10.9元素轮廓（outline） 235

10.10表单元素的默认样式及重置 237

10.11表单美化 238

10.11.1单行文本框控件的美化 238

10.11.2按钮控件的美化 239

10.11.3单选框/复选框控件的美化 240

10.11.4上传文件控件美化 242

10.11.5下拉列表控件美化 244

10.12表单的元素类型 245

练习题 245

第11章玩转文档排版的犀利武器：浮动 247

11.1标准流排版 247

11.2浮动排版 248

11.2.1浮动设置 249

11.2.2浮动元素的表现及特征 249

11.2.3浮动清除 260

11.2.4使用空div清除浮动解决父元素高度塌陷问题 264

11.2.5使用伪元素清除浮动解决父元素高度塌陷问题 265

11.2.6使用BFC解决父元素高度塌陷问题 269

11.2.7使用overflow属性解决父元素高度塌陷问题 272

11.2.8使用BFC防止浮动元素覆盖文档流元素 274

练习题 276

第12章平面之上的叠加艺术：定位 278

12.1定位排版属性position 278

12.1.1静态定位 278

12.1.2相对定位 278

12.1.3绝对定位 281

12.1.4固定定位 289

12.2定位层级 295

12.3定位相关知识 299

12.3.1全屏的div设置 299

12.3.2透明度/透明滤镜 300

12.3.3 margin负值 305

12.3.4元素的绝对居中 312

练习题 313

第13章技术的世界只崇拜实干者：整站静态页面开发 315

13.1网站前期规划 315

13.1.1网站目录划分 315

13.1.2网站文件夹、文件的命名 316

13.1.3网站整体规划 319

13.2网站首页制作 320

13.2.1网站首页结构 320

13.2.2网站首页之头部＆banner版块的制作 320

13.2.3以图换字 322

13.2.4滑动门 325

13.2.5 CSS精灵图 328

13.2.6网站首页之课程介绍版块的制作 330

13.2.7文字阴影text-shadow 332

13.2.8盒阴影box-shadow 334

13.2.9圆角border-radius 337

13.2.10网站首页之学员作品展示版块的制作 341

13.2.11网站首页之讲师介绍版块的制作 341

13.2.12网站首页之妙味服务版块的制作 342

13.2.13网站首页之页脚版块的制作 343

13.3网站其他页面的制作 343

13.4网站优化 344

13.5网站建设技巧 346

13.5.1最小宽度/最小高度 346

13.5.2最大宽度/最大高度 347

13.5.3 text-overflow文本溢出 348

练习题 348