《深入理解bootstrap》閱讀筆記：第三章 CSS版面
- WBOY原創
- 2016-10-11 14:03:361392瀏覽
<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>內的文字字體在h1、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標籤加上class="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>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn