path: root/files/zh-cn/mdn/guidelines/css_style_guide/index.html

---
title: MDN样式指南
slug: MDN/Guidelines/CSS_style_guide
translation_of: MDN/Guidelines/CSS_style_guide
---
<p>MDN有许多内置的全局样式，可以在设置文章样式和布局文章时使用，本文是可用类以及何时使用它们的指南。其中一些样式可以通过MDN编辑器的工具栏访问。在这种情况下，我们将在样式标题下包含短语“编辑工具栏”，以及相关工具栏按钮的图像。</p>

<p>请注意，这些样式的开发是为了涵盖在设置文章内容样式时出现的最常见情况，并且只要可能，您就应该尝试使用可用的类；与标准内容的外观相差太大不利于一致性和可读性。如果你觉得你的页面绝对需要某种特殊的定制样式，你应该首先在MDN讨论论坛中提出这个主题。</p>

<div class="blockIndicator note">
<p><strong>注意：如果要搜索MDN上使用给定类的位置，可以</strong>使用表单的URL执行此操作</p>

<p><code>https://developer.mozilla.org/en-US/search?locale=en-US&amp;css_classnames=<var>desired-css-class</var></code>.   例如，要查找使用卡片网格布局的页面，请尝试URL<a href="/zh-CN/search?locale=*&amp;css_classnames=card-grid">/zh-CN/search?locale=*&amp;css_classnames=card-grid</a>.</p>
</div>

<div class="blockIndicator warning">
<p><strong>重要提示</strong>: 本指南不完整。有关如何帮助我们完成此指南的信息，请参阅“更新此指南”。</p>
</div>

<h2 id="内联样式">内联样式</h2>

<p>本节列出MDN上样式内容块可用的内联样式。</p>

<h3 id=".button"><code>.button</code></h3>

<p>MDN提供任何button样式。通常用于设置链接样式（出于安全原因，HTMLElement（“button”）元素从文章源代码中剥离。）</p>

<p><a class="button" href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip">下载源代码</a></p>

<details>
<h4 id="Example_syntax">Example syntax</h4>

<pre class="brush: html notranslate">&lt;a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button"&gt;Download source code&lt;/a&gt;</pre>
</details>

<h3 id=".external-icon_and_.ignore-external"><code style="white-space: nowrap;">.external-icon</code> and <code style="white-space: nowrap;">.ignore-external</code></h3>

<p>指向MDN外部内容的链接会自动设置格式，以便将类外部图标添加到这些链接中，从而创建一个图标，指示它们离开站点。但是，在某些情况下，此图标是不需要的，并且会干扰其他样式。可以通过将忽略外部类添加到链接中来删除它。</p>

<div class="blockIndicator note">
<p><strong>注意:</strong> 大多数时候，我们不想用这些。外部图标将自动添加，以帮助防止用户在不知不觉中离开MDN。唯一通常可以接受的用例是指向特定于MDN的域或子域的链接，例如我们用于示例代码或其他服务的那些域或子域。</p>
</div>

<p><a href="/">Link to MDN</a><br>
 <a href="http://wikipedia.org">Link away from MDN</a><br>
 <a class="ignore-external" href="http://wikipedia.org">Link away from MDN with <code style="white-space: nowrap;">ignore-external</code></a></p>

<details>
<h4 id="Example_syntax_2">Example syntax</h4>

<pre class="brush: html notranslate">&lt;a href="/"&gt;Link to MDN&lt;/a&gt;
&lt;a href="http://wikipedia.org"&gt;Link away from MDN&lt;/a&gt;
&lt;a href="http://wikipedia.org" class="ignore-external"&gt;Link away from MDN with &lt;code&gt;ignore-external&lt;/code&gt;&lt;/a&gt;</pre>
</details>

<h3 id=".glossaryLink"><code>.glossaryLink</code></h3>

<p>这是一个类，用于设置词汇表链接的样式，以使它们在页面上不那么显眼。这个类是使用KumaScript宏添加的，如常用宏中所述，因此不会手动插入。</p>

<details>
<h4 id="Example_macro_syntax">Example macro syntax</h4>

<p>\{{Glossary("HTML")}}</p>
</details>

<h3 id=".hidden"><code>.hidden</code></h3>

<p>允许您隐藏wiki文章中的内容，但可以在编辑器中查看。通常，这用于向创建实时代码示例的脚本提供HTML、CSS和JavaScript，而只向读者显示相关语言。</p>

<details>
<h4 id="Example_syntax_3">Example syntax</h4>

<pre class="brush: html notranslate">&lt;h4 id="Hidden_Code_Sample" name="Hidden_Code_Sample"&gt;Hidden code Sample&lt;/h4&gt;

&lt;div class="hidden"&gt;
&lt;h5 id="HTML"&gt;HTML&lt;/h5&gt;

&lt;pre class="brush: html;"&gt;
&amp;lt;button id="test"&amp;gt; Click me &amp;lt;/button&amp;gt;

&lt;h5 id="CSS"&gt;CSS&lt;/h5&gt;

&lt;pre class="brush: css;"&gt;
button {
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}
&lt;/pre&gt;
&lt;/div&gt;

&lt;h5 id="JavaScript_Content"&gt;JavaScript Content&lt;/h5&gt;

&lt;pre class="brush: js;"&gt;
document.getElementById("test").addEventListener("click", works);
function works() {
    window.alert("you clicked it!");
}
&lt;/pre&gt;

&lt;p&gt;\{{EmbedLiveSample("Hidden_Code_Sample")}}&lt;/p&gt;
</pre>

<h4 id="Hidden_Code_Sample" name="Hidden_Code_Sample">Hidden code Sample</h4>

<div class="hidden">
<h5 id="HTML">HTML</h5>

<pre class="brush: html notranslate">&lt;button id="test"&gt;Click Me&lt;/button&gt;
</pre>

<h5 id="CSS">CSS</h5>

<pre class="brush: css notranslate">button{
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}
</pre>
</div>

<h5 id="JavaScript">JavaScript</h5>

<pre class="brush: js notranslate">document.getElementById("test").addEventListener("click", works);
function works(){
    window.alert("you clicked it!");
}
</pre>

<p>{{EmbedLiveSample("Hidden_Code_Sample", "100%", 150)}}</p>
</details>

<h3 id=".seoSummary"><code>.seoSummary</code></h3>

<p>这是一个对页面内容没有可见影响的类，但是，如果该类应用于元素（通常是span），KumaScript将使用元素的内容创建描述meta标记。它们提供了一个简短的描述，可用于搜索引擎和分享网站，如Facebook和Twitter。这个类可以通过MDN编辑器WYSIWYG样式下拉列表中的“SEO摘要”选项获得。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11859/seosummary-menu-option.png" style="border: 1px solid black; display: block; height: 58px; margin: 0px auto; width: 235px;"></p>

<details>
<div class="blockIndicator note">
<p><strong>Note</strong>: If <code>.seoSummary</code> is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary: there is no need to use this on most pages.</p>
</div>

<p>The final page display won't show any styling change, but in the editor the text that is set as the SEO summary will be marked with a dotted outline and a "SEO Summary" label", as shown below:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11861/seosummary-editor-representation.png" style="display: block; margin: 0 auto;"></p>

<p>The below examples are taken from the <a href="/en-US/docs/Mozilla/Add-ons">Mozilla Add-ons</a> page.</p>

<h3 id="Example_syntax_4">Example syntax</h3>

<pre class="brush: html notranslate">&lt;p&gt;
  &lt;span class="seoSummary"&gt;Add-ons add new functionality to &lt;a href="/en-US/docs/Mozilla/Gecko"&gt;Gecko&lt;/a&gt;-based applications such as Firefox, SeaMonkey, and Thunderbird.&lt;/span&gt;
  There are two main types of add-on: &lt;a href="#Extensions"&gt;Extensions&lt;/a&gt; add new features to the application, while &lt;a href="#Themes"&gt;Themes&lt;/a&gt; modify the application's user interface.
&lt;/p&gt;</pre>

<h4 id="Example_of_the_generated_HTMLElementmeta_elements">Example of the generated {{HTMLElement("meta")}} elements</h4>

<pre class="brush: html; notranslate">&lt;meta property="og:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird."&gt;
&lt;meta name="description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird."&gt;
&lt;meta name="twitter:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird."&gt;</pre>

<h4 id="Example_of_how_Facebook_uses_it">Example of how Facebook uses it</h4>

<p><img alt="SEOSummary as it is used by Facebook" src="https://mdn.mozillademos.org/files/11857/seosummary.jpg" style="display: block; height: 338px; margin: 0px auto; width: 500px;"></p>
</details>

<div class="blockIndicator note">
<p><strong>注意:</strong> 这与“.summary”类不同，后者创建了一个特殊的“关于此页”样式的模糊框。该类不设置搜索引擎使用的SEO摘要或MDN用于生成工具提示和自动生成列出子页面的菜单的宏。</p>
</div>

<h2 id="块级样式">块级样式</h2>

<p>本节列出MDN上样式内容块可用的块级样式。</p>

<h3 id=".callout-box"><code style="white-space: nowrap;">.callout-box</code></h3>

<p>允许您创建一个右浮动框，用于包含要突出显示的标注或相关信息。这是一个示例内容</p>

<p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

<details>
<h4 id="Example_syntax_5">Example syntax</h4>

<pre class="brush: html notranslate">&lt;div class="callout-box"&gt;
  &lt;p&gt;This is an exciting callout&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Example content to float around&lt;/p&gt;
&lt;p&gt;Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.&lt;/p&gt;
</pre>
</details>

<h3 id=".card-grid"><code style="white-space: nowrap;">.card-grid</code></h3>

<p>允许您将多张卡片相邻放置，以调出特定内容或映射出多步行动要求。卡片在可用的水平空间中均匀分布；大约2-3张效果最好。</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>

<details>
<h4 id="Example_syntax_6">Example syntax</h4>

<pre class="brush: html; notranslate">&lt;ul class="card-grid"&gt;
  &lt;li&gt;My card content&lt;/li&gt;
  &lt;li&gt;My second card content&lt;/li&gt;
  &lt;li&gt;My third card content&lt;/li&gt;
&lt;/ul&gt;</pre>
</details>

<h3 id=".column-container"><code style="white-space: nowrap;">.column-container</code></h3>

<p><span style=""> 表示特定宽度列的容器。通常与其他类一起使用，如下所示。</span></p>

<p><span class="column-4" style="">My first equal width column.</span></p>

<div class="column-container">
<div class="column-4">
<p>My second equal width column.</p>
</div>

<div class="column-4">
<p>My third equal width column.</p>
</div>
</div>

<details>
<h4 id="Example_syntax_7">Example syntax</h4>

<pre class="brush: html notranslate">&lt;div class="column-container"&gt;
  &lt;div class="column-4"&gt;
    &lt;p&gt;My first equal width column.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="column-4"&gt;
    &lt;p&gt;My second equal width column.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="column-4"&gt;
    &lt;p&gt;My third equal width column.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</details>

<h3 id=".column-1_.column-2_.column-3_..._all_the_way_up_to_.column-11"><code style="white-space: nowrap;">.column-1</code>, <code style="white-space: nowrap;">.column-2</code>, <code style="white-space: nowrap;">.column-3</code> ... all the way up to <code style="white-space: nowrap;">.column-11</code></h3>

<p>指定要由.column container包含的特定宽度的列，即列容器宽度（基于12列网格布局）的一定数量的二分之一。每对列之间都留有一个檐沟。</p>

<div class="column-container">
<div class="column-1" style="background-color: yellow;">1/12</div>

<div class="column-11" style="background-color: lime;">11/12</div>
</div>

<div class="column-container">
<div class="column-5" style="background-color: yellow;">5/12</div>

<div class="column-7" style="background-color: lime;">7/12</div>
</div>

<div class="column-container">
<div class="column-6" style="background-color: yellow;">6/12</div>

<div class="column-4" style="background-color: lime;">4/12</div>

<div class="column-2" style="background-color: pink;">2/12</div>
</div>

<details>
<h4 id="Example_syntax_8">Example syntax</h4>

<pre class="brush: html notranslate">&lt;div class="column-container"&gt;
  &lt;div class="column-1" style="background-color: yellow;"&gt;1/12&lt;/div&gt;
  &lt;div class="column-11" style="background-color: lime;"&gt;11/12&lt;/div&gt;
&lt;/div&gt;

&lt;div class="column-container"&gt;
  &lt;div class="column-5" style="background-color: yellow;"&gt;5/12&lt;/div&gt;
  &lt;div class="column-7" style="background-color: lime;"&gt;7/12&lt;/div&gt;
&lt;/div&gt;

&lt;div class="column-container"&gt;
  &lt;div class="column-6" style="background-color: yellow;"&gt;6/12&lt;/div&gt;
  &lt;div class="column-4" style="background-color: lime;"&gt;4/12&lt;/div&gt;
  &lt;div class="column-2" style="background-color: pink;"&gt;2/12&lt;/div&gt;
&lt;/div&gt;
</pre>
</details>

<h3 id=".column-quarter_.column-third_.column-half"><code style="white-space: nowrap;">.column-quarter</code>, <code style="white-space: nowrap;">.column-third</code>, <code style="white-space: nowrap;">.column-half</code></h3>

<p>指定要由.column container包含的特定宽度的列，该列是列容器宽度的特定部分。每对列之间都留有一条边沟。</p>

<div class="column-container">
<div class="column-half" style="background-color: yellow;">Half</div>

<div class="column-half" style="background-color: lime;">Half</div>
</div>

<div class="column-container">
<div class="column-third" style="background-color: yellow;">Third</div>

<div class="column-third" style="background-color: lime;">Third</div>

<div class="column-third" style="background-color: pink;">Third</div>
</div>

<div class="column-container">
<div class="column-quarter" style="background-color: yellow;">Quarter</div>

<div class="column-quarter" style="background-color: lime;">Quarter</div>

<div class="column-quarter" style="background-color: pink;">Quarter</div>

<div class="column-quarter" style="background-color: cyan;">Quarter</div>
</div>

<details>
<p>These classes are equivalents of commonly-used numerical width classes, as follows:</p>

<ul>
 <li><code style="white-space: nowrap;">.column-quarter</code> — equivalent to <code style="white-space: nowrap;">.column-3</code></li>
 <li><code style="white-space: nowrap;">.column-third</code> — equivalent to <code style="white-space: nowrap;">.column-4</code></li>
 <li><code style="white-space: nowrap;">.column-half</code> — equivalent to <code style="white-space: nowrap;">.column-6</code></li>
</ul>

<h4 id="Example_syntax_9">Example syntax</h4>

<pre class="brush: html notranslate">&lt;div class="column-container"&gt;
  &lt;div class="column-half" style="background-color: yellow;"&gt;Half&lt;/div&gt;
  &lt;div class="column-half" style="background-color: lime;"&gt;Half&lt;/div&gt;
&lt;/div&gt;

&lt;div class="column-container"&gt;
  &lt;div class="column-third" style="background-color: yellow;"&gt;Third&lt;/div&gt;
  &lt;div class="column-third" style="background-color: lime;"&gt;Third&lt;/div&gt;
  &lt;div class="column-third" style="background-color: pink;"&gt;Third&lt;/div&gt;
&lt;/div&gt;
&lt;div class="column-container"&gt;
  &lt;div class="column-quarter" style="background-color: yellow;"&gt;Quarter&lt;/div&gt;
  &lt;div class="column-quarter" style="background-color: lime;"&gt;Quarter&lt;/div&gt;
  &lt;div class="column-quarter" style="background-color: pink;"&gt;Quarter&lt;/div&gt;
  &lt;div class="column-quarter" style="background-color: cyan;"&gt;Quarter&lt;/div&gt;
&lt;/div&gt;
</pre>
</details>

<h3 id="&lt;details>"><code>&lt;details&gt;</code></h3>

<p>可以包装在一个内容块周围以隐藏该内容，而不是显示一个“详细信息”链接，单击该链接可展开/折叠其中包含的内容。您可以在本文中看到它的用法。</p>

<details>
<h4 id="Example_syntax_10">Example syntax</h4>

<p>This is an example syntax section for {{HTMLElement("details")}} that was hidden with {{HTMLElement("details")}}. Ooooooh, how meta.</p>

<pre class="brush: html; notranslate">&lt;details&gt;
&lt;h4&gt;Example syntax&lt;/h4&gt;
&lt;p&gt;This is an example syntax section for &lt;code&gt;.detail&lt;/code&gt; that was hidden with &lt;code&gt;.detail&lt;/code&gt;. Ooooooh, how meta.&lt;/p&gt;
&lt;/details&gt;</pre>
</details>

<h3 id=".example-bad_and_.example-good"><code style="white-space: nowrap;">.example-bad</code> and <code style="white-space: nowrap;">.example-good</code></h3>

<p>可以使用.example Good和.example bad类突出显示好的和坏的示例。它们通常用于表示示例代码段的&lt;pre&gt;块，但也可以用于其他块。</p>

<h5 id="Good_code_example">Good code example</h5>

<pre class="brush: html example-good notranslate">&lt;label for="test"&gt;Form label:&lt;/label&gt;
&lt;input type="text" id="test"&gt;
</pre>

<h5 id="Bad_code_example">Bad code example</h5>

<pre class="brush: html example-bad notranslate">&lt;input type="text"&gt;
</pre>

<details>
<p><strong>You should always use headings with these classes, as shown below</strong> — CSS is unable to add localized language to the page identifying whether they're good or bad so this is important for people who rely on screen readers, and people with different cultural backgrounds (green and red are not universally good and bad.)</p>

<h4 id="Example_syntax_11">Example syntax</h4>

<pre class="brush: html notranslate">&lt;h5 id="Good_code_example"&gt;Good code example&lt;/h5&gt;

&lt;pre class="brush: html example-good"&gt;
  &amp;lt;label for="test"&amp;gt;Form label:&amp;lt;/label&amp;gt;
  &amp;lt;input type="text" id="test"&amp;gt;
&lt;/pre&gt;

&lt;h5 id="Bad_code_example"&gt;Bad code example&lt;/h5&gt;

&lt;pre class="brush: html example-bad"&gt;
  &amp;lt;input type="text"&amp;gt;
&lt;/pre&gt;</pre>
</details>

<h3 id=".moreinfo"><code>.moreinfo</code></h3>

<p>这个类最初被设计为提供一个链接列表以供进一步阅读，但它可以用于任何远离当前页面的信息。</p>

<div class="moreinfo">
<h4 id="基于JavaScript知识构建的工具">基于JavaScript知识构建的工具</h4>

<dl>
 <dt>JavaScript frameworks</dt>
 <dd>Developed by Google <a href="https://angularjs.org/">Angular.js</a> is one of the best known frameworks.</dd>
 <dd><a href="http://emberjs.com/">Ember.js</a> is open source and community driven.</dd>
 <dt>JavaScript Compilers</dt>
 <dd><a href="https://babeljs.io/">Babel</a> lets you write ES2015 and compiles to more backwards compatible code.</dd>
</dl>
</div>

<details>
<h4 id="Example_syntax_12">Example syntax</h4>

<pre class="brush: html notranslate">&lt;div class="moreinfo"&gt;
  &lt;!-- content goes here --&gt;
&lt;/div&gt;</pre>
</details>

<h3 id=".blockIndicator.note"><code>.blockIndicator.note</code></h3>

<p>将内容的一部分转换为便签框，这通常是一个有用的便签，与当前主题相切，但不直接适合信息流。</p>

<div class="blockIndicator note">
<p><strong>注意</strong>: 这就是我们通常在MDN文章中呈现注释的方式。</p>
</div>

<details>
<p>This is available via the "Note box" option in the MDN editor WYSIWYG styles dropdown.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11677/Screen%20Shot%202015-10-05%20at%2006.56.01.png" style="border: 1px solid black; display: block; margin: 0px auto;"><span style="">Example syntax</span></p>

<pre class="brush: html; notranslate">&lt;div class="blockIndicator note" role="complementary"&gt;
  &lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: This is how we usually present a note in an MDN article.&lt;/p&gt;
&lt;/div&gt;</pre>
</details>

<h3 id=".pull-aside"><code>.pull-aside</code></h3>

<p>将内容拉到一边。</p>

<p>有些内容会偏离主题。</p>

<p>有些内容不太靠边站。</p>

<details>
<h4 id="Example_Syntax">Example Syntax</h4>

<pre class="brush: html notranslate">&lt;div class="pull-right"&gt;Some content that goes off to the side.&lt;/div&gt;
&lt;p&gt;Some content that does not go off to the side.&lt;/p&gt;</pre>

<h4 id="Other_uses">Other uses</h4>

<div class="pull-aside">
<div class="moreinfo">Combined with the <code>.moreinfo</code> class.</div>
</div>

<p>Some content that does not go off to the side.</p>

<p>Some content that does not go off to the side.</p>

<pre class="brush: html notranslate">&lt;div class="pull-aside"&gt;&lt;div class="moreinfo"&gt;Some content that goes off to the side.&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Some content that does not go off to the side.&lt;/p&gt;
&lt;p&gt;Some content that does not go off to the side.&lt;/p&gt;
</pre>
</details>

<h3 id=".summary" name=".summary"><code>.summary</code> {{Obsolete_Inline}}</h3>

<p>为页面创建摘要框，在视觉上显示为带有额外填充的灰色框-应用于文章的开头段落（但不用于参考文章），以使其在页面上具有额外的重要性。</p>

<div class="blockIndicator warning">
<p><strong>重要提示:</strong> 这与anch“.seoSummary”类不同，该类建立文本部分，搜索引擎使用该文本部分在结果列表中汇总页面，MDN使用该文本部分创建页面标题及其摘要的工具提示和菜单。这门课完全是一种视觉效果。如果希望同时使用这两个类，可以为页面建立可见和有效的摘要。</p>
</div>

<p class="summary">这是本文的开头。下面我们将讨论 puppies, giraffes, 和 dugongs.</p>

<details>
<p>This is available via the "Article Summary" option in the MDN editor WYSIWYG styles dropdown.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11863/article-summary-menu-option.png" style="display: block; height: 238px; margin: 0px auto; width: 254px;"></p>

<h4 id="Example_syntax_13">Example syntax</h4>

<pre class="brush: html notranslate">&lt;p class="summary"&gt;This is the start of this article. Below we will talk about puppies, giraffes, and dugongs.&lt;/p&gt;</pre>
</details>

<h3 id=".topicpage-table"><code>.topicpage-table</code></h3>

<p>创建用粗灰色边框分隔的两列。常用于登录页。这通常最适合嵌套（“div”）。注意，这两个子元素必须被赋予.section类。</p>

<div class="topicpage-table">
<div class="section">Column 1</div>

<div class="section">Column 2</div>
</div>

<details open>
<h4 id="Example_syntax_14">Example syntax</h4>

<pre class="brush: html notranslate">&lt;div class="topicpage-table"&gt;
  &lt;div class="section"&gt;Column 1&lt;/div&gt;
  &lt;div class="section"&gt;Column 2&lt;/div&gt;
&lt;/div&gt;</pre>
</details>

<h3 id=".threecolumns"><code>.threecolumns</code></h3>

<div class="threecolumns">
<p>使内容块显示在三个等宽列中。</p>

<p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

<p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

<details>
<p>This is available via the "Three columns" option in the MDN editor WYSIWYG styles dropdown.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11779/twocolumn-threecolumn.png" style="border: 1px solid black; display: block; height: 167px; margin: 0px auto; width: 253px;"></p>

<div class="blockIndicator note">
<p><strong>Note</strong>: If you want to apply this to a list, then you should apply it to an outer wrapper {{HTMLElement("div")}} — if not, it gets applied to the {{HTMLElement("ul")}} element, which causes the list bullets to not display in Chrome.</p>
</div>

<h4 id="Example_syntax_15">Example syntax</h4>

<pre class="notranslate">&lt;div class="threecolumns"&gt;
  &lt;p&gt;Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.&lt;/p&gt;

  &lt;p&gt;Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.&lt;/p&gt;
&lt;/div&gt;</pre>
</details>

<h3 id=".twocolumns"><code>.twocolumns</code></h3>

<p>使内容块显示在两个等宽列中。 </p>

<div class="twocolumns">
<p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

<p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

<details>
<p>This is available via the "Two columns" option in the MDN editor WYSIWYG styles dropdown.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11779/twocolumn-threecolumn.png" style="border: 1px solid black; display: block; height: 167px; margin: 0px auto; width: 253px;"></p>

<div class="blockIndicator note">
<p><strong>Note</strong>: If you want to apply this to a list, then you should apply it to an outer wrapper {{HTMLElement("div")}} — if not, it gets applied to the {{HTMLElement("ul")}} element, which causes the list bullets to not display in Chrome.</p>
</div>

<h4 id="Example_syntax_16">Example syntax</h4>

<pre class="notranslate">&lt;div class="twocolumns"&gt;
  &lt;p&gt;Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.&lt;/p&gt;

  &lt;p&gt;Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.&lt;/p&gt;
&lt;/div&gt;</pre>
</details>

<h3 id=".blockIndicator.warning"><code>.blockIndicator.warning</code></h3>

<p>将内容的一部分转换为警告框，警告框通常传达读者需要非常小心的一个重要事实（例如，他们需要做一些事情，或避免一些事情来避免严重问题）</p>

<div class="blockIndicator warning">
<p><strong>Warning</strong>: Here be dragons!</p>
</div>

<details>
<p>This is available via the "Warning box" option in the MDN editor WYSIWYG styles dropdown.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11779/twocolumn-threecolumn.png" style="border: 1px solid black; display: block; height: 167px; margin: 0px auto; width: 253px;"></p>

<h4 id="Example_syntax_17">Example syntax</h4>

<pre class="brush: html notranslate">&lt;div class="blockIndicator warning"&gt;
  &lt;p&gt;&lt;strong&gt;Warning&lt;/strong&gt;:Here be dragons!&lt;/p&gt;
&lt;/div&gt;</pre>
</details>

<h2 id="表格样式">表格样式</h2>

<p>MDN为HTML“table”元素提供了特定的样式。这一节包括这些。</p>

<p>没有添加类：</p>

<table>
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99 °C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80 °C</td>
  </tr>
  <tr>
   <th colspan="4">Caffeine free</th>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99 °C</td>
  </tr>
 </tbody>
</table>

<h3 id=".standard-table"><code style="white-space: nowrap;">.standard-table</code></h3>

<table class="standard-table">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99 °C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80 °C</td>
  </tr>
  <tr>
   <th colspan="4">Caffeine free</th>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99 °C</td>
  </tr>
 </tbody>
</table>

<details>
<p>A standard table can be created using the <em>Table</em> button in the MDN editor WYSIWYG toolbar. Pressing this brings up the Table Properties dialog box, which contains a number of functions. Generally you'll just want to use it to set the number of rows and columns, which cells are table headers ({{HTMLElement("th")}}), and a visible {{HTMLElement("caption")}} and {{HTMLAttrxRef("summary", "table")}} attribute to provide more information for screenreaders, if desired.</p>

<p><img alt="A diagram showing the Table button in the MDN edit interface, which has a picture of a table on it, and the dialog box that it brings up, which has options on it to set row number, column number, which cells are headings, and more." src="https://mdn.mozillademos.org/files/11997/table-styles-interface-flat.png" style="display: block; margin: 0 auto;"></p>

<h4 id="Style_notes">Style notes</h4>

<ul>
 <li>Note the different styling applied to the headers ({{HTMLElement("th")}}), and the fact that they have {{HTMLAttrxRef("scope", "th")}} attributes applied for accessibility purposes.</li>
 <li>By default, alternating rows have zebra stripes applied, but these can be removed by adding the <code>.no-stripe</code> class to them.</li>
 <li>You can force a table to span the full width of the content area (or other immediate containing box, if it is not the content area) by adding the <code>.fullwidth</code> class to the {{HTMLElement("table")}} element.</li>
</ul>

<h4 id="Example_syntax_18">Example syntax</h4>

<pre class="brush: html notranslate">&lt;table class="standard-table" summary="This table details what tea we liked to drink back in the heady month of December 2015"&gt;
 &lt;caption&gt;Favorite teas, December 2015&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Variety&lt;/th&gt;
   &lt;th scope="col"&gt;Caffeine&lt;/th&gt;
   &lt;th scope="col"&gt;Steeping Time&lt;/th&gt;
   &lt;th scope="col"&gt;Water Temperature&lt;/th&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Black&lt;/th&gt;
   &lt;td&gt;High&lt;/td&gt;
   &lt;td&gt;2-3 minutes&lt;/td&gt;
   &lt;td&gt;99&amp;nbsp;°C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Green&lt;/th&gt;
   &lt;td&gt;Low to Medium&lt;/td&gt;
   &lt;td&gt;1-2 minutes&lt;/td&gt;
   &lt;td&gt;75 to 80&amp;nbsp;°C&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;th scope="row"&gt;Herbal&lt;/th&gt;
   &lt;td&gt;None&lt;/td&gt;
   &lt;td&gt;3-6 minutes&lt;/td&gt;
   &lt;td&gt;99&amp;nbsp;°C&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</pre>
</details>

<h3 id=".standard-table.nostripe"><code><span style="white-space: nowrap;">.standard-table</span>.nostripe</code></h3>

<table class="nostripe standard-table">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99 °C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80 °C</td>
  </tr>
  <tr>
   <th colspan="4">Caffeine free</th>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99 °C</td>
  </tr>
 </tbody>
</table>

<h3 id=".standard-table.fullwidth"><code>.<span style="white-space: nowrap;">standard-table</span>.fullwidth</code></h3>

<table class="fullwidth standard-table">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99 °C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80 °C</td>
  </tr>
  <tr>
   <th colspan="4">Caffeine free</th>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99 °C</td>
  </tr>
 </tbody>
</table>

<h3 id=".fullwidth-table"><code style="white-space: nowrap;">.fullwidth-table</code></h3>

<table class="fullwidth-table">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99 °C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80 °C</td>
  </tr>
  <tr>
   <th colspan="4">Caffeine free</th>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99 °C</td>
  </tr>
 </tbody>
</table>

<h2 id="更新本指南">更新本指南</h2>

<p><span style="">本指南不完整，正在逐步更新。如果您想帮助更新或添加到本指南中，请随时更新或添加！如果您有问题或想讨论并提出改进本文的想法，或者对我们如何改进MDN Web文档的样式或布局有建议，您可以有以下几种选择：</span></p>

<p><span style="">如果你想帮助完成它，或者想报告一个丢失或错误的文档样式，请联系Chris Mills（以chrisdavidmills的身份发言，在Mozil </span><a href="https://wiki.mozilla.org/IRC" style="">Mozilla IRC</a><span style=""> as chrismills)</span></p>

<dl>
 <dt><a href="https://discourse.mozilla.org/c/mdn">开始讨论MDN Web文档讨论论坛</a><a href="https://discourse.mozilla.org/c/mdn"> forum</a></dt>
 <dd>如果您有什么想法想与MDN Web Docs社区或工作人员讨论，请随时在Mozilla讨论站点的MDN Web Docs论坛上开始一个主题。</dd>
 <dt><a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md">在GitHub中提交您的建议</a></dt>
 <dd>如果您想在我们的官方问题跟踪系统中记录您的建议，我们鼓励您这样做。先用上面的一个频道讨论是个好主意，但这不是必需的。</dd>
 <dt><a href="irc://irc.mozilla.org/mdn">在IRC频道提问</a></dt>
 <dd>我们的写作人员和贡献者社区使用 <a href="https://wiki.mozilla.org/IRC">Mozilla's IRC 服务器</a> 进行讨论和分享想法。欢迎您加入我们，提出您的问题或建议！（请注意，IRC的参与度很低，可能会在2020年停办；对话是获得答案的最佳选择。）</dd>
</dl>