《深入理解bootstrap》閱讀筆記：第三章 CSS版面

<h2>一. 概述一下理念</h2> <div>bootstrap基於H5開發。提倡移動先行（媒詢聲明是必須的），對瀏覽器支援面不是很廣。 </div> <div>響應式圖片：max-width:100% height:auto;</div> <div>可以加上：.img-responsive類別</div> <div>排版方面的基本樣式為：</div> <div>body的margin為0，背景色為白色，行間距為20/14倍</div> <div>使用Normalize.css庫，使各個瀏覽器差異最小化</div> <div>居中容器container有一個最大範圍。 （最大左右margin為auto，和設備有關）</div> <div> </div> <h2>二. 文字基礎排版（全域設定）</h2> <div> <h2>1.<span style="line-height: 1.6;">標題（h標記和small標記）</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 class="html keyword">h1</code><code class="html plain">>header1<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"><code class="html plain">h2</code></code></code></code></div>>header2<code class="html plain">small</code><code class="html keyword">>small標記的副標題</code><code class="html plain">small</code><code class="html keyword">> </code><code class="html plain"><code class="html keyword">h3</code><code class="html plain">>header3<code class="html keyword">small</code><code class="html plain">>small標記的副標題</code></code></code> </div>small<div class="line number3 index2 alt2" style="height: 16px;"> <code class="html plain">></code> <code class="html keyword"></code>h4<code class="html keyword"></code>>header4small<code class="html keyword"></code>>small標記的副標題<code class="html plain"></code>small<code class="html keyword"></code>> <code class="html plain"></code><div class="line number4 index3 alt1" style="height: 16px;">h5<code class="html plain"></code>>header5small<code class="html plain"></code>>small標記的副標題<code class="html keyword"></code>small<code class="html plain"></code>> <code class="html keyword"></code>h6<code class="html keyword"></code>>header6small</div> <div class="line number5 index4 alt2" style="height: 16px;">>small標記的副標題<code class="html plain"></code>small<code class="html keyword"></code>> <code class="html plain"> </code> <code class="html keyword"> </code> <code class="html plain"></code> </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> <p>所有標題元素裡的<small>內容的字體顏色都是灰色<span style="line-height: 1.6;">（#999999），行間距都為1。 </span></small></p> <p><small>內的文字字體在h​​1、h2、h3內是當前元素所對應<span style="line-height: 1.6;">字體大小的65%；而在h4、h5、h6下則是75%。 </span></small></p> </div> <p> </p> <p><span style="line-height: 1.6;">A. 字體大小為14px，間距為20px。 p元素的margin-bottom為行間距一半（10px）。 </span></p> <p><span style="line-height: 1.6;">B. 突出顯示</span></p> <p><span style="line-height: 1.6;"><span>當你有一段文字，想高亮顯示，又不想獲得和h標記一樣的權重時，可以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;"> <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 class="html keyword">span</code> <code class="html color1">class</code></code>span<code class="html string"> </code>class<code class="html plain"></code>=<code class="html keyword"></code>"lead"<code class="html plain"></code>>email me</div> </div>span</td> </tr>> </tbody> </table> </div> </div> </div> <p> <span style="line-height: 1.6;"> </span> </p> <p>如圖.lead和h1的比較效果：<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> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body">2. 強調文本<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> </p> <p> </p>small</td> <td style="width: 50%;">（可以直接套用.small類別）</td> </tr> <tr>小號文字<td style="width: 50%;"> </td> <td style="width: 50%;"> </td>strong</tr> <tr>著重（加粗）<td style="width: 50%;"> </td> <td style="width: 50%;"> </td>em</tr> <tr>斜體<td style="width: 50%;"> </td> <td style="width: 50%;"> </td>cite</tr> </tbody>引用來源，字體大小為85%</table> 🎜 🎜 🎜</div> </div> <div> </div> <h2>3. 縮寫abbr和.initialism</h2> <p>兩者都可以實現下劃虛線懸停手型效果 需要搭配title屬性使用。 </p> <h2>4. 地址address</h2> <p>用來包裹和聯絡資訊有關的資訊。樣式差異是間距和底部樣式稍微有點不同。 </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 class="html keyword">address</code><code class="html plain">></code></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><code class="html keyword">strong</code><code class="html plain">>Twitter, Inc.</code><code class="html keyword">strong</code><code class="html plain">><code class="html keyword">br </code><code class="html plain">    </code></code></code> </div>795 Folsom Ave, Suite 600<code class="html spaces">br</code><code class="html plain">></code><code class="html keyword"> </code><code class="html plain">    </code> </div>San Francisco, CA 94107<code class="html spaces">br</code><code class="html plain">></code><code class="html keyword"> </code><code class="html plain">    </code><code class="html spaces">abbr</code> <code class="html plain">title</code><code class="html keyword">=</code><code class="html color1">"Phone"</code><code class="html plain">>P:</code> <code class="html string"></code><code class="html plain"></code>address<code class="html keyword"></code>><code class="html plain"></code> <div class="line number6 index5 alt1" style="height: 16px;">address<code class="html keyword"></code>><code class="html plain"></code> </div> <div class="line number7 index6 alt2" style="height: 16px;">    <code class="html plain"></code>strong<code class="html plain"></code>>湯姆叔叔</div> <div class="line number8 index7 alt1" style="height: 16px;">strong<code class="html spaces"></code>>br<code class="html keyword"></code> <code class="html plain"></code>    <code class="html keyword"></code>a<code class="html keyword"> </code>href<code class="html plain"></code>=</div> <div class="line number9 index8 alt2" style="height: 16px;">"mailto:#"<code class="html spaces"></code>>tomxu <code class="html plain"></code><code class="html keyword"></code>address<code class="html color1"></code>><code class="html plain"></code> <code class="html string"> </code> <code class="html plain"> </code> <code class="html keyword"></code> </div> <p>效果如圖</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. 引用blockquote</span></h2> <p>引用的一般格式是</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></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"></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;">當然，small換成footer也是一樣的效果。 </span></p> <p><span style="line-height: 1.6;">預設是左對齊的，想要右對齊可以對blockquote使用.pull-right類別。整體飄到了右邊。 </span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" alt="" border="0"></p> <h2>6. 列表</h2> <h3>（1）ul-li無序列表</h3> <p>bootstrap下，普通列表的ul-li框架和預設基本上是一樣的。 </p> <p>A. ul-li列表的樣式是由list-style決定的。在bootstrap框架使用.list-unstyle類別。原始碼樣式無非是padding-left:0;list-style:none。 </p> <p>注意：如果是列表嵌套列表，對祖父級的ul應用<span>.</span><span>list-unstyle類，孫代li是不會繼承的。 </span></p> <p><span>B. 內聯列表：正常的ul-li是豎著顯示的。在很多場合，最典型的就是導航，需要把li打橫排列。這時可以使用內聯列表的<span>.list-inline類</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 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></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">            </code><code class="html plain"><code class="html keyword">li</code><code class="html plain">>home</code><code class="html keyword">li</code><code class="html plain">></code>>home</code> </div> <div class="line number3 index2 alt2" style="height: 16px;">li<code class="html spaces"></code>><code class="html plain"> </code><code class="html keyword">            </code><code class="html plain"><code class="html keyword">li</code><code class="html plain">>article</code></code> </div>li<div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">></code>>article<code class="html plain"></code>li<code class="html keyword"></code>><code class="html plain">>article</code><code class="html keyword">li</code> <code class="html plain"></code>            </div> <div class="line number5 index4 alt2" style="height: 16px;">li<code class="html plain"></code>>about<code class="html keyword"></code>li<code class="html plain"></code>></div>>about</div> </td>li</tr> </tbody>></table> 🎜🎜        🎜🎜🎜🎜ul🎜🎜>🎜🎜 🎜 🎜 🎜 🎜 🎜</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）有序列表ol-li</h3> <p>更換了字體，顯示更加柔和</p> <h3>（3）dl-dt-dd定義列表</h3> <p>定義列表包括了描述訊息，bootstrap下的<span>dl-dt-dd定義列表</span>通常也是縱向排列的。 </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 class="html keyword">dl</code><code class="html plain">></code></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><code class="html keyword">dt</code><code class="html plain">>標題1</code><code class="html keyword">dt</code><code class="html plain">></code></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><code class="html keyword">dd</code><code class="html plain">>描述1</code><code class="html keyword">dd</code><code class="html plain">></code></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><code class="html keyword">dt</code><code class="html plain">>標題2</code><code class="html keyword">dt</code><code class="html plain">></code></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><code class="html keyword">dd</code><code class="html plain">>描述2</code><code class="html keyword">dd</code><code class="html plain">></code></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><code class="html keyword">dt</code><code class="html plain">>標題3</code><code class="html keyword">dt</code><code class="html plain">></code></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><code class="html keyword">dd</code><code class="html plain">>描述3</code><code class="html keyword">dd</code><code class="html plain">></code></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標記和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" 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 class="html keyword">del</code><code class="html plain">>I am delated.</code><code class="html keyword">del</code><code class="html plain">></code></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標記和u標記</h3> <div>下劃線，ins定義已經被插入文件中的文字。 u標記<span style="line-height: 1.6;">語義和ins不同，如果文字不是超鏈接，就不要對其使用u標記</span> </div> <h3>（4）對齊相關</h3> <div>——text-left</div> <div>——text-center</div> <div>——text-right</div> <div>文本居左中右。 </div> <div>——text-justify：自己判斷——齊行定義單字間的間隔對齊，跟避頭尾法則類似。注意css3中也有對應的屬性。 </div> <div>——text-nowrap：瀏覽器縮小時始終保持1行</div> <h3>（5）大小寫相關：</h3> <div>text-lowercase小寫</div> <div>text-uppercase大寫</div> <div>text-capitalize首字母大小</div> <h3>【例3.1】文字排版練習</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 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></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><code class="html keyword">h3</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-center"h </code>small<code class="html plain"></code>><code class="html keyword"></code>h3<code class="html plain"> </code>><code class="html keyword"></code> <code class="html plain"></code>        <code class="html keyword"></code></code>p</div> <div class="line number3 index2 alt2" style="height: 32px;">class<code class="html spaces"></code>= <code class="html plain">"text-capitalize" 標題🜎</code>= or that<code class="html keyword">"text-capitalize" 標題🜎 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 color1">p</code><code class="html plain">></code><code class="html string"> </code><code class="html plain">        </code><code class="html keyword"><code class="html plain">p</code></code> </div>><mark>This is why I am afraid, you say that u me too. <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><code class="html keyword">ins</code><code class="html plain">><code class="html keyword">em</code><code class="html plain">>譯<div class="line number6 index5 alt1" style="height: 32px;"> <code class="html spaces">        </code><code class="html plain"><code class="html keyword">p</code><code class="html plain">>你說煙雨微芒，蘭亭遠望；後來輕攬中，深遮婆娑。你說春光爛漫，綠袖紅香；後來內掩西樓，靜立卿旁。你說軟風輕拂，醉臥思量；後來緊緊掩門窗，漫帳成殤。 </code><code class="html keyword">p</code><code class="html plain">></code></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><code class="html keyword">p</code><code class="html plain">>你說情絲柔腸，如何相忘；我卻眼波微轉，兀自成霜。 </code><code class="html keyword">p</code><code class="html plain">></code></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> </code></code></code> </div> </mark> </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>三. 表格相關css</h2> <p>表格實作是給table加上.table類</p> <h3>【例3.2】<span style="line-height: 1.6;">做一個5行5列的表格，記錄資料</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 class="html keyword">table</code><code class="html plain">></code></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><code class="html keyword">thead</code><code class="html plain">></code>thead<code class="html plain"></code>><code class="html spaces">thead</code><code class="html plain">><code class="html keyword">                        </code><code class="html plain"><code class="html keyword">td</code>><div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><code class="html keyword">td</code>> <code class="html plain"></code>                        <code class="html keyword"></code></code>td</div>>作者？ <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><code class="html keyword">td</code>>配 <code class="html plain"></code>                        <code class="html keyword"></code></code>td</div>> <div class="line number6 index5 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"></code>tr<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"></code>身體<code class="html keyword"></code>><code class="html plain"></code><div class="line number8 index7 alt1" style="height: 16px;">身體<code class="html spaces"></code>><code class="html plain"></code>身體<code class="html plain"></code>><code class="html keyword"></code>身體</div> <div class="line number9 index8 alt2" style="height: 16px;">><code class="html spaces"></code><div class="line number10 index9 alt1" style="height: 16px;">身體<code class="html spaces"></code>><code class="html plain"></code>身體<code class="html plain"></code>></div> <div class="line number11 index10 alt2" style="height: 16px;">體 <code class="html plain"></code>                        <code class="html keyword"></code>tr</div> <div class="line number12 index11 alt1" style="height: 16px;">><code class="html spaces"></code>tr<code class="html keyword"></code>><code class="html plain"></code>tr<code class="html plain"> </code> </div>                            <div class="line number13 index12 alt2" style="height: 16px;"><code class="html spaces"><code class="html plain">                            </code> <code class="html keyword"></code>                            <code class="html plain"><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;">tr<code class="html spaces"> </code><code class="html plain">                        </code><code class="html keyword"><code class="html plain">tr</code><code class="html keyword">></code><code class="html plain"></code></code> </div>tr<div class="line number17 index16 alt2" style="height: 16px;"> <code class="html spaces">></code><code class="html plain"><code class="html keyword">tr</code> <code class="html plain"></code>                            </code> </div> <div class="line number18 index17 alt1" style="height: 16px;">                            <code class="html plain"> </code><code class="html keyword">                            </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"> </code><code class="html plain">                        </code><code class="html keyword"></code><code class="html plain">tr</code> </div> <div class="line number20 index19 alt1" style="height: 16px;">                        <code class="html spaces"></code>tr<code class="html keyword"></code>><code class="html plain"></code>tr<code class="html plain"></code>></div> <div class="line number21 index20 alt2" style="height: 16px;">tr<code class="html plain"><div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><code class="html keyword">                            </code><code class="html plain"> <code class="html keyword"></code>                            <code class="html plain"> </code> </code></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"> </code><code class="html plain"> </code><code class="html keyword">                        </code><code class="html plain"></code> </div>tr<div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces"></code>                        <code class="html plain"></code>tr<code class="html plain"></code>><code class="html keyword"></code>tr</div> <div class="line number29 index28 alt2" style="height: 16px;">><code class="html spaces"></code>tr<code class="html keyword"> </code><code class="html plain">                            </code><code class="html keyword"><code class="html plain">                            </code> </code> </div> <div class="line number30 index29 alt1" style="height: 16px;">                          可能<div class="line number36 index35 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 class="line number37 index36 alt2" style="height: 16px;">tr<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 number38 index37 alt1" style="height: 16px;"> <code class="html spaces">></code><code class="html plain"></code><code class="html keyword">身體</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"></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">></code><code class="html plain"></code> </div>體 </div></code> </div></code></code></div> </div> </div></code></code></code> </div> </div> </td>                </tr> </tbody> </table>🎜桌子🎜🎜>🎜🎜🎜🎜桌子🎜🎜>🎜🎜 🎜 🎜 🎜 🎜 🎜</div> </div> </div> <p> </p> <div>無任何class樣式時顯示：</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基礎樣式</h2> <h3>（1） 為table標籤加上cla​​ss="table"，效果就變成：</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> 秒變高富帥了有木有？ </p> </div> <h3>（2）隔行變色.<span>table-striped</span> </h3> <p><span><span>table-striped：斑馬線</span><br></span></p> <p><span>使用CSS3的:nth-child實現。 </span></p> <h3>（3）加上邊框</h3> <p>使用.table-bordered可以為所有儲存格新增1px的邊框。 </p> <h3>（4）懸停高亮</h3> <p>使用.table:hover可以讓目前行懸停高亮</p> <h3>（5）緊湊型表格</h3> <p><span><span>table-condensed:壓縮，稍微小一點－減少單元格的內邊距。全部塗抹後是這樣的。 </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>代碼清單</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 class="html keyword">table</code> <code class="html color1">class</code></code>table<code class="html string"> </code>class<code class="html plain"></code>=</div> <div class="line number2 index1 alt1" style="height: 16px;">"table table-border table-striped table-hover table-condensed"<code class="html spaces"></code>><code class="html plain"></code> <code class="html keyword"></code>                    <code class="html plain"></code>頭<code class="html plain"></code>><code class="html spaces">頭</code><code class="html plain">></code>頭<code class="html plain"></code>>                        <code class="html plain"></code><div class="line number4 index3 alt1" style="height: 16px;">td<code class="html spaces">> </code><code class="html plain">                        </code><code class="html keyword"><code class="html plain">td</code>> <code class="html keyword"></code>                        <code class="html plain"></code><div class="line number5 index4 alt2" style="height: 16px;">td<code class="html spaces">>作者？ </code><code class="html plain">                        </code><code class="html keyword"><code class="html plain">td</code>>配 <code class="html keyword"></code>                        <code class="html plain"></code><div class="line number6 index5 alt1" style="height: 16px;">td<code class="html spaces">> </code><code class="html plain">                    </code><code class="html keyword"></code><code class="html plain">tr</code><code class="html keyword">></code><code class="html plain"></code>tr</div> <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"></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"></code>身體<code class="html keyword"></code>><code class="html plain"></code><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 plain"></code>><code class="html keyword"></code>身體</div> <div class="line number11 index10 alt2" style="height: 16px;">><code class="html spaces"></code>體 <code class="html keyword"></code>                        <code class="html plain"></code><div class="line number12 index11 alt1" style="height: 16px;">tr<code class="html spaces"></code>><code class="html plain"></code>tr<code class="html plain"></code>><code class="html keyword"></code>tr</div> 🎜🎜                            🎜🎜<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 number14 index13 alt1" style="height: 16px;"> <code class="html spaces"></code>                        <code class="html plain"></code><code class="html keyword"></code>tr<code class="html plain"> </code><code class="html keyword">                        </code><code class="html plain"></code> </div>tr<div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">></code><code class="html plain"><code class="html keyword">tr</code><code class="html plain">></code><code class="html keyword"><code class="html plain">tr</code> </code></code> </div> <div class="line number16 index15 alt1" style="height: 16px;">                            <code class="html spaces"></code>                            <code class="html keyword"> </code><code class="html plain">                            </code> <code class="html keyword"></code>                            <code class="html plain"> </code><div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">                            </code> <code class="html plain"></code> <code class="html keyword"><c></c></code> </div> </div> </div></code> </div></code> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>