„Detailliertes Verständnis von Bootstrap' Lesehinweise: Kapitel 3 CSS-Layout

<h2>1. Skizzieren Sie das Konzept</h2> <div>Bootstrap wurde auf Basis von H5 entwickelt. Es befürwortet „Mobile First“ (eine Erklärung zur Medienkonsultation ist erforderlich) und unterstützt nicht viele Browser. </div> <div>Responsive Bilder: max-width:100% height:auto;</div> <div>Sie können hinzufügen: .img-responsive Klasse</div> <div>Der Grundstil der Typografie ist: </div> <div>Der Rand des Körpers ist 0, die Hintergrundfarbe ist weiß und der Zeilenabstand beträgt 20/14-mal</div> <div>Verwenden Sie die Bibliothek Normalize.css, um Unterschiede zwischen Browsern zu minimieren</div> <div>Der zentrierte Behälterbehälter hat eine maximale Reichweite. (Der maximale linke und rechte Rand ist abhängig vom Gerät automatisch) </div> <div> </div> <h2>2. Grundlegender Textsatz (globale Einstellungen) </h2> <div> <h2>1.<span style="line-height: 1.6;">Titel (h-Tag und kleines Tag) </span> </h2> <div> <div id="highlighter_795477" class="syntaxhighlighter html" style="width: 1276.8px;"> <div id="highlighter_361744" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" style="width: 1275px;" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" style="width: 1275px;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> </td> <td class="code" style="width: 1173px;"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h1</code><code class="html plain">>header1<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h1</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h2</code><code class="html plain">>header2<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h2</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h3</code><code class="html plain">>header3<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">></code></div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h4</code><code class="html plain">>header4<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h4</code><code class="html plain">></code></div> <div class="line number5 index4 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h5</code><code class="html plain">>header5<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h5</code><code class="html plain">></code></div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h6</code><code class="html plain">>header6<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h6</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 <div class="line number6 index5 alt1" style="height: 16px;">6 </div> </div> </div> </div> </div> </div> </td> <td class="code" style="width: 1173px;"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">h1</code><code class="html plain">>header1<</code><code class="html keyword">small</code><code class="html plain">>Untertitel des kleinen Tags</</code > <code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h1</code><code class = "html plain">></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">h2</code><code class="html plain">>header2<</code><code class="html keyword">small</code><code class="html plain">>Untertitel des kleinen Tags</</code > <code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h2</code><code class = "html plain">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">h3</code><code class="html plain">>header3<</code><code class="html keyword">small</code><code class="html plain">>Untertitel des kleinen Tags</</code > <code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class = "html plain">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">h4</code><code class="html plain">>header4<</code><code class="html keyword">small</code><code class="html plain">>Untertitel des kleinen Tags</</code > <code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h4</code><code class = "html plain">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">h5</code><code class="html plain">>header5<</code><code class="html keyword">small</code><code class="html plain">>Untertitel des kleinen Tags</</code > <code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h5</code><code class = "html plain">></code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">h6</code><code class="html plain">>header6<</code><code class="html keyword">small</code><code class="html plain">>Untertitel des kleinen Tags</</code > <code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h6</code><code class = "html plain">></code> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142739102-1895601554.png" alt="" border="0"><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740055-2109177660.jpg" alt="" border="0"> </div> </div> <div> <p>Die Schriftfarbe des <small>-Inhalts in allen Titelelementen ist grau <span style="line-height: 1.6;"> (#999999) und der Zeilenabstand beträgt 1. </span></p> Die Textschriftart innerhalb von <p><small> beträgt 65 % der Schriftgröße des entsprechenden <span style="line-height: 1.6;">-Elements in h1, h2 und h3, während sie in h4, h5 und h6 75 % beträgt. </span></p> </div> <p> </p> <p><span style="line-height: 1.6;">A. Die Schriftgröße beträgt 14 Pixel und der Abstand beträgt 20 Pixel. Der untere Rand des p-Elements beträgt die Hälfte des Zeilenabstands (10 Pixel). </span></p> <p><span style="line-height: 1.6;">B. Hervorheben </span></p> <p><span style="line-height: 1.6;"><span>Wenn Sie ein Textstück haben, das Sie hervorheben möchten, aber nicht die gleiche Gewichtung wie das h-Tag erhalten möchten, können Sie class="lead"</span><br></span> </p> <p> </p> <div id="highlighter_393077" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<div class="wiz-table-body"> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">span</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"lead"</code><code class="html plain" >>schicken Sie mir eine E-Mail</</code><code class="html keyword">span</code><code class="html plain">></code><table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"lead"</code><code class="html plain">>email me</</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </tbody> </table> </div> </div> <p> <span style="line-height: 1.6;"></span>Wie in der Abbildung gezeigt, der Vergleichseffekt zwischen Blei und h1: </p> <p> <span style="line-height: 1.6;"><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740539-2045389970.png" alt="" border="0"><br></span></p> <h2> </h2>2. Text hervorheben<div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table style="width: 100%;" border="1" bgcolor="#FFFFFF"> <tbody> <tr> <td style="width: 50%;">强调元素</td> <td style="width: 50%;">表现</td> </tr> <tr> <td style="width: 50%;"> <p>small</p> <p>（可以直接套用.small类）</p> </td> <td style="width: 50%;">小号文本</td> </tr> <tr> <td style="width: 50%;">strong</td> <td style="width: 50%;">着重（加粗）</td> </tr> <tr> <td style="width: 50%;">em</td> <td style="width: 50%;">斜体</td> </tr> <tr> <td style="width: 50%;">cite</td> <td style="width: 50%;">引用来源，字体大小为85%</td> </tr> </tbody> </table> <table style="width: 100%;" border="1" bgcolor="#FFFFFF"> <tbody> <tr> <td style="width: 50%;">Hervorhebungselement</td> <td style="width: 50%;">Leistung</td> </tr> <tr> <td style="width: 50%;"> klein (Sie können die .small-Klasse direkt anwenden) </td> <td style="width: 50%;">Kleiner Text</td> </tr> <tr> <td style="width: 50%;">stark</td> <td style="width: 50%;">Hervorhebung (fett)</td> </tr> <tr> <td style="width: 50%;">em</td> <td style="width: 50%;">kursiv</td> </tr> <tr> <td style="width: 50%;">zitieren</td> <td style="width: 50%;">Quellenangabe, Schriftgröße beträgt 85 %</td> </tr> </tbody> </table> </div> </div> <div> </div> <h2>3. Abkürzungen abbr und .initialism</h2> <p>Beide können den unterstrichenen, gepunkteten Hover-Hand-Effekt erzielen, der mit dem Titelattribut verwendet werden muss. </p> <h2>4. Adresse</h2> <p>Wird zum Packen von Informationen im Zusammenhang mit Kontaktinformationen verwendet. Der Stilunterschied besteht darin, dass der Abstand und der untere Stil leicht unterschiedlich sind. </p> <div id="highlighter_86830" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>Twitter, Inc.</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain">795 Folsom Ave, Suite 600<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain">San Francisco, CA 94107<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">abbr</code> <code class="html color1">title</code><code class="html plain">=</code><code class="html string">"Phone"</code><code class="html plain">>P:</</code><code class="html keyword">abbr</code><code class="html plain">>(123) 456-7890</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number7 index6 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>汤姆大叔</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">a</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"mailto:#"</code><code class="html plain">>tomxu@outlook.com</</code><code class="html keyword">a</code><code class="html plain">></code> </div> <div class="line number10 index9 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7 <div class="line number8 index7 alt1" style="height: 16px;">8 <div class="line number9 index8 alt2" style="height: 16px;">9 <div class="line number10 index9 alt1" style="height: 16px;">10 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code> <div class="Zeilennummer2 index1 alt1" style="height: 16px;"> <code class="html Leerzeichen"> </code><code class="html plain"><</code><code Klasse ="html keyword">strong</code><code class="html plain">>Twitter, Inc.</</code><code class="html keyword">strong</code><code Klasse ="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="htmlspaces"> </code><code class="html plain">795 Folsom Ave, Suite 600<</ code><code class="html keyword">br</code><code class="html plain">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html Leerzeichen"> </code><code class="html plain">San Francisco, CA 94107<</code ><code class="html keyword">br</code><code class="html plain">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html rooms"> </code><code class="html plain"><</code><code class ="html keyword">abbr</code> <code class="html color1">title</code><code class="html plain">=</code><code class="html string">"Phone "</code><code class="html plain">>P:</</code><code class="html keyword">abbr</code><code class="html plain">> (123) 456-7890</code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html plain"></</code><code class="html keyword">address</code>< code class="html plain">></code> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html rooms"> </code><code class="html plain"><</code><code class ="html keyword">strong</code><code class="html plain">>Onkel Tom</</code><code class="html keyword">strong</code><code class=" html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html rooms"> </code><code class="html plain"><</code><code class ="html keyword">a</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"mailto :#"</code><code class="html plain">>tomxu@outlook.com</</code><code class="html keyword">a</code><code class="html plain ">></code> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html plain"></</code><code class="html keyword">address</code>< code class="html plain">></code> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>Der Effekt ist wie im Bild gezeigt</p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741086-1251850225.png" alt="" border="0"></p> <h2><span style="line-height: 1.6;">5. Blockzitat zitieren</span></h2> <p>Das allgemeine Format für Zitate ist </p> <div id="highlighter_518004" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain"><blockquote></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 spaces">    </code><code class="as3 plain"><p>爱情不是你想买想买就能买</p></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 spaces">    </code><code class="as3 plain"><small>出自<cite>爱情买卖</cite></small></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"></blockquote></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain"><blockquote></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3spaces"> </code><code class="as3 plain"><p>Liebe ist nicht das, was du bist kaufen möchten Sie können es kaufen, wenn Sie möchten</p></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 rooms"> </code><code class="as3 plain"><small>from<cite> Unternehmen</cite></small></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="as3 plain"></blockquote></code> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741430-49428234.png" alt="" border="0"></p> <p><span style="line-height: 1.6;">Natürlich hat das Ersetzen von small durch footer den gleichen Effekt. </span></p> <p><span style="line-height: 1.6;">Der Standardwert ist linksbündig. Wenn Sie rechtsbündig sein möchten, können Sie die Klasse .pull-right für Blockquote verwenden. Das Ganze schwebte nach rechts. </span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" alt="" border="0"></p> <h2>6. Liste</h2> <h3>(1) ul-li ungeordnete Liste</h3> <p>Unter Bootstrap entspricht das ul-li-Framework gewöhnlicher Listen im Wesentlichen dem Standard. </p> <p>A. Der Stil der ul-li-Liste wird durch den Listenstil bestimmt. Verwenden Sie die Klasse .list-unstyle im Bootstrap-Framework. Der Quellcodestil ist nichts anderes als padding-left:0;list-style:none. </p> <p>Hinweis: Wenn es sich um eine verschachtelte Liste von Listen handelt und die Klasse <span>.</span><span>list-unstyle auf die Großeltern-UL angewendet wird, erbt die Enkel-Li sie nicht. </span></p> <p><span>B. Inline-Liste: Normales ul-li wird vertikal angezeigt. In vielen Situationen ist die Navigation die typischste, bei der Li horizontal angeordnet sein muss. Zu diesem Zeitpunkt können Sie die <span>.list-inline-Klasse </span></span></p> der Inline-Liste verwenden <p> </p> <div id="highlighter_385611" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">            </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>home</</code><code class="html keyword">li</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">            </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>article</</code><code class="html keyword">li</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">            </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>about</</code><code class="html keyword">li</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"></</code><code class="html keyword">ul</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 </div> </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html plain">></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html rooms" keyword>li</code><code class="html plain">>home< ;/</code><code class="html keyword">li</code><code class="html plain ">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="htmlspaces" keyword>li</code><code class="html plain">>article< ;/</code><code class="html keyword">li</code><code class="html plain ">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html rooms" keyword>li</code><code class="html plain">>about< ;/</code><code class="html keyword">li</code><code class="html plain ">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html Leerzeichen"> </code><code class="html plain"></</code><code class="html keyword">ul</code><code class="html plain">></code> </div> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742258-1575759483.png" alt="" border="0"><br></span></p> <h3>(2) Geordnete Liste ol-li</h3> <p>Die Schriftart wurde geändert, um die Anzeige weicher zu gestalten</p> <h3>(3) dl-dt-dd-Definitionsliste</h3> <p>Die Definitionsliste enthält Beschreibungsinformationen. Die <span>dl-dt-dd-Definitionsliste</span> unter Bootstrap ist normalerweise vertikal angeordnet. </p> <div id="highlighter_598113" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">dl</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题1</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述1</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题2</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述2</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题3</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述3</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">dl</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7 <div class="line number8 index7 alt1" style="height: 16px;">8 </div> </div> </div> </div> </div> </div> </div> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">dl</code><code class="html plain">></code> <div class="Zeilennummer2 index1 alt1" style="height: 16px;"> <code class="html Leerzeichen"> </code><code class="html plain"><</code><code Klasse ="html keyword">dt</code><code class="html plain">>Titel 1</</code><code class="html keyword">dt</code><code class="html plain">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html rooms"> </code><code class="html plain"><</code><code class ="html keyword">dd</code><code class="html plain">>Beschreibung 1</</code><code class="html keyword">dd</code><code class="html plain">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="htmlspaces"> </code><code class="html plain"><</code><code class ="html keyword">dt</code><code class="html plain">>Title 2</</code><code class="html keyword">dt</code><code class="html plain">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html rooms"> </code><code class="html plain"><</code><code class ="html keyword">dd</code><code class="html plain">>Beschreibung 2</</code><code class="html keyword">dd</code><code class="html plain">></code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html rooms"> </code><code class="html plain"><</code><code class ="html keyword">dt</code><code class="html plain">>Titel 3</</code><code class="html keyword">dt</code><code class="html plain">></code> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html rooms"> </code><code class="html plain"><</code><code class ="html keyword">dd</code><code class="html plain">>Beschreibung 3</</code><code class="html keyword">dd</code><code class="html plain">></code> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html plain"></</code><code class="html keyword">dl</code>< code class="html plain">></code> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742743-1319120599.png" alt="" border="0"></p> <p>我想在横向展示一个商品列表，包括描述信息。如果给dl加上<span>class="dl-horizontal"</span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142743258-1006507091.png" alt="" border="0"></p> <p> </p> <h2>7. 代码</h2> <p>包括code单行代码，kbd用户输入代码和pre多行代码块。</p> <p>代码样式的用法示例如下：</p> <div id="highlighter_826630" class="syntaxhighlighter html"> <div id="highlighter_296927" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">code</code><code class="html plain">><body></body></</code><code class="html keyword">code</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">kbd</code><code class="html plain">><body></body></</code><code class="html keyword">kbd</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">pre</code><code class="html plain">><body></body></</code><code class="html keyword">pre</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744352-1730720578.png" alt="" border="0"> </div> <h3>（1）code</h3> <p><span>code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色</span></p> <h2><span>（2）kbd</span></h2> <p>kbd表示需要用户输入，可以配合input元素使用。</p> <div id="highlighter_709029" class="syntaxhighlighter js"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="js plain">请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744649-2052810696.png" alt="" border="0"></p> <h2>（3）多行代码块pre</h2> <p>pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。</p> <p>粘贴进去会有空格。</p> <p>类似还有<samp>可以格式化代码。用较为标准的字体和行间距显示</p> <h2>8.其它H5标记补充</h2> <p><span>（1）<mark>,也可以使用.mark</span></p> <p> </p> <div id="highlighter_283527" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"mark"</code><code class="html plain">>this is mark text</</code><code class="html keyword">p</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744930-1750370126.png" alt="" border="0"><br></span></p> <h3><span><span>（2）del标记和s标记</span></span></h3> <div id="highlighter_100404" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">del</code><code class="html plain">>I am delated.</</code><code class="html keyword">del</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html keyword">del</code><code class="html plain">>Ich bin zurückgezogen.</</code><code class="html keyword">del</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142746164-1214610770.png" alt="" border="0"></p> <h3> (3) Ins-Markierung und U-Markierung </h3> <div> Unterstrich, Ins definiert Text, der in das Dokument eingefügt wurde. Das u-Tag <span style="line-height: 1.6;"> hat eine andere Semantik als ins. Wenn der Text kein Hyperlink ist, verwenden Sie dafür nicht das u-Tag </span> </div>. <h3>(4) Ausrichtungsbezogen</h3> <div>——text-links</div> <div>——text-center</div> <div>——text-rechts</div> <div>Text ist links, zentriert und rechts zentriert. </div> <div>——text-justify: Urteilen Sie selbst – Qi Xing definiert den Abstand zwischen Wörtern, ähnlich der Regel zur Vermeidung von Kopf und Schwanz. Beachten Sie, dass es auch in CSS3 entsprechende Eigenschaften gibt. </div> <div>——text-nowrap: Behalten Sie immer 1 Zeile bei, wenn der Browser verkleinert wird</div> <h3> (5) Fallbezogen: </h3> <div>text-lowercase Kleinbuchstaben</div> <div>Text-Großbuchstaben</div> <div>Anfangsbuchstabengröße im Text groß schreiben</div> <h3>[Beispiel 3.1] Textformatierungspraxis</h3> <div id="highlighter_620203" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 32px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 32px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-justify"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">h3</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-center"</code><code class="html plain">>I am afraid <</code><code class="html keyword">small</code><code class="html plain">>William Shakespeare</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 32px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-capitalize"</code><code class="html plain">>you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">><mark>This is why I am afraid, you say that u love me too.</mark></</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">ins</code><code class="html plain">><</code><code class="html keyword">em</code><code class="html plain">>译文</</code><code class="html keyword">em</code><code class="html plain">></</code><code class="html keyword">ins</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 32px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">>你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">>你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" alt="" border="0"></p> <p> </p> <h2>3. Tabellenbezogenes CSS</h2> <p>Die Tabellenimplementierung besteht darin, der Tabelle die .table-Klasse hinzuzufügen</p> <h3>[Beispiel 3.2]<span style="line-height: 1.6;">Erstellen Sie eine Tabelle mit 5 Zeilen und 5 Spalten und notieren Sie die Informationen</span> </h3> <p> </p> <div id="highlighter_341065" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                    </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>10.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number17 index16 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number18 index17 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number19 index18 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number20 index19 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>三国演义</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number21 index20 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>罗贯中</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number22 index21 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>20.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number25 index24 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number27 index26 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>水浒传</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>施耐庵</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>30.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number32 index31 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number33 index32 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number34 index33 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>红楼梦</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number35 index34 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>曹雪芹</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number36 index35 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>40.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number37 index36 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number38 index37 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number39 index38 alt2" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number40 index39 alt1" style="height: 16px;"> <code class="html spaces">                </code><code class="html plain"></</code><code class="html keyword">table</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <div>Wird angezeigt, wenn kein Klassenstil vorhanden ist: </div> <div> <img style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" alt="" border="0"> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748961-1101927088.png" alt="" border="0"></p> <h2>1.Tabellen-Grundstil</h2> <h3>(1) Fügen Sie class="table" zum Tabellen-Tag hinzu, der Effekt wird: </h3> </div> <div> <img style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" alt="" border="0"> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142749539-745591421.png" alt="" border="0"></p> <p> Ist es möglich, in Sekundenschnelle groß, reich und gutaussehend zu werden? </p> </div> <h3>(2) Abwechselnde Reihen ändern ihre Farbe.<span>Tabellenstreifen</span> </h3> <p><span><span>Tischgestreift: Zebrastreifen</span><br></span></p> <p><span>Verwendung der :nth-child-Implementierung von CSS3. </span></p> <h3>(3) Rand hinzufügen</h3> <p>Verwenden Sie .table-bordered, um allen Zellen einen 1-Pixel-Rand hinzuzufügen. </p> <h3> (4) Hover-Hervorhebung </h3> <p>Verwenden Sie .table:hover, um die aktuelle Zeile beim Hover hervorzuheben </p> <h3>(5) Kompakter Tisch</h3> <p><span><span>Tabellenkondensiert: Kondensiert, etwas kleiner – reduziert Zellpolsterung. So sieht es aus, nachdem alles aufgetragen wurde. </span><br></span></p> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142750039-106969313.png" alt="" border="0"><br></span></p> <p>Codeliste</p> <div id="highlighter_419714" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"table table-bordered table-striped table-hover table-condensed"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                     </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>10.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number17 index16 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number18 index17 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number19 index18 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number20 index19 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>三国演义</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number21 index20 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>罗贯中</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number22 index21 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>20.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"><c></c></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div>