面包屑导航（Breadcrumb navigation）
.breadcrumb ul { list-style: none; margin: 0; padding: 0; display: flex;}.breadcrumb a,.breadcrumb span { padding: .5em 1em;}.breadcrumb li::before { content: "→";}.breadcrumb li:first-child::before { content: "";}复制代码 复制代码
居中元素（Center an element）
.container { border: 2px solid rgb(75, 70, 74); border-radius: .5em; height: 200px; display: flex; align-items: center; justify-content: center;}.item { border: 2px solid rgb(95, 97, 110); border-radius: .5em; padding: 20px; width: 10em;}复制代码 复制代码I am centered!
粘性页脚（Sticky footers）
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
flex
.wrapper { min-height: 100%; display: flex; flex-direction: column;}.page-header,.page-footer { flex-shrink: 0;}.page-body { flex-grow: 1;}复制代码 复制代码This is the header Main page content here, add more if you want to see the footer push down.
grid
.wrapper { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto;}复制代码 复制代码This is the header Main page content here, add more if you want to see the footer push down.
分割导航（Split navigation）
A navigation pattern where some links are visually separated from the others.
.main-nav { display: flex; margin: 0; padding: 0; list-style: none;}.main-nav a { padding: .5em 1em; display: block;}.push { margin-left: auto;}复制代码 复制代码
带标识的列表组
In this recipe we will create a list group pattern with badges that indicate a count.Our list items should be displayed with the badges lined up on the right, no matter how much content the item has. The badge should always be centered vertically whether there is a single line of content, or more than one.
.list-group { list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; border-radius: .5em; width: 20em;}.list-group li { border-top: 1px solid #ccc; padding: .5em; display: flex; justify-content: space-between; align-items: center;}.list-group li:first-child { border-top: 0;}.list-group .badge { background-color: rebeccapurple; color: #fff; font-weight: bold; font-size: 80%; border-radius: 10em; min-width: 1.5em; padding: .25em; text-align: center}复制代码 - Item One 2
- Item Two 10
- Item Three 9
- Item Four 0
分页器（Pagination）
The pagination pattern typically displays items in a row. To ensure that the pagination is understandable by people using a screenreader, we mark the items up as a list inside a <nav> element, and then use CSS to display the layout visually as a row.
Typically, the pagination component will be centered horizontally underneath the content.
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;}nav { display: flex; justify-content: center; border-top: 1px solid #eee; margin-top: 1em; padding-top: .5em;}.pagination { list-style: none; margin: 0; padding: 0; display: flex;}.pagination li { margin: 0 1px;}.pagination a { display: block; padding: .5em 1em; border: 1px solid #999; border-radius: .2em; text-decoration: none;}.pagination a[aria-current="page"] { background-color: #333; color: #fff;}复制代码 复制代码
卡片布局（Card）
The card component can contain a variety of content, including a heading, image, content and a footer. Each card should be the same height, and footers should stick to the bottom of the card. When added to a collection of cards, the cards should line up in two dimensions.
img { max-width: 100%;}.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-gap: 20px; max-width: 800px; margin: 1em auto;}.card { display: grid; grid-template-rows: max-content 200px 1fr; border: 1px solid #999; border-radius: 3px;}.card img { object-fit: cover; width: 100%; height: 100%;}.card h2 { margin: 0; padding: .5rem;}.card .content { padding: .5rem;}.card footer { background-color: #333; color: #fff; padding: .5rem;}复制代码 复制代码A short heading
The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago.
A short heading
Short content.
A longer heading in this card
In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a suggestion for reaching the North Pole by an aerostat.
A short heading
The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago.
多列布局（Column layouts）
There are a number of design patterns you might want to achieve with your columns:
- A continuous thread of content broken up into newspaper-style columns.
- A single row of items arranged as columns, with all heights being equal.
- Multiple rows of columns lined up by row and column.
.container { border: 2px solid rgb(75, 70, 74); border-radius: .5em; padding: 20px; column-width: 10em; column-rule: 1px solid rgb(75, 70, 74);}复制代码 复制代码Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach.