[
-
内容大纲
虽然HTML/CSS作为非常经典的技术，已经有很多人写过相关的教程，但它依然没有足够简单到任何人都可以尝试来学习。尽管作为前端技术方向，它有着丰富的界面交互，但里面隐藏的逻辑规则却很容易被人忽略。本书的主要内容为HTML/CSS的相关技术，包含了基础标签、智能表单和语义化标签等，同时还讲解了CSS选择器、文本修饰、图片修饰、浮动、溢出、经典盒模型与弹性盒模型、伪元素等，除PC端布局外还讲解了针对移动端的网页适配。
为了更好的阅读体验和学习效果，本书除了全彩印刷、扫码看视频，还大胆地做了几项创新性尝试，包括预计阅读时间、知识补给站、编程单词表、知识点案例化，以及在线练习平台等。
即便是非理工科出身的人，或者已经脱离系统学习多年的上班族，只要你对网页制作有兴趣，就可以学懂书中的内容。本书的读者对象主要针对网页开发零基础的人群，以及一些非计算机专业的网页开发爱好者。编程并非程序员的专利，作者希望本书可以极大限度地降低读者入门HTML/CSS的难度。 -
作者介绍
加百利，统信UOS系统认证工程师。现任神州数码高级前端开发工程师。从事互联网工作十余年。精通JavaEE、Web前端等技术，具有丰富的实战经验。擅长MobileWeb、Hybridapp、小程序等多种移动端开发。B站知识类UP主，视频累计播放量破百万。 -
目录
前言
第1章 准备工作
1.1 什么是前端
1.1.1 一道经典的面试题
1.1.2 前端后端怎么区分
1.1.3 一些小问题
1.2 网页为什么叫HTML
1.2.1 常见浏览器介绍
1.2.2 浏览器的规范与W3C
1.3 编写第一个网页
1.4 开发前的准备工作
1.4.1 使用开发工具
1.4.2 代码基本规范
知识补给站
补给1：什么是IP
补给2：什么是DNS
补给3：你了解域名吗
补给4：什么是服务器
补给5：修改文件扩展名
补给6：何为绿色软件
单词表
第2章 准备工作
2.1 写一篇博客
2.2 制作百度新闻列表
2.2.1 无序列表
2.2.2 有序列表
2.3 向网页中添加图片
2.3.1 图片的排列方式
2.3.2 百分比大小
2.4 如何获取自己喜欢的图片
2.4.1 图片另存为
2.4.2 开发者工具
2.5 先搞懂路径问题
2.5.1 相对路径与绝对路径的区分
2.5.2 图片引入练习
2.6 来模拟个百度云盘
2.7 批量的数据展示
2.8 个人简历制作
2.9 QQ登录表单
2.10 其他属性
知识补给站
补给1：表单的密码管理
补给2：常见的图片格式
单词表
第3章 样式基础与布局
3.1 认识CSS
3.1.1 结构表现分离
3.1.2 感受样式的作用
3.1.3 提取自己想要的颜色
3.2 容器的作用
3.2.1 给一篇文章排版
3.2.2 div容器
3.2.3 span容器
3.3 样式选择器
3.4 样式为什么会重叠
3.5 优先级可以精确的计算吗
3.5.1 选择器的权重值
3.5.2 头条新闻列表
知识补给站
补给1：颜色为什么用十六进制表示
补给2：什么是ID
补给3：代码注释的重要性
补给4：什么是权重值
单词表
第4章 图文的基本处理与混排
4.1 文本样式的处理
4.1.1 字体基础样式
4.1.2 字体排列方式
4.2 添加背景图
4.2.1 背景图与img标签的区别
4.2.2 背景图的平铺
4.2.3 背景图的定位
4.2.4 平铺的巧妙利用
4.3 浮动布局
4.3.1 文字环绕
4.3.2 水平排列
4.3.3 高度塌陷
4.3.4 清除浮动影响
4.4 完成一个聊天对话框
4.5 浮动的进阶
4.5.1 浮动元素的排列原则
4.5.2 右浮动的顺序问题
4.5.3 浮动元素的重叠问题
4.6 为什么需要盒模型
4.6.1 外边距margin
4.6.2 填充padding
4.6.3 边框border
4.7 完成一个更复杂的布局
4.8 命令的简写形式
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 了解元素类型
5.1.1 block与inline
5.1.2 水平排列的差异
5.2 精准的定位元素
5.2.1 相对定位与绝对定位
5.2.2 坐标体系
5.2.3 固定定位
5.2.4 如何确定参考系
5.3 鼠标的hover效果
5.4 滤镜相册
5.5 精灵图
知识补给站
补给：制作精灵图片
单词表
第6章 智能表单与BFC规则
6.1 语义化标签
6.1.1 语义化的作用
6.1.2 常见标签
6.2 智能表单制作
6.3 其他属性
6.3.1 关于resize属性
6.3.2 关于outline属性
6.4 overflow的作用
6.5 适当了解一下BFC
知识补给站
补给1：什么是URL
补给2：程序漏洞为什么叫BUG
单词表
第7章 高级选择器与动画
7.1 文件图标的添加
7.1.1 nth-child(n)
7.1.2 属性选择器
7.1.3 nth-of-type(n)
7.2 电影IMDB排行
7.3 如何学习不常见的CSS选择器
7.4 一个精致的开关
7.4.1 阴影的概念
7.4.2 伪元素
7.4.3 背景过渡
7.4.4 盒子阴影
7.4.5 复选框的:checked状态
7.5 过渡效果
7.5.1 帧和帧率的概念
7.5.2 transition属性
7.5.3 升级照片墙
7.6 综合练习
7.7 字体图标
知识补给站
补给1：什么是Unicode
补给2：计算机为什么会采用二进制
补给3：硬盘为什么会缩水
单词表
第8章 变形与3D
8.1 元素也能变形
8.1.1 定位与过渡的结合
8.1.2 位移
8.1.3 缩放
8.1.4 旋转
8.1.5 综合练习
8.2 高级扩展
8.2.1 透视与3D效果
8.2.2 3D翻转菜单
8.2.3 自定义帧动画
单词表
第9章 移动端布局
9.1 什么叫响应式网页
9.1.1 响应式网页布局
9.1.2 媒介查询
9.2 PC端与移动端的差别
9.3 移动端网页适配
9.4 viewport
9.5 进阶技巧
知识补给站
补给：什么是像素
单词表
第10章 布局神器flex
10.1 弹性盒模型
10.1.1 display:flex
10.1.2 flex的布局特性
10.1.3 水平垂直居中
10.1.4 强大的弹性盒模型
10.2 移动端网页综合练习
单词表
第11章 项目实战：制作个人站点
11.1 为什么需要个人网站
11.2 动手之前先学点设计
11.2.1 拟物化与扁平化
11.2.2 复杂的动画如何处理
11.3 需要花钱买服务器吗
11.4 项目的开发过程
11.5 常见特效的实现
11.5.1 动态背景
11.5.2 banner图切换
11.5.3 时间轴效果
11.5.4 美化卡片列表
11.5.5 打字机效果
11.6 如何添加音频和视频
11.6.1 添加音频
11.6.2 添加视频
知识补给站
补给1：世界上第一个程序员是谁
补给2：蓝光高清与1080P的区别是什么
单词表
附录A 单词汇总
附录B 知识点索引
同类热销排行榜
- C语言与程序设计教程(高等学校计算机类十二五规划教材)16
- 电机与拖动基础(教育部高等学校自动化专业教学指导分委员会规划工程应用型自动化专业系列教材)13.48
- 传感器与检测技术(第2版高职高专电子信息类系列教材)13.6
- ASP.NET项目开发实战(高职高专计算机项目任务驱动模式教材)15.2
- Access数据库实用教程(第2版十二五职业教育国家规划教材)14.72
- 信号与系统(第3版下普通高等教育九五国家级重点教材)15.08
- 电气控制与PLC(普通高等教育十二五电气信息类规划教材)17.2
- 数字电子技术基础(第2版)17.36
- VB程序设计及应用(第3版十二五职业教育国家规划教材)14.32
- Java Web从入门到精通(附光盘)/软件开发视频大讲堂27.92
推荐书目
-
孩子你慢慢来/人生三书 华人世界率性犀利的一枝笔，龙应台独家授权《孩子你慢慢来》20周年经典新版。她的《...
-
时间简史(插图版) 相对论、黑洞、弯曲空间……这些词给我们的感觉是艰深、晦涩、难以理解而且与我们的...
-
本质(精) 改革开放40年，恰如一部四部曲的年代大戏。技术突变、产品迭代、产业升级、资本对接...