示例
精简、基础的示例，演示各种 HTML 元素和 CSS 属性。
在实践中查看并进行试验 — 玩转代码，观察结果。
文本
- 标题: 从
h1到h6，使用它们的默认样式。 - 大小不重要: 使用 CSS 设置任意大小的标题。
- 粗体、斜体、大小写和行高: 使用
font-weight、font-style、font-variant、text-transform和line-height。 - 字体系列: 字体系列列表和通用回退字体系列。
- 字体大小: 绝对单位和相对单位。
- 文本间距:
text-align、text-indent、word-spacing和letter-spacing属性。 - 垂直对齐:
vertical-align属性。 - 下标和上标: 使用定位作为
vertical-align属性的替代方法。 - 文本阴影: 阴影。在文本上。
- 简单的首字下沉: 实现常见效果的简单方法。
- 花式首字下沉: 装饰首字母。
- 图形首字下沉: 使用图像。
- 首段首字下沉: 针对首段的首字母。
- 引述 1: 一个简单的引述结构。
- 引述 2: 添加一点风格。
- 引述 3: 更复杂的风格。
链接
- 下划线: 使用
text-decoration、border-bottom和background-image来实现各种下划线（通常是链接）。 - 锚点和目标: 链接到页面的一部分，并使用
:target伪类进行样式设置。 - 悬停效果 1: 使用
:hover在鼠标悬停时改变的图形链接。 - 悬停效果 2: 利用
:active伪类实现的更多交互效果。 - 悬停效果 3: 淡入淡出。
- 悬停效果 4: 使用
transform进行旋转。 - 简单的 CSS 过渡: 文本链接悬停时的微妙动画。
- 更多的 CSS 过渡: 使用
border-radius和 RGBa 颜色。 - CSS 过渡时间函数: 处理动画过渡的加速和减速。
颜色、图像和背景
- 颜色: CSS 颜色，使用
color和background-color属性。 - HTML 图像:
img元素。 - 背景图像:
background-imageCSS 属性。 - 背景定位: 使用
background-position属性。 - 背景图像重复: 使用
background-repeat属性。 - 背景附件: 背景如何与滚动内容交互。
- 背景图像大小: 使用
background-size。 - 多重背景: 在单个框中分层背景。
- 线性渐变: 使用 CSS 创建渐变背景。
- 径向渐变: 圆形和椭圆形渐变背景。
- 不透明度: 框的透明度。
布局
- 宽度和高度:
width、height、max-width、min-height等。 - 边框: 厚、薄、此颜色、彼颜色、实线、点线、虚线……
- 圆角: 使用
border-radius属性。 - 盒子阴影: 增加立体感。
- 外边距折叠: 垂直外边距如何合并或“折叠”在一起。
- 轮廓: 构成边框的“边框”。
- 溢出: 管理不适合框的内容部分。
- 块级和内联 1: 使用
display属性更改框的行为。 - 块级和内联 2: 块级和内联框之间的更多区别。
- 块级和内联 3: 应用
display: inline-block。 - 定位：静态: 遵循正常流程。
- 定位：相对: 相对于框的初始位置偏移。
- 定位：绝对 1: 相对于框的容器定位。
- 定位：绝对 2: 在已定位的框内。
- 定位：固定: 相对于视口。
- Z-index: 堆叠已定位的框。
- 浮动 1: 一个简单的浮动框。
- 浮动 2: 两个浮动框。
- 浮动 3: 清除浮动的框。
- 页面布局 1: 两列第一步：定位导航栏。
- 页面布局 2: 两列第二步：使用
margin将内容从导航栏下方推开。 - 页面布局 3: 使用边框为列提供背景。
- 页面布局 4: 三列。
- 页面布局 5: 添加页眉。
- 页面布局 6: 页脚可能无法始终与绝对定位的列一起正常工作……
- 页面布局 7: 使用浮动列添加页脚。
- 查尔斯·达尔文: 对前面示例基本原理的样式化版本。
- 2D 变换: 使用
transform属性操纵框的大小、形状和位置。 - 变换原点: 改变变换测量的基准点。
列表 & 导航
- 基本列表:
ul、ol和li元素。 - 嵌套列表: 列表中的列表。
- 定义列表:
dl、dt和dd。 - 列表标记: 使用
list-style-type更改项目符号和编号。 - 图像作为列表项标记: 使用
list-style-image。 - 列表标记内部和外部: 使用
list-style-position。 - 下拉菜单 1: 下拉菜单的基础知识。
- 下拉菜单 2: 一个简单的多级下拉菜单。
- 下拉菜单 3: 具有更详细设计的**多级下拉菜单**。
- 内联标签页: 使用
display属性实现的基本标签页导航。 - 浮动标签页: 使用
float属性实现的基本标签页。 - 更多标签页: 使标签页更像标签页。
- 更多标签页: 一种替代的标签页样式。
- 简洁的标签页: 使用简单的下划线。
- 花式标签页: 用 CSS 尽情发挥。
- 显示/隐藏导航（JavaScript）: 使用 JavaScript 切换显示。
- 显示/隐藏导航（目标）: 使用
:target伪类切换显示。
表格
- 基本表格:
table、tr和td元素。 - 表头单元格:
th元素。 - 合并单元格 1:
rowspan属性。 - 合并单元格 2:
colspan属性。 - 边框折叠 1: 折叠表格单元格边框。
- 边框折叠 2: 折叠表格单元格边框和表格边框。
- 列组:
col和colgroup元素。 - 空单元格: 使用
empty-cells属性指定如何显示空单元格。 - 自动表格布局: 表格使用的默认布局算法。
- 固定表格布局: 使用
table-layout属性设置。