files/zh-cn/mdn/guidelines/content_blocks/index.html


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

---
title: 内容块
slug: MDN/Guidelines/Content_blocks
translation_of: MDN/Guidelines/CSS_style_guide
translation_of_original: MDN/Structures/Content_blocks
---
<div>{{MDNSidebar}}</div><div class="summary">
 <p>This pages lists reusable content blocks.</p>
</div>
<h2 id="Card-grid">Card-grid</h2>
<p>Allows to have a couple of cards next to each other to call out specific contents or can be used for a call to action. CSS class: <code>.card-grid </code>(L 751 - 824 in CustomCSS).</p>
<ul class="card-grid">
 <li><span>CSS Reference</span>
  <p>An <a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">exhaustive reference</a> for <u>seasoned Web developers</u> describing every property and concept of CSS.</p>
 </li>
 <li><span>CSS Tutorial</span>
  <p>A <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">step-by-step introduction</a> to help <u>complete beginners</u> get started. It presents all the needed fundamentals.</p>
 </li>
 <li><span>CSS3 Demos</span>
  <p>A <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p>
 </li>
</ul>
<h2 id="Two_columns">Two columns</h2>
<p>Two columns seperated with a thick grey border. Often used on landing pages. CSS class: <code>.topicpage-table</code> (L 830 - 837 &amp; 82-93 in CustomCSS).</p>
<div class="row topicpage-table">
 <div class="section">
  Column 1</div>
 <div class="section">
  Column 2</div>
</div>
<p> </p>
<h2 id="Equal_column_heights">Equal column heights</h2>
<p>Used on the <a href="/en-US/Firefox_OS">Firefox OS</a> landing page to wrap columns that should all be the same height. CSS class <code>.equalColumnHeights</code> (L 25 - 38 in CustomCSS).</p>
<div class="equalColumnHeights">
 <div class="zone-callout">
  Some text<br>
  And a new line<br>
   </div>
 <div class="zone-callout">
  Some more text<br>
  <br>
  <br>
  here</div>
</div>
<p> </p>