HTML+CSS基础

本书籍是自己学习 HTML + CSS 前端技术的学习笔记,笔记最开始发布到个人博客,现在整理到这里方便查看。

作者在写作和整理过程中花费了大量时间和精力,另外服务器费用也是一笔不小的开支,如果你觉得我的文章和书籍对你有所帮助,可以请我喝杯咖啡或者农夫山泉:

如果在阅读过程中有任何疑问,可以去作者博客对应页面留言, 你也可以从我的体系树中找到对应文章。

相关体系树传送门

另外,本书籍的内容可能会不断更新或者增加,你可以关注我的博客以获得最新的进展。

第一章:HTML基础知识

  • HTML 开发基础知识和常识
  • HTML 语法知识
  • HTML 废弃的标签

第二章: CSS基础知识[上]

  • CSS 样式定义语法
  • 设置样式的方式
  • CSS 基础选择器
  • 继承和层叠性
  • CSS 盒模型
  • 标准文档流现象
  • 脱离标准文档流
  • 清除浮动的方法

第三章:CSS基础知识[下]

  • 浏览器兼容问题
  • margin 塌陷现象
  • 盒模型居中问题
  • IE6 双倍 margin
  • IE6 的 3px 问题
  • 文本居中
  • 伪类和超链接
  • background 属性
  • css 精灵
  • 相对定位
  • 绝对定义
  • 固定定位
  • z-index

第四章:一个静态页面Demo

  • 头部 header 和导航栏设计
  • 中间 banner 和广告位设计
  • 底部 footer 设计

第五章:JavaScript基础[上]

  • JavaScript 用途
  • JavaScript 简单用法
  • JavaScript 输出语句
  • JavaScript 变量
  • JavaScript 绑定事件
  • JavaScript 函数定义

第六章:JavaScript基础[下]

  • JavaScript 字符串和 String 对象
  • JavaScript 数组和相关方法

第七章:浏览器对象模型

  • JavaScript 的组成
  • DOM 的定义
  • 访问 DOM 节点的方法
  • DOM 节点的访问关系
  • DOM 节点的操作
  • 设置节点属性
  • DOM 事件

第八章:CSS媒体查询和响应式断点

  • CSS 媒体查询
  • 屏幕尺寸来显示不同样式
  • 响应式断点实现响应式布局
  • 基于屏幕方向响应
  • 基于宽高比例响应
  • 浏览器特征查询

第九章:CSS Flexbox弹性布局

  • 初识 flex
  • flex 布局基本使用
  • flex 布局的属性
  • flexitem 的属性

第十章:CSS 多背景和渐变

  • 设置多个背景
  • 边框样式
  • 背景裁切类型
  • 背景尺寸类型
  • 线性渐变背景
  • 径向渐变背景
  • 重复渐变背景

第十一章:CSS 滤镜

  • 高斯模糊 blur
  • 亮度 brightness
  • 对比度 contrast
  • 阴影 drop-shadow
  • 灰度 grayscale
  • 色调旋转 hue-rotate
  • 反色 invert
  • 透明度 opacity
  • 饱和度 saturate
  • 褐色 sepia

第十二章:CSS 背景混合模式

  • 什么是图层和通道
  • 什么是混合模式
  • background-blend-mode 属性
  • mix-blend-mode 属性
  • lighten(变亮), darken(变暗)
  • multiply(正片叠底)
  • exclusion(排除)
  • overlay(叠加)
  • color-dodge(颜色减淡)

第十三章:CSS 中的动画属性窥探

  • @keyframes 规则动画
  • CSS3 过度动画
  • CSS3 3D转换
  • 小案例

第十四章:JavaScript实践案例

  • 返回浏览器顶部箭头
  • 点击跟随鼠标
  • 屏幕块滚动效果
  • 可拖动的窗体