blob: fd586a248f029c9f2ce4648e5a94c3245e52878c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
title: CSS Layout cookbook
slug: Web/CSS/Layout_cookbook
tags:
- CSS
- Layout
- NeedsTranslation
- TopicStub
- cookbook
- recipes
translation_of: Web/CSS/Layout_cookbook
---
<div>{{CSSRef}}</div>
<div>CSS layout cookbook 这本书旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。</div>
<div class="note">
<p><strong>Note</strong>: 如果你是首次接触CSS布局，你可以先看一下<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>，书中的基础知识有利于你更好的使用本书中的布局样式。</p>
</div>
<h2 id="布局样式">布局样式</h2>
<table class="standard-table" style="height: 543px; width: 1188px;">
<thead>
<tr>
<th scope="col">Recipe</th>
<th scope="col">Description</th>
<th scope="col">Layout Methods</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></td>
<td>一个两栏的框，一边是图片，另一边是描述性文字，例如facebook上的帖子或推特</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
<td>
<p>在什么时候选择multi-column layout,flexbox或者grid</p>
</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
<td>
<p>如何水平或者垂直居中一个item</p>
</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
<td>
<p>创建一个页脚，当内容较短时，该页脚位于容器或视图的底部</p>
</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></td>
<td>
<p>一种导航模式，里面的一些links显示的区分于其他</p>
</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></td>
<td>
<p>创建链接列表，允许访问者在页面层次结构中向上导航</p>
</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></td>
<td>
<p>一个带有count计数的徽章的items列表</p>
</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
<td>链接到内容页面 (比如搜索结果).</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Card</a></td>
<td>卡片组件，显示在卡片网格中</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></td>
<td>For aligning grid content within a central wrapper, while also allowing items to break out.</td>
<td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a></td>
</tr>
</tbody>
</table>
<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2>
<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p>
|
