第1章 写在前面 / 1
1.1 本书约定 / 1
1.2 在线查看示例效果 / 1
1.3 前/后端开发 / 2
1.3.1 前端开发是怎么回事 / 2
1.3.2 JavaScript和前端开发是什么关系 / 2
1.3.4 后端开发是怎么回事 / 3
1.4 一张网页是怎么加载出来的 / 3
1.5 服务器端和客户端 / 3
1.5.1 服务器端 / 3
1.5.2 客户端 / 4
1.6 HTML和CSS的关系 / 4
1.6.1 HTML是骨架 / 4
1.6.2 CSS是皮肤 / 8
HTML篇
第2章 HTML语法基础 / 12
2.1 元素——构成网页的基本单位 / 12
2.2 元素的属性——元素自身携带的功能和特性 / 13
2.3 注释——给代码添加的备注信息 / 14
2.4 本章小结 / 15
第3章 布局类元素——房子的楼板、柱子和大梁 / 16
3.1 布局元素必要的基础 / 16
3.1.1 <html>——最外层的元素,包含网页的全部内容 / 16
3.1.2 <head>——包含给机器看的内容 / 16
3.1.3 <body>——包含给人看的内容 / 17
3.2 其他布局元素 / 18
3.2.1 <div>——结构级别的容器 / 18
3.2.2 <main>——用于包裹页面的主体内容 / 19
3.2.3 <nav>——导航栏 / 20
3.2.4 <header>——概述 / 21
3.2.5 <section>——用于包裹有明确主题的区域 / 22
3.2.6 <aside>——用于包裹非主体的内容 / 24
3.3 <footer>——页脚 / 25
3.4 本章小结 / 27
第4章 功能类元素——房子的门、窗、水管和电气 / 28
4.1 <a>——链接 / 28
4.2 <h1>…<h6>——标题 / 29
4.3 <img>——图片 / 30
4.4 <p>——段落 / 31
4.5 <input>——单行文本输入框 / 31
4.6 <textarea>——多行文字输入框 / 37
4.7 <select>——下拉菜单 / 38
4.8 <button>——按钮 / 40
4.9 <form>——表单 / 40
4.10 <span>——文字级别的容器 / 40
4.11 <strong>——强调 / 41
4.12 <ol>——有序列表 / 42
4.13 <ul>——无序列表 / 44
4.14 表格类元素 / 44
4.15 <iframe>——网页里嵌套的网页 / 47
4.16 本章小结 / 47
CSS篇
第5章 CSS基础 / 50
5.1 为什么不直接在HTML代码中写样式 / 50
5.2 了解CSS的语法 / 52
5.3 引入CSS / 54
5.3.1 用<style>元素引入CSS / 54
5.3.2 用<link>元素引入CSS / 56
5.3.3 用@import指令引入CSS / 58
5.3.4 用style属性嵌入行内样式 / 59
5.4 本章小结 / 59
第6章 选择器——确定样式的作用范围 / 60
6.1 选择器的类型 / 60
6.1.1 元素选择器——div / 60
6.1.2 类选择器——.class / 61
6.1.3 ID选择器——#id / 64
6.1.4 属性选择器——[prop=value] / 66
6.1.5 全局选择器 / 68
6.2 选择器的组合使用 / 69
6.2.1 分组选择——多个选择,一套样式 / 69
6.2.2 多条件选择——多个选择,同一个元素 / 69
6.2.3 后代选择——通过“先人”找“后人” / 70
6.2.4 子选择——通过“爸爸”找“儿子” / 71
6.2.5 相邻兄弟选择——找“弟弟” / 72
6.2.6 通用兄弟选择——找所有“弟弟” / 72
6.3 伪类——按元素状态指定样式 / 73
6.4 伪元素——不是元素,胜似元素 / 79
6.5 本章小结 / 84
第7章 权重——样式发生冲突时怎么办 / 85
7.1 了解权重的级别 / 85
7.2 几种选择器的权重 / 88
7.2.1 全局选择器的权重 / 88
7.2.2 ID选择器和包含ID的属性选择器的权重 / 88
7.2.3 权重最高的关键词——!important / 89
7.3 继承 / 89
7.4 本章小结 / 92
第8章 给文字加样式 / 93
8.1 块方向和行内方向 / 93
8.2 text-indent——文字缩进 / 93
8.3 text-align——文字对齐 / 96
8.4 line-height——行高 / 97
8.5 vertical-align——文字垂直对齐 / 98
8.6 字距和词距 / 100
8.7 text-decoration——文字装饰 / 102
8.8 white-space——空白字符 / 107
8.9 word-break——换行和断词 / 110
8.10 本章小结 / 113
第9章 字体 / 114
9.1 字体族(字体家族) / 116
9.2 font-family——为文字指定字体 / 117
9.3 @font-face——为文字指定确切的字体 / 119
9.4 font-weight——为字体指定粗细 / 121
9.5 font-size——为字体指定大小 / 123
9.6 本章小结 / 125
第10章 框模型——所有元素都有四个框 / 127
10.1 识框模型 / 127
10.2 内容区 / 128
10.3 padding——内边距 / 128
10.4 border——边框 / 131
10.5 margin——外边距 / 133
10.6 本章小结 / 136
第11章 框的其他相关样式 / 137
11.1 outline——轮廓 / 137
11.2 color——文字颜色 / 138
11.3 background——背景 / 139
11.4 box-sizing——框尺寸 / 146
11.5 box-shadow——框阴影 / 148
11.6 overflow——溢出 / 150
11.7 本章小结 / 152
第12章 显示方式——元素怎么显示 / 153
12.1 none——不显示 / 153
12.2 block——占据母元素的整个宽 / 154
12.3 inline——宽度由内容的多少决定 / 155
12.4 inline-block——结合了前两种显示方式 / 156
12.5 本章小结 / 158
第13章 定位方式——元素该显示在什么位置 / 159
13.1 static——往网页的左上角流动 / 159
13.2 relative(相对定位) / 160
13.3 absolute(绝对定位) / 162
13.4 fixed(固定定位)——与窗口同步 / 166
13.5 sticky(黏滞定位)——自动“挂住” / 167
13.6 本章小结 / 169
第14章 元素层叠顺序 / 170
14.1 默认情况下的层叠顺序 / 170
14.2 通过非static定位方式展示层叠 / 170
14.3 通过z-index手动调整层叠 / 174
14.4 本章小结 / 176
第15章 值和单位 / 177
15.1 关键词 / 177
15.2 字符串 / 181
15.3 URL——资源地址 / 182
15.4 数字和百分比 / 183
15.5 长度 / 183
15.6 计算值 / 188
15.7 颜色 / 189
15.8 本章小结 / 194
第16章 浮动 / 195
16.1 理解浮动 / 195
16.2 单元素浮动的显示方式 / 197
16.3 多元素浮动的显示方式 / 198
16.3.1 浮动容器 / 198
16.3.2 多元素浮动的关系 / 199
16.4 浮动思维模型 / 201
16.5 清除浮动 / 203
16.6 本章小结 / 205
第17章 响应式布局 / 206
17.1 媒介的类型 / 206
17.2 媒介的特性 / 207
17.3 规则组合 / 211
17.4 添加媒介查询的常见方式 / 212
17.5 本章小结 / 212
第18章 弹性布局 / 213
18.1 Flexbox(弹性盒) / 213
18.2 了解Flex(轴) / 215
18.3 Flex的属性 / 216
18.3.1 flex-direction——控制主轴方向 / 216
18.3.2 flex-wrap——子项是否可以换行 / 221
18.3.3 flex-flow——同时指定方向和换行模式 / 223
18.3.4 justify-content——主轴方向排列方式 / 224
18.3.5 align-items——交叉轴方向排列方式 / 227
18.3.6 align-content——行列排列方式 / 232
18.3.7 align-self——交叉轴例外排列 / 238
18.3.8 flex-grow——填充容器的剩余空间 / 241
18.3.9 flex-shrink——在空间不足时做出让步 / 243
18.3.10 flex-basis——弹性子项的基础尺寸 / 245
18.4 本章小结 / 251
第19章 网格布局 / 252
19.1 一切无外乎行和列 / 252
19.2 容器和子项 / 253
19.3 行与列 / 253
19.4 网格线 / 256
19.5 定义方式网格模板 / 258
19.6 调整网格间距 / 262
19.7 调整子项的位置 / 263
19.8 调整网格中的区域 / 268
19.9 定义网格排列方式 / 273
19.10 本章小结 / 277
第20章 动画 / 278
20.1 transition——过渡 / 278
20.2 animation——动画 / 279
20.3 本章小结 / 283
· · · · · · (
收起)
1 有用 木铎 2023-02-07 21:20:31 四川
html和css的基础内容全世界都大差不差,各家的书区别都在内容的重新组织和表达上。 这本的组织和表达都能看出作者的用心,是不错的作品。 缺点是真的只有“核心”,内容相对单薄,再者内容上偶尔会有顾头不顾腚的现象,可能作者还不习惯驾驭长文稿
1 有用 木铎 2023-02-07 21:20:31 四川
html和css的基础内容全世界都大差不差,各家的书区别都在内容的重新组织和表达上。 这本的组织和表达都能看出作者的用心,是不错的作品。 缺点是真的只有“核心”,内容相对单薄,再者内容上偶尔会有顾头不顾腚的现象,可能作者还不习惯驾驭长文稿