CSS Layout cookbook
CSS layout cookbook 这本书旨在汇集常见的布局样式,这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目,而且提供了具体的使用方法,作为开发人员,你可以做出合适的选择。
Note: 如果你是首次接触CSS布局,你可以先看一下CSS layout learning module,书中的基础知识有利于你更好的使用本书中的布局样式。
布局样式
Recipe | Description | Layout Methods |
---|---|---|
Media objects | 一个两栏的框,一边是图片,另一边是描述性文字,例如facebook上的帖子或推特 | CSS Grid, float fallback, fit-content sizing |
Columns |
在什么时候选择multi-column layout,flexbox或者grid |
CSS Grid, Multicol, Flexbox |
Center an element |
如何水平或者垂直居中一个item |
Flexbox, Box Alignment |
Sticky footers |
创建一个页脚,当内容较短时,该页脚位于容器或视图的底部 |
CSS Grid, Flexbox |
Split navigation |
一种导航模式,里面的一些links显示的区分于其他 |
Flexbox, margin |
Breadcrumb navigation |
创建链接列表,允许访问者在页面层次结构中向上导航 |
Flexbox |
List group with badges |
一个带有count计数的徽章的items列表 |
Flexbox, Box Alignment |
Pagination | 链接到内容页面 (比如搜索结果). | Flexbox, Box Alignment |
Card | 卡片组件,显示在卡片网格中 | Grid Layout |
Grid wrapper | For aligning grid content within a central wrapper, while also allowing items to break out. | CSS Grid |
Contribute a Recipe
As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.