CSS 布局手册
CSS 布局手册旨在汇集常见的布局样式,这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以用来开始一个项目,而且提供了具体的使用方法,作为开发人员,你可以做出合适的选择。
备注:如果你是首次接触 CSS 布局,你可以先看一下 CSS 布局学习模块,其中的基础知识有利于你更好的使用本书中的布局样式。
布局专题
专题 | 描述 | 布局方法 |
---|---|---|
媒体对象 | 一个两栏的框,一边是图片,另一边是描述性文字,例如 facebook 上的帖子或推文。 | CSS 网格、float 回落、fit-content 尺寸 |
栏目布局 | 多栏、弹性盒或网格布局的取舍 | CSS 网格、多栏布局、弹性盒布局 |
元素居中 | 如何水平或者垂直居中内容。 | 弹性盒布局、盒子对齐 |
粘性页脚 | 创建一个页脚,当内容较短时,该页脚位于容器或视图的底部。 | CSS 网格、弹性盒 |
分离导航 | 一种导航模式,其中一些链接在视觉上与其他链接分开。 | 弹性盒、margin |
面包屑导航 | 创建链接列表,允许访问者在页面层次结构中向上导航。 | 弹性盒 |
含有计数徽章的列表 | 一个带有 count 计数的徽章的 items 列表。 | 弹性盒、盒子对齐 |
分页 | 链接到内容的某个页面(比如搜索结果)。 | 弹性盒、盒子对齐 |
卡片 | 卡片组件,显示在卡片网格中 | CSS 网格 |
网格包装器 | 用于在一个中央包装器内对齐网格内容,同时也允许项目脱离。 | CSS 网格 |
贡献布局专题
作为 MDN 的一员,我们希望你能贡献一份与上表所示相同格式的布局专题。参见本页以获得编写示例的模板和指南。