人人都能学懂的前端开发电子书

Preface 前言

第1章 初识前端

1.1 什么是前端 预计阅读时间5分钟

1.1.1 一道经典的面试题

1.1.2 前端后端怎么区分

1.1.3 一些小问题

1.2 网页为什么叫HTML 预计阅读时间5分钟

1.2.1 常见浏览器介绍

1.2.2 浏览器的规范与W3C

1.3 编写第一个网页 预计阅读时间12分钟

1.4 开发前的准备工作 预计阅读时间9分钟

1.4.1 使用开发工具

1.4.2 代码基本规范

知识补给站

补给1：什么是IP

补给2：什么是DNS

补给3：你了解域名吗

补给4：什么是服务器

补给5：修改文件扩展名

补给6：何为绿色软件

单词表

第2章 准备工作

2.1 写一篇博客 预计阅读时间5分钟

2.2 制作百度新闻列表 预计阅读时间6分钟

2.2.1 无序列表

2.2.2 有序列表

2.3 向网页中添加图片 预计阅读时间10分钟

2.3.1 图片的排列方式

2.3.2 百分比大小

2.4 如何获取自己喜欢的图片 预计阅读时间10分钟

2.4.1 图片另存为

2.4.2 开发者工具

2.5 先搞懂路径问题 预计阅读时间4分钟

2.5.1 相对路径与绝对路径的区分

2.5.2 图片引入练习

2.6 来模拟个百度云盘 预计阅读时间10分钟

2.7 批量的数据展示 预计阅读时间12分钟

2.8 个人简历制作 预计阅读时间12分钟

2.9 QQ登录表单 预计阅读时间9分钟

2.10 其他属性 预计阅读时间8分钟

知识补给站

补给1：表单的密码管理

补给2：常见的图片格式

单词表

第3章 样式基础与布局

3.1 认识CSS 预计完成时间8分钟

3.1.1 结构表现分离

3.1.2 感受样式的作用

3.1.3 提取自己想要的颜色

3.2 容器的作用 预计完成时间16分钟

3.2.1 给一篇文章排版

3.2.2 div容器

3.2.3 span容器

3.3 样式选择器 预计完成时间20分钟

3.4 样式为什么会重叠 预计完成时间23分钟

3.5 优先级可以精确的计算吗 预计完成时间28分钟

3.5.1 选择器的权重值

3.5.2 头条新闻列表

知识补给站

补给1：颜色为什么用十六进制表示

补给2：什么是ID

补给3：代码注释的重要性

补给4：什么是权重值

单词表

第4章 图文的基本处理与混排

4.1 文本样式的处理 预计完成时间12分钟

4.1.1 字体基础样式

4.1.2 字体排列方式

4.2 添加背景图 预计完成时间19分钟

4.2.1 背景图与img标签的区别

4.2.2 背景图的平铺

4.2.3 背景图的定位

4.2.4 平铺的巧妙利用

4.3 浮动布局 预计完成时间41分钟

4.3.1 文字环绕

4.3.2 水平排列

4.3.3 高度塌陷

4.3.4 清除浮动影响

4.4 完成一个聊天对话框 预计完成时间15分钟

4.5 浮动的进阶 预计完成时间11分钟

4.5.1 浮动元素的排列原则

4.5.2 右浮动的顺序问题

4.5.3 浮动元素的重叠问题

4.6 为什么需要盒模型 预计完成时间31分钟

4.6.1 外边距margin

4.6.2 填充padding

4.6.3 边框border

4.7 完成一个更复杂的布局 预计完成时间55分钟

4.8 命令的简写形式 预计完成时间5分钟

4.8.1 背景background

4.8.2 边框border

4.8.3 font字体

4.8.4 margin边距

4.8.5 color颜色

4.8.6 padding填充

知识补给站

补给1：浏览器中的坐标系

补给2：控制面板的使用

单词表

第5章 页面布局与基本交互

5.1 了解元素类型 预计完成时间20分钟

5.1.1 block与inline

5.1.2 水平排列的差异

5.2 精准的定位元素 预计完成时间41分钟

5.2.1 相对定位与绝对定位

5.2.2 坐标体系

5.2.3 固定定位

5.2.4 如何确定参考系

5.3 鼠标的hover效果 预计完成时间8分钟

5.4 滤镜相册 预计完成时间19分钟

5.5 精灵图 预计完成时间23分钟

知识补给站

补给：制作精灵图片

单词表

第6章 智能表单与BFC规则

6.1 语义化标签 预计完成时间17分钟

6.1.1 语义化的作用

6.1.2 常见标签

6.2 智能表单制作 预计完成时间26分钟

6.3 其他属性 预计完成时间5分钟

6.3.1 关于resize属性

6.3.2 关于outline属性

6.4 overflow的作用 预计完成时间13分钟

6.5 适当了解一下BFC 预计完成时间11分钟

知识补给站

补给1：什么是URL

补给2：程序漏洞为什么叫BUG

单词表

第7章 高级选择器与动画

7.1 文件图标的添加 预计完成时间28分钟

7.1.1 nth-child（n）

7.1.2 属性选择器

7.1.3 nth-of-type（n）

7.2 电影IMDB排行 预计完成时间19分钟

7.3 如何学习不常见的CSS选择器 预计完成时间8分钟

7.4 一个精致的开关 预计完成时间48分钟

7.4.1 阴影的概念

7.4.2 伪元素

7.4.3 背景过渡

7.4.4 盒子阴影

7.4.5 复选框的：checked状态

7.5 过渡效果 预计完成时间11分钟

7.5.1 帧和帧率的概念

7.5.2 transition属性

7.5.3 升级照片墙

7.6 综合练习 预计完成时间20分钟

7.7 字体图标 预计完成时间24分钟

知识补给站

补给1：什么是Unicode

补给2：计算机为什么会采用二进制

补给3：硬盘为什么会缩水

单词表

第8章 变形与3D

8.1 元素也能变形 预计完成时间35分钟

8.1.1 定位与过渡的结合

8.1.2 位移

8.1.3 缩放

8.1.4 旋转

8.1.5 综合练习

8.2 高级扩展 预计完成时间41分钟

8.2.1 透视与3D效果

8.2.2 3D翻转菜单

8.2.3 自定义帧动画

单词表

第9章 移动端布局

9.1 什么叫响应式网页 预计完成时间25分钟

9.1.1 响应式网页布局

9.1.2 媒介查询

9.2 PC端与移动端的差别 预计完成时间8分钟

9.3 移动端网页适配 预计完成时间5分钟

9.4 viewport 预计完成时间4分钟

9.5 进阶技巧 预计完成时间12分钟

知识补给站

补给：什么是像素

单词表

第10章 布局神器flex

10.1 弹性盒模型 预计完成时间41分钟

10.1.1 display:flex

10.1.2 flex的布局特性

10.1.3 水平垂直居中

10.1.4 强大的弹性盒模型

10.2 移动端网页综合练习 预计完成时间57分钟

单词表

第11章 项目实战：制作个人站点

11.1 为什么需要个人网站 预计完成时间3分钟

11.2 动手之前先学点设计 预计完成时间12分钟

11.2.1 拟物化与扁平化

11.2.2 复杂的动画如何处理

11.3 需要花钱买服务器吗 预计完成时间60分钟

11.4 项目的开发过程 预计完成时间5分钟

11.5 常见特效的实现 预计完成时间150分钟

11.5.1 动态背景

11.5.2 banner图切换

11.5.3 时间轴效果

11.5.4 美化卡片列表

11.5.5 打字机效果

11.6 如何添加音频和视频 预计完成时间10分钟

11.6.1 添加音频

11.6.2 添加视频

知识补给站

补给1：世界上第一个程序员是谁

补给2：蓝光高清与1080P的区别是什么

单词表

附录

附录A 单词汇总

附录B 知识点索引