面包屑导航（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: "";
}
<nav aria-label="Breadcrumb" class="breadcrumb">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Category</a></li>
<li><a href="">Sub-Category</a></li>
<li><span aria-current="page">Product</span></li>
</ul>
</nav>
居中元素（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;
}
<div class="container">
<div class="item">I am centered!</div>
</div>
粘性页脚（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;
}
<div class="wrapper">
<header class="page-header">This is the header</header>
<main class="page-body">
<p>Main page content here, add more if you want to see the footer push down.</p>
</main>
<footer class="page-footer">Sticky footer</footer>
</div>
grid
.wrapper {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
<div class="wrapper">
<header class="page-header">This is the header</header>
<article class="page-body">
<p>Main page content here, add more if you want to see the footer push down.</p>
</article>
<footer class="page-footer">Sticky footer</footer>
</div>
分割导航（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;
}
<nav>
<ul class="main-nav">
<li><a href="">About</a></li>
<li><a href="">Products</a></li>
<li><a href="">Our Team</a></li>
<li class="push"><a href="">Contact</a></li>
</ul>
</nav>
带标识的列表组
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
}
<ul class="list-group">
<li>Item One
<span class="badge">2</span>
</li>
<li>Item Two
<span class="badge">10</span>
</li>
<li>Item Three
<span class="badge">9</span>
</li>
<li>Item Four
<span class="badge">0</span>
</li>
</ul>
分页器（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;
}
<nav aria-label="pagination">
<ul class="pagination">
<li><a href=""><span aria-hidden="true">«</span><span class="visuallyhidden">previous set of pages</span></a></li>
<li><a href=""><span class="visuallyhidden">page </span>1</a></li>
<li><a href="" aria-current="page"><span class="visuallyhidden">page </span>2</a></li>
<li><a href=""><span class="visuallyhidden">page </span>3</a></li>
<li><a href=""><span class="visuallyhidden">page </span>4</a></li>
<li><a href=""><span class="visuallyhidden">next set of pages</span><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
卡片布局（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;
}
<div class="cards">
<article class="card">
<header>
<h2>A short heading</h2>
</header>
<img src="balloons.jpg" alt="Hot air balloons">
<div class="content">
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago. </p>
</div>
</article>
<article class="card">
<header>
<h2>A short heading</h2>
</header>
<img src="balloons2.jpg" alt="Hot air balloons">
<div class="content">
<p>Short content.</p>
</div>
<footer>I have a footer!</footer>
</article>
<article class="card">
<header>
<h2>A longer heading in this card</h2>
</header>
<img src="balloons.jpg" alt="Hot air balloons">
<div class="content">
<p>In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a
suggestion for reaching the North Pole by an aerostat.</p>
</div>
<footer>I have a footer!</footer>
</article>
<article class="card">
<header>
<h2>A short heading</h2>
</header>
<img src="balloons2.jpg" alt="Hot air balloons">
<div class="content">
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many
years ago. </p>
</div>
</article>
</div>
多列布局（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);
}
<div class="container">
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>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.</p>
<p>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.</p>
</div>
