<h2>1. コンセプトの概要を説明します</h2>
<div>ブートストラップはH5に基づいて開発されています。モバイルファーストを提唱しており(メディア協議声明が必要)、幅広いブラウザーはサポートしていません。 </div>
<div>レスポンシブ画像: max-width:100% height:auto;</div>
<div>以下を追加できます: .img-response クラス</div>
<div>タイポグラフィの基本的なスタイルは次のとおりです: </div>
<div>本文の余白は0、背景色は白、行間は20/14倍です</div>
<div>Normalize.css ライブラリを使用してブラウザ間の違いを最小限に抑えます</div>
<div>中央のコンテナコンテナには最大範囲があります。 (左右の最大マージンはデバイスに応じて自動で設定されます) </div>
<div> </div>
<h2>2. 基本的なテキスト組版(グローバル設定)</h2>
<div>
<h2>1.<span style="line-height: 1.6;">タイトル(hマークと小マーク)</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标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h1</code><code class="html plain">></code></div>
<div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h2</code><code class="html plain">>header2<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h2</code><code class="html plain">></code></div>
<div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h3</code><code class="html plain">>header3<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">></code></div>
<div class="line number4 index3 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h4</code><code class="html plain">>header4<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h4</code><code class="html plain">></code></div>
<div class="line number5 index4 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h5</code><code class="html plain">>header5<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h5</code><code class="html plain">></code></div>
<div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h6</code><code class="html plain">>header6<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h6</code><code class="html plain">></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</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>すべてのタイトル要素の <small> コンテンツのフォントの色はグレー<span style="line-height: 1.6;"> (#999999)、行間隔は 1 です。 </span></small></p>
<p><small> のテキスト フォントは、h1、h2、および h3 の現在の要素に対応するフォント サイズの 65% ですが、h4、h5、および h6 では 75% です。 <span style="line-height: 1.6;"></span>
</small></p>
</div> <p>
</p>
<p>A. フォントサイズは14px、間隔は20pxです。 p 要素の margin-bottom は行間隔の半分 (10px) です。 <span style="line-height: 1.6;"></span>
</p>
<p>B.
<span style="line-height: 1.6;"></span></p>ハイライトしたいテキストがあるが、h マークと同じ重みを付けたくない場合は、class="lead"<p><span style="line-height: 1.6;"><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>1<tr>
<td class="gutter">
<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><code class="html keyword">span</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"lead"</code><code class="html plain">>email me</</code><code class="html keyword">span</code><code class="html plain">></code>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>写真に示すように、鉛とh1の比較効果: </div>
<p>
<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>2. テキストを強調する</span>
</p>
<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>パフォーマンス<td style="width: 50%;">
</td>
<td style="width: 50%;">
</td>
</tr>小さい<tr>
<td style="width: 50%;">(.smallクラスを直接適用できます)<p>
</p>
<p>小さなテキスト</p>
</td>
<td style="width: 50%;">
</td>強い</tr>
<tr>強調 (太字)<td style="width: 50%;">
</td>
<td style="width: 50%;">
</td>彼ら</tr>
<tr>斜体<td style="width: 50%;">
</td>
<td style="width: 50%;">
</td>引用</tr>
<tr>出典を引用、フォントサイズは85%です<td style="width: 50%;">
</td>
<td style="width: 50%;">
</td>
<div> </div>
<h2>3. 略語 abbr と .initialism </h2>
<p>どちらも、下線の点線のホバーハンド効果を実現できます。これは、title 属性とともに使用する必要があります。 </p>
<h2>4.住所</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><code class="html keyword">address</code><code class="html plain">></code></div>
<div class="line number2 index1 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>Twitter, Inc.</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code>
</div>
<div class="line number3 index2 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain">795 Folsom Ave, Suite 600<</code><code class="html keyword">br</code><code class="html plain">></code>
</div>
<div class="line number4 index3 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain">San Francisco, CA 94107<</code><code class="html keyword">br</code><code class="html plain">></code>
</div>
<div class="line number5 index4 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">abbr</code> <code class="html color1">title</code><code class="html plain">=</code><code class="html string">"Phone"</code><code class="html plain">>P:</</code><code class="html keyword">abbr</code><code class="html plain">>(123) 456-7890</code>
</div>
<div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div>
<div class="line number7 index6 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div>
<div class="line number8 index7 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>汤姆大叔</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code>
</div>
<div class="line number9 index8 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">a</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"mailto:#"</code><code class="html plain">>tomxu@outlook.com</</code><code class="html keyword">a</code><code class="html plain">></code>
</div>
<div class="line number10 index9 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</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. 引用ブロック</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></code></div>
<div class="line number2 index1 alt1" style="height: 16px;">
<code class="as3 spaces"> </code><code class="as3 plain"><p>爱情不是你想买想买就能买</p></code>
</div>
<div class="line number3 index2 alt2" style="height: 16px;">
<code class="as3 spaces"> </code><code class="as3 plain"><small>出自<cite>爱情买卖</cite></small></code>
</div>
<div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"></blockquote></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</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をフッターに置き換えても同じ効果があります。 </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>ブートストラップでは、通常のリストの ul-li フレームワークは基本的にデフォルトと同じです。 </p>
<p>A. ul-li リストのスタイルは list-style によって決まります。ブートストラップ フレームワークで .list-unstyle クラスを使用します。ソース コードのスタイルは、padding-left:0;list-style:none にすぎません。 </p>
<p>注: ネストされたリストの場合、<span>.</span><span>list-unstyle クラスが祖父母 ul に適用されると、孫の 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><code class="html keyword">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html plain">></code></div>
<div class="line number2 index1 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>home</</code><code class="html keyword">li</code><code class="html plain">></code>
</div>
<div class="line number3 index2 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>article</</code><code class="html keyword">li</code><code class="html plain">></code>
</div>
<div class="line number4 index3 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>about</</code><code class="html keyword">li</code><code class="html plain">></code>
</div>
<div class="line number5 index4 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">ul</code><code class="html plain">></code>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</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>定義リストには説明情報が含まれます。ブートストラップ下の<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><code class="html keyword">dl</code><code class="html plain">></code></div>
<div class="line number2 index1 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题1</</code><code class="html keyword">dt</code><code class="html plain">></code>
</div>
<div class="line number3 index2 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述1</</code><code class="html keyword">dd</code><code class="html plain">></code>
</div>
<div class="line number4 index3 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题2</</code><code class="html keyword">dt</code><code class="html plain">></code>
</div>
<div class="line number5 index4 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述2</</code><code class="html keyword">dd</code><code class="html plain">></code>
</div>
<div class="line number6 index5 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题3</</code><code class="html keyword">dt</code><code class="html plain">></code>
</div>
<div class="line number7 index6 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述3</</code><code class="html keyword">dd</code><code class="html plain">></code>
</div>
<div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">dl</code><code class="html plain">></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</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)デルマークと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><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タグとuタグ</h3>
<div>アンダースコア、ins は、ドキュメントに挿入されたテキストを定義します。 u マーク <span style="line-height: 1.6;"> は ins とはセマンティクスが異なります。テキストがハイパーリンクでない場合は、u マーク </span>
</div> を使用しないでください。
<h3>(4) アライメント関連</h3>
<div>——テキスト左</div>
<div>——テキストセンター</div>
<div>——テキスト右</div>
<div>テキストは左、中央、右の中央に配置されます。 </div>
<div>——text-justify: 自分で判断してください—Qi Xing は単語間の間隔を定義します。これは、先頭と末尾の回避ルールに似ています。 css3 にも対応するプロパティがあることに注意してください。 </div>
<div>——text-nowrap: ブラウザがズームアウトしているときは常に 1 行を維持します</div>
<h3> (5) 関連するケース: </h3>
<div>テキスト小文字</div>
<div>テキスト大文字 </div>
<div>text-頭文字を大文字にする</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><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-justify"</code><code class="html plain">></code></div>
<div class="line number2 index1 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">h3</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-center"</code><code class="html plain">>I am afraid <</code><code class="html keyword">small</code><code class="html plain">>William Shakespeare</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">></code>
</div>
<div class="line number3 index2 alt2" style="height: 32px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-capitalize"</code><code class="html plain">>you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</</code><code class="html keyword">p</code><code class="html plain">></code>
</div>
<div class="line number4 index3 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">><mark>This is why I am afraid, you say that u love me too.</mark></</code><code class="html keyword">p</code><code class="html plain">></code>
</div>
<div class="line number5 index4 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">ins</code><code class="html plain">><</code><code class="html keyword">em</code><code class="html plain">>译文</</code><code class="html keyword">em</code><code class="html plain">></</code><code class="html keyword">ins</code><code class="html plain">></code>
</div>
<div class="line number6 index5 alt1" style="height: 32px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">>你说烟雨微芒,兰亭远望;后来轻揽婆娑,深遮霓裳。你说春光烂漫,绿袖红香;后来内掩西楼,静立卿旁。你说软风轻拂,醉卧思量;后来紧掩门窗,漫帐成殇。</</code><code class="html keyword">p</code><code class="html plain">></code>
</div>
<div class="line number7 index6 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">>你说情丝柔肠,如何相忘;我却眼波微转,兀自成霜。</</code><code class="html keyword">p</code><code class="html plain">></code>
</div>
<div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" alt="" border="0"></p>
<p> </p>
<h2>3. テーブル関連のCSS</h2>
<p>テーブルは、.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><code class="html keyword">table</code><code class="html plain">></code></div>
<div class="line number2 index1 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number3 index2 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number4 index3 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number5 index4 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number6 index5 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number7 index6 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number8 index7 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code>
</div>
<div class="line number9 index8 alt2" style="height: 16px;">
<code class="html spaces"> </code> </div>
<div class="line number10 index9 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code>
</div>
<div class="line number11 index10 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number12 index11 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number13 index12 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number14 index13 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number15 index14 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>10.99</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number16 index15 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-1</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number17 index16 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number18 index17 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number19 index18 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number20 index19 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>三国演义</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number21 index20 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>罗贯中</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number22 index21 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>20.99</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number23 index22 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number24 index23 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number25 index24 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number26 index25 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>3</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number27 index26 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>水浒传</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number28 index27 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>施耐庵</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number29 index28 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>30.99</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number30 index29 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-3</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number31 index30 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number32 index31 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number33 index32 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>4</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number34 index33 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>红楼梦</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number35 index34 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>曹雪芹</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number36 index35 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>40.99</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number37 index36 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-4</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number38 index37 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number39 index38 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tbody</code><code class="html plain">></code>
</div>
<div class="line number40 index39 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">table</code><code class="html plain">></code>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> </p>
<div>クラススタイルがない場合に表示されます: </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.テーブルの基本スタイル</h2>
<h3>(1) class="table" を 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>テーブルストライプ</span>
</h3>
<p><span><span>テーブルストライプ: 横断歩道</span><br></span></p>
<p><span>CSS3 の :nth-child 実装を使用します。 </span></p>
<h3>(3)枠線を追加する</h3>
<p> .table-border を使用して、すべてのセルに 1 ピクセルの境界線を追加します。 </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><code class="html keyword">table</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"table table-bordered table-striped table-hover table-condensed"</code><code class="html plain">></code></div>
<div class="line number2 index1 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number3 index2 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number4 index3 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number5 index4 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number6 index5 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number7 index6 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number8 index7 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code>
</div>
<div class="line number9 index8 alt2" style="height: 16px;">
<code class="html spaces"> </code> </div>
<div class="line number10 index9 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code>
</div>
<div class="line number11 index10 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number12 index11 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number13 index12 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number14 index13 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number15 index14 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>10.99</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number16 index15 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-1</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number17 index16 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number18 index17 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code>
</div>
<div class="line number19 index18 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number20 index19 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>三国演义</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number21 index20 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>罗贯中</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number22 index21 alt1" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>20.99</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number23 index22 alt2" style="height: 16px;">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code>
</div>
<div class="line number24 index23 alt1" style="height: 16px;"><c></c></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>