'In-depth Understanding of Bootstrap' Reading Notes: Chapter 3 CSS Layout-HTML Tutorial-php.cn

<h2>1. Outline the concept</h2> <div>bootstrap is developed based on H5. It advocates mobile first (media inquiry statement is required), and does not support a wide range of browsers. </div> <div>Responsive images: max-width:100% height:auto;</div> <div>You can add: .img-responsive class</div> <div>The basic style of typography is: </div> <div>The margin of the body is 0, the background color is white, and the line spacing is 20/14 times</div> <div>Use the Normalize.css library to minimize differences between browsers</div> <div>Centered container container has a maximum range. (The maximum left and right margins are auto, related to the device) </div> <div> </div> <h2>2. Basic text typesetting (global settings)</h2> <div> <h2>1.<span style="line-height: 1.6;">Title (h mark and small mark)</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" 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 tag subtitle</</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 tag subtitle</</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 tag subtitle</</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">>subtitle of small tag</</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">>subtitle of small tag</</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 tag subtitle</</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> </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>The font color of the <small> content in all title elements is gray<span style="line-height: 1.6;"> (#999999), and the line spacing is 1. </span></p> The text font in <p><small> is 65% of the font size corresponding to the current element in h1, h2, and h3; while in h4, h5, and h6, it is 75%. <span style="line-height: 1.6;"></span> </p> </div> <p> </p> <p>A. The font size is 14px and the spacing is 20px. The margin-bottom of the p element is half the line spacing (10px). <span style="line-height: 1.6;"></span> </p> <p>B. Highlight<span style="line-height: 1.6;"></span> </p> <p><span style="line-height: 1.6;">When you have a piece of text that you want to highlight but don’t want to get the same weight as the h mark, you can class="lead"<span></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;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1<div class="line number1 index0 alt2" style="height: 16px;"> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><<code class="html plain"></code>span<code class="html keyword"> </code>class<code class="html color1"></code>=<code class="html plain"></code>"lead"<code class="html string"></code>>email me</<code class="html plain"></code>span<code class="html keyword"></code>><code class="html plain"></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>As shown in the picture, the comparison effect between lead and h1: <span style="line-height: 1.6;"></span> </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>2. Emphasize text<h2> </h2> <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>Accent elements<td style="width: 50%;"> </td>Performance<td style="width: 50%;"> </td> </tr> <tr> <td style="width: 50%;">small<p> </p>(You can directly apply the .small class)<p> </p> </td>Small text<td style="width: 50%;"> </td> </tr> <tr>strong<td style="width: 50%;"> </td>Emphasis (bold)<td style="width: 50%;"> </td> </tr> <tr>em<td style="width: 50%;"> </td>italic<td style="width: 50%;"> </td> </tr> <tr>cite<td style="width: 50%;"> </td>Cite sources, font size is 85%<td style="width: 50%;"> </td> </tr> </tbody> <div> </div> <h2>3. Abbreviations abbr and .initialism</h2> <p>Both can achieve the underline dotted hover hand effect, which needs to be used with the title attribute. </p> <h2>4. address address</h2> <p>Used to package information related to contact information. The style difference is that the spacing and bottom style are slightly different. </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" 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">> Uncle Tom </</code><code class="html keyword">strong</code><code class="html plain">> </code><code class="html keyword"> </code><code class="html plain"><</code></div>a<div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">href</code><code class="html plain">=</code><code class="html keyword">"mailto:#"</code><code class="html color1">>tomxu@outlook.com</</code><code class="html plain">a</code><code class="html string">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">address</code></div>><div class="line number10 index9 alt1" style="height: 16px;"> <code class="html plain"> </code> <code class="html keyword"> </code> <code class="html plain"> </code> </div> </code> </div> </div> <p>The effect is as shown in the picture</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. Quote blockquote</span></h2> <p>The general format for citations is</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" 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>Love is not something you can just buy if you want</p></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 spaces"> </code><code class="as3 plain"><small>From<cite>Love Sales</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> </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;">Of course, replacing small with footer will have the same effect. </span></p> <p><span style="line-height: 1.6;">The default is left-aligned. If you want to right-align, you can use the .pull-right class for blockquote. The whole thing floated to the right. </span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" alt="" border="0"></p> <h2>6. List</h2> <h3>(1)ul-li unordered list</h3> <p>Under bootstrap, the ul-li framework of ordinary lists is basically the same as the default. </p> <p>A. The style of the ul-li list is determined by list-style. Use the .list-unstyle class in the bootstrap framework. The source code style is nothing more than padding-left:0;list-style:none. </p> <p>Note: If it is a list nested list, if the <span>.</span><span>list-unstyle class is applied to the grandparent ul, the grandchild li will not inherit it. </span></p> <p><span>B. Inline list: Normal ul-li is displayed vertically. In many situations, the most typical one is navigation, which requires li to be arranged horizontally. At this time, you can use the <span>.list-inline class of the inline list</span></span></p> <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" 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"> </code><code class="html plain"> </code> <code class="html keyword"> </code> <code class="html plain"> </code> </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) ordered list ol-li</h3> <p>Changed the font to make the display softer</p> <h3>(3) dl-dt-dd definition list</h3> <p>The definition list includes description information. The <span>dl-dt-dd definition list</span>under bootstrap is usually arranged vertically. </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" 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">>Title 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">>Description 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">>Title 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">>Description 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">>Title 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">>Description 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> </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 mark and s mark </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" 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> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142746164-1214610770.png" alt="" border="0"></p> <h3> (3) ins tag and u tag </h3> <div>Underscore, ins defines text that has been inserted into the document. The u mark <span style="line-height: 1.6;"> has different semantics from ins. If the text is not a hyperlink, don’t use the u mark </span> </div> <h3>(4) Alignment related</h3> <div>——text-left</div> <div>——text-center</div> <div>——text-right</div> <div>Text is centered left, center and right. </div> <div>——text-justify: judge for yourself—Qi Xing defines the spacing between words, which is similar to the head and tail avoidance rule. Note that there are also corresponding properties in css3. </div> <div>——text-nowrap: Always keep 1 line when the browser is zoomed out</div> <h3> (5) Case related: </h3> <div>text-lowercase</div> <div>text-uppercase </div> <div>text-capitalize initial letter size</div> <h3>【Example 3.1】Text formatting practice</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">>Translation</</code><code class="html keyword">em</code><code class="html plain">></</code><code class="html keyword">ins</code><code class="html plain">&g t;</code> </div>& & Lt; <div class="line number6 index5 alt1" style="height: 32px;"> <code class="html spaces">P</code><code class="html plain"> & gt; You say that the rain and rain are slightly mang, Lanting looks away; You said that spring was brilliant, green sleeves were red and fragrant; later, the west building was hidden inside, and I stood quietly beside you. You said that the soft breeze blows gently, and I lie down drunk and think; later, the doors and windows are tightly closed, and the tents are filled with sorrow. </</code><code class="html keyword">p</code><code class="html plain">></code><code class="html keyword"> </code><code class="html plain"> </</code></div>p<div class="line number7 index6 alt2" style="height: 16px;"><code class="html spaces">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">div</code><code class="html keyword">></code><code class="html plain"> </code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html plain"> </code> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" alt="" border="0"></p> <p> </p> <h2>3. Table related css</h2> <p>The table is implemented by adding the .table class to the table</p> <h3>【Example 3.2】<span style="line-height: 1.6;">Make a table with 5 rows and 5 columns to record information</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"> Since<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"> </code><code class="html plain"> ~ </code><code class="html keyword"> </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"> <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> </code> </div> </code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <div>Displayed when there is no class style: </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.table basic style</h2> <h3>(1) Add class="table" to the table tag, the effect becomes: </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> Is it possible to become rich, handsome and rich in seconds? </p> </div> <h3>(2) Alternate row color change.<span>table-striped</span> </h3> <p><span><span>table-striped: zebra crossing</span><br></span></p> <p><span>Using CSS3’s :nth-child implementation. </span></p> <h3>(3) Add border</h3> <p>Use .table-bordered to add a 1px border to all cells. </p> <h3>(4)Hover Highlight</h3> <p>Use .table:hover to highlight the current row on hover</p> <h3>(5) Compact Tables</h3> <p><span><span>table-condensed: Condensed, slightly smaller - reduces cell padding. This is what it looks like after applying everything. </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>Code List</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>& & Lt; <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">td</code><code class="html plain"> & gt; Journey to the West & LT;/</code><code class="html keyword">td</code><code class="html plain"> & gt; </code><code class="html keyword"> </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"> ~ </code><code class="html plain"> </code><code class="html keyword"> </code><code class="html plain"> <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></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </table> </div> </div> </div>

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

'In-depth Understanding of Bootstrap' Reading Notes: Chapter 3 CSS Layout