aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/mdn/guidelines/css_style_guide/index.html
blob: ee85c19b970713fc3ab0fc8ff2d8f26445f00a65 (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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
---
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="https://wiki.developer.mozilla.org/en-US/search?locale=*&amp;css_classnames=card-grid">https://wiki.developer.mozilla.org/en-US/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>