<div class="iteye-blog-content-contain" style="font-size: 14px;">
<p>转自：http://www.csdn.net/article/2013-05-29/2815470-css-snippets-for-designers</p>
<p> </p>
<div class="summary" style="margin: 0px 0px 1.5em; padding: 5px 10px; background-color: #f7f7f7; color: #333333; line-height: 24px;">国外UX设计师Jake Rocheleau收集整理了50段超实用的CSS代码，上周，研发频道编译了前20段，本文是对后30个CSS特效的编译。</div>
<div class="con news_content" style="margin: 0px 0px 30px; padding: 0px; color: #333333; line-height: 24px;">
<p style="margin-bottom: 1.5em;">上周，研发频道发表了一篇“ <a style="cursor: pointer; color: #0066cc;" href="http://www.csdn.net/article/2013-05-24/2815422-20-Useful-CSS-Snippets-Every-Designer-Should-Have" target="_blank">Web开发者不容错过的20段CSS代码</a>”，大家一致觉得很实用。该文是笔者对后30个的翻译，希望对大家有帮助。</p>
<strong>1.花式连字符（&）</strong>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">这个类应该在span元素里使用，并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_344753" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.amp {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-family</code><code class="css plain" style="margin: 0px; padding: 0px;">: Baskerville, </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'Goudy Old Style'</code><code class="css plain" style="margin: 0px; padding: 0px;">, Palatino, </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'Book Antiqua'</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">serif</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-style</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">italic</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-weight</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">normal</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://css-tricks.com/snippets/css/fancy-ampersand/">http://css-tricks.com/snippets/css/fancy-ampersand/</a>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>2.段落首字符下沉</strong></p>
<p style="margin-bottom: 1.5em;">通常，这种效果会出现在印刷媒体上，如报纸或书籍。同样，如果网页布局合理，它也可以使用在Web页面上，它仅针对段落使用，但你也可以与单个元素绑定。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_995435" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">p:first-letter{</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">block</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">float</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ff3366</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5.4em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-family</code><code class="css plain" style="margin: 0px; padding: 0px;">: Georgia, Times New Roman, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">serif</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<strong>3.内层CSS3盒阴影</strong>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">盒阴影（box shadow）属性几乎可以运用在任何元素上，它们看起来都非常好看。下面这段代码主要聚焦内层阴影的设计。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_420151" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">#mydiv {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#000</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#000</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#000</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<strong>4.外层CSS3盒阴影</strong>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">下面介绍一段外层阴影代码设计，注意，代码里的第三个参数表示模糊距离（blur distance），而第四个参数表示铺开的（spread）距离。关于这些值的设计，你可以前往 <a style="cursor: pointer; color: #0066cc;" href="http://www.w3schools.com/cssref/css3_pr_box-shadow.asp">W3Schools</a>学习。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_954391" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">#mydiv {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-2px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.52</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-2px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.52</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-2px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.52</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<strong>5.三角形列表符号</strong>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">该符号只能在CSS3里生成，在主流浏览器中，这是一项非常酷的技术。而其唯一的潜在问题是缺乏对后退方法的支持。 </p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_683827" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ul {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.75em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">list-style</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">li:before {</code></div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">""</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#111</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-style</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.35em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.35em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.45em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">block</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-1em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.9em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://jsfiddle.net/chriscoyier/yNZTU/">http://jsfiddle.net/chriscoyier/yNZTU/</a>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>6.居中对齐并设置固定宽度</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_47981" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">#page-wrap {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">800px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">auto</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://css-tricks.com/snippets/css/centering-a-website/">http://css-tricks.com/snippets/css/centering-a-website/</a>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>7.CSS3列文本</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_976406" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">#columns</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-3</code> <code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-align</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">justify</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-column-count: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-column-gap: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">12px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-column-rule: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#c4c8cc</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-column-count: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-column-gap: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">12px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-column-rule: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#c4c8cc</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/">http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/</a>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>8.固定页脚</strong></p>
<p style="margin-bottom: 1.5em;">在网页里添加固定的页脚其实非常简单，并且也很实用。有些网站的页脚设计得很漂亮，可以给网站呈现出一个完美的结尾。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_783511" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 96px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">#footer {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">fixed</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">bottom</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">30px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100%</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#444</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* IE 6 */</code></div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">* html #footer {</code></div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: expression((</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'px'</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://www.flashjunior.ch/school/footers/fixed.cfm">http://www.flashjunior.ch/school/footers/fixed.cfm</a>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>9.IE 6下修复PNG格式的透明度</strong></p>
<p style="margin-bottom: 1.5em;">在网站里使用透明的图像已成为一种很普遍的做法，其始于.gif图片格式，但现在也涉及到.png图片格式。而一些老版本的IE不支持透明度，下面这段代码会很好地解决这一问题。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_314736" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 72px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 72px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.bg {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">200px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">url</code><code class="css plain" style="margin: 0px; padding: 0px;">(/folder/yourimage.png) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">no-repeat</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">_background</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'/folder/yourimage.png'</code><code class="css plain" style="margin: 0px; padding: 0px;">,sizingMethod=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'crop'</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* 1px gif method */</code></div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">img, .png {</code></div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">behavior: expression((this.runtimeStyle.behavior=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"none"</code><code class="css plain" style="margin: 0px; padding: 0px;">)&&(this.pngSet?this.pngSet=true:(this.nodeName == </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"IMG"</code> <code class="css plain" style="margin: 0px; padding: 0px;">&& this.src.toLowerCase().indexOf(</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'.png'</code><code class="css plain" style="margin: 0px; padding: 0px;">)></code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-1</code><code class="css plain" style="margin: 0px; padding: 0px;">?(this.runtimeStyle.backgroundImage = </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"none"</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">this.runtimeStyle.filter = </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"</code> <code class="css plain" style="margin: 0px; padding: 0px;">+ this.src + </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"', sizingMethod='image')"</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">this.src = </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"images/transparent.gif"</code><code class="css plain" style="margin: 0px; padding: 0px;">):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'url("'</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">''</code><code class="css plain" style="margin: 0px; padding: 0px;">).replace(</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'")'</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">''</code><code class="css plain" style="margin: 0px; padding: 0px;">),</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">this.runtimeStyle.filter = </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"</code> <code class="css plain" style="margin: 0px; padding: 0px;">+ this.origBg + </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"', sizingMethod='crop')"</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">this.runtimeStyle.backgroundImage = </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"none"</code><code class="css plain" style="margin: 0px; padding: 0px;">)),this.pngSet=true));</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://css-tricks.com/snippets/css/png-hack-for-ie-6/">http://css-tricks.com/snippets/css/png-hack-for-ie-6/</a>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>10.跨浏览器设置最小高度</strong></p>
<p style="margin-bottom: 1.5em;">有时开发者需要对HTML元素设置最小高度，然而，这个效果却无法兼容IE和老版本的Firefox，下面这段代码可以修复这个问题。 </p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_501314" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">#container {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">min-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">550px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">auto</code> <code class="css color3" style="margin: 0px; padding: 0px; color: red !important;">!important</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">550px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
<p> </p>
<p style="margin-bottom: 1.5em;"><strong>11. CSS3发光输入框</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">下面的这段代码重写了浏览器的默认行为，可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_85868" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">input[type=text], textarea {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-transition: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">all</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.30</code><code class="css plain" style="margin: 0px; padding: 0px;">s ease-in-out;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-transition: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">all</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.30</code><code class="css plain" style="margin: 0px; padding: 0px;">s ease-in-out;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-ms-transition: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">all</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.30</code><code class="css plain" style="margin: 0px; padding: 0px;">s ease-in-out;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-o-transition: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">all</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.30</code><code class="css plain" style="margin: 0px; padding: 0px;">s ease-in-out;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">outline</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ddd</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">input[type=text]:focus, textarea:focus {</code></div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">81</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">203</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">238</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">81</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">203</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">238</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://css-tricks.com/snippets/css/glowing-blue-input-highlights/">http://css-tricks.com/snippets/css/glowing-blue-input-highlights/</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>12.基于文件类型来创建链接样式</strong></p>
<p style="margin-bottom: 1.5em;">下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式，可能会用到各种协议（HTTP、FTP、IRC,mailto），或者是文件本身的类型（mp3、avi、pdf）。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_140405" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* external links */</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">a[href^=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"<a style="cursor: pointer; color: #0066cc !important;" href="http://www.csdn.net/article/2013-05-29/2815470-css-snippets-for-designers/2">http://</a>"</code><code class="css plain" style="margin: 0px; padding: 0px;">] {</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding-right</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">13px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">url</code><code class="css plain" style="margin: 0px; padding: 0px;">(</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'external.gif'</code><code class="css plain" style="margin: 0px; padding: 0px;">) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">no-repeat</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">center</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">right</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* emails */</code></div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">a[href^=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"mailto:"</code><code class="css plain" style="margin: 0px; padding: 0px;">] {</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding-right</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">20px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">url</code><code class="css plain" style="margin: 0px; padding: 0px;">(</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'email.png'</code><code class="css plain" style="margin: 0px; padding: 0px;">) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">no-repeat</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">center</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">right</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* pdfs */</code></div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">a[href$=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">".pdf"</code><code class="css plain" style="margin: 0px; padding: 0px;">] {</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding-right</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">18px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">url</code><code class="css plain" style="margin: 0px; padding: 0px;">(</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'acrobat.png'</code><code class="css plain" style="margin: 0px; padding: 0px;">) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">no-repeat</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">center</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">right</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/">http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>13.pre标签封装代码</strong></p>
<p style="margin-bottom: 1.5em;">pre标签常用来对代码进行布局，可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码，让内容直接显示在页面中。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_482245" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">pre</code> <code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">white-space</code><code class="css plain" style="margin: 0px; padding: 0px;">: pre-wrap; </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* css-3 */</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">white-space</code><code class="css plain" style="margin: 0px; padding: 0px;">: -moz-pre-wrap; </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* Mozilla, since 1999 */</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">white-space</code><code class="css plain" style="margin: 0px; padding: 0px;">: -pre-wrap; </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* Opera 4-6 */</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">white-space</code><code class="css plain" style="margin: 0px; padding: 0px;">: -o-pre-wrap; </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* Opera 7 */</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">word-wrap: break-word; </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* Internet Explorer 5.5+ */</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://css-tricks.com/snippets/css/make-pre-text-wrap/">http://css-tricks.com/snippets/css/make-pre-text-wrap/</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>14.鼠标指向时变成手型</strong></p>
<p style="margin-bottom: 1.5em;">网页中有许多item在点击时，鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_901714" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">a[href], input[type=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'submit'</code><code class="css plain" style="margin: 0px; padding: 0px;">], input[type=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'image'</code><code class="css plain" style="margin: 0px; padding: 0px;">], label[for], select, button, .</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">pointer</code> <code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">cursor</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">pointer</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://css-tricks.com/snippets/css/give-clickable-elements-a-pointer-cursor/">http://css-tricks.com/snippets/css/give-clickable-elements-a-pointer-cursor/</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>15.页面顶部阴影</strong></p>
<p style="margin-bottom: 1.5em;">简单地把下面这段代码拷贝到页面里，它会在body元素之前产生黑色的，渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_201196" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">body:before {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">""</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">fixed</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100%</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,.</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,.</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,.</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">z-index</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://css-tricks.com/snippets/css/top-shadow/">http://css-tricks.com/snippets/css/top-shadow/</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>16.气泡引用效果</strong></p>
<p style="margin-bottom: 1.5em;">这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。 <a style="cursor: pointer; color: #0066cc;" href="http://html5snippets.com/snippets/35-css3-comic-bubble-using-triangle-trick" target="_blank">这里</a>提供了许多关于语音泡泡的代码片段和使用技巧，欢迎去围观。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_334836" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">24</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">25</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">26</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">27</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">28</div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">29</div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">30</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">31</div>
<div class="line number32 index31 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">32</div>
<div class="line number33 index32 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">33</div>
<div class="line number34 index33 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">34</div>
<div class="line number35 index34 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">35</div>
<div class="line number36 index35 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">36</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.chat-bubble {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ededed</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#666</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">35px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.3em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">auto</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-align</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">center</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">300px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-border-radius: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">20px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-border-radius: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">20px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#888</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#888</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-family</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'Bangers'</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">arial</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">serif</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.chat-bubble-arrow-border {</code></div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#666</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-style</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">20px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">bottom</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-42px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">30px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.chat-bubble-arrow {</code></div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ededed</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-style</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">20px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number32 index31 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number33 index32 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number34 index33 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">bottom</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-39px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number35 index34 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">30px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number36 index35 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://html5snippets.com/snippets/35-css3-comic-bubble-using-triangle-trick">http://html5snippets.com/snippets/35-css3-comic-bubble-using-triangle-trick</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em; display: inline !important;"><strong>17.指定标题样式</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">该模板提供了所有头元素的主要样式，从H1到H5。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_480292" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">,h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">,h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">,h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">,h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#005a9c</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2.6em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2.45em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2.1em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.9em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.8em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.65em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.65em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.4em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">h</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">{</code>
</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.4em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.25em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="https://snipt.net/freshmaker99/headers/">https://snipt.net/freshmaker99/headers/</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em; display: inline !important;"><strong>18.利用CSS生成纹理图案背景</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">通过CSS来为背景图片添加噪点，从而形成漂亮的纹理图案。你可以使用 <a style="cursor: pointer; color: #0066cc;" href="http://www.noisetexturegenerator.com/">NoiseTextureGenerator</a>生成器自定义噪点的纹理图案。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_266514" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 624px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">body {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-image</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">url</code><code class="css plain" style="margin: 0px; padding: 0px;">(data:image/png;base</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">64</code><code class="css plain" style="margin: 0px; padding: 0px;">,iVBORw</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">XiDAAAAUVBMVEWFhYWDg</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">N</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">d</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">dtbW</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">17</code><code class="css plain" style="margin: 0px; padding: 0px;">e</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">t</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">dXWBgYGHh</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">d</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">eXlzc</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">OLi</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">ubm</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">uVlZWPj</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">+NjY</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">19</code><code class="css plain" style="margin: 0px; padding: 0px;">fX</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">JiYl/f</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">39</code><code class="css plain" style="margin: 0px; padding: 0px;">ra</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">uRkZGZmZlpaWmXl</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">dvb</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">29</code><code class="css plain" style="margin: 0px; padding: 0px;">xcXGTk</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">NnZ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">c</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">TV</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">mAAAAG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">XpWWB</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">67</code><code class="css plain" style="margin: 0px; padding: 0px;">c</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">BUFb</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">g</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">557</code><code class="css plain" style="margin: 0px; padding: 0px;">T/hRo</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">/WUMZHlgr</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">Bg</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">Z</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">qQgQJlHI</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">A</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">SzFVrapvmTF</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">O</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">dmYRFZ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">60</code><code class="css plain" style="margin: 0px; padding: 0px;">YiBhJRCgh</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">FYhiLAmdvX</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">CzTOpNE</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">77</code><code class="css plain" style="margin: 0px; padding: 0px;">ME</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">Zty/nWWzchDtiqrmQDeuv</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">powQ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">ta</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">eN</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">FY</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">InkqDD</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">73</code><code class="css plain" style="margin: 0px; padding: 0px;">lT</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">c</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">lEzwUNqgFHs</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">VQce</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">TVClFCQrSTfOiYkVJQBmpbq</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">L</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">iZavPnAPcoU</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">dSw</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">QiYAxi+IlPdqo+hYHnUt</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">ZPfnsHJyNiDtnpJyayNBkF</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">cWoYGAMY</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">92</code><code class="css plain" style="margin: 0px; padding: 0px;">U</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">hXHF/C</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">M</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">uP/ZtYdiuj</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">26</code><code class="css plain" style="margin: 0px; padding: 0px;">UdAdQQSXQErwSOMzt/XWRWAz</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">GuSBIkwG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">H</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">FabJ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">OsUOUhGC</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">tK</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">EMtJO</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">ttC</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">IBD</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">kM</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">ve</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">tJwMdSfjZo+EEISaeTr</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">P</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">wYrGjXqyC</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">krcKdhMpxEnt</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">JetoulscpyzhXN</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">FRpuPHvbeQaKxFAEB</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">EN+cYN</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">xD</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">RYGpXpNndMmZgM</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">Dcs</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">YSNFDHUo</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">LGfZuukSWyUYirJAdYbF</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">MfqEKmjM+I</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">EfhA</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">94</code><code class="css plain" style="margin: 0px; padding: 0px;">iG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">L</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">uKrR+GdWD</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">73</code><code class="css plain" style="margin: 0px; padding: 0px;">ydlIB+</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">hgref</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">QTlmgmbM</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">/LeX</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">GI</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">Ux</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">RWpgxpLuZ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">+I+IjzZ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">wqE</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">nilvQdkUdfhzI</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">QDWy+kw</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">Wgg</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">pGpeEVeCCA</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">b</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">85</code><code class="css plain" style="margin: 0px; padding: 0px;">BO</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">F</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">DzxB</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">cdqvBzWcmzbyMiqhzuYqtHRVG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">y</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">x+KOlnyqla</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">AoWWpuBoYRxzXrfKuILl</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">SfiWCbjxoZJUaCBj</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">CjH</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">GIaDbc</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">kqBY</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">W/Rgjda</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">iqQcOJu</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">WW+</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">76</code><code class="css plain" style="margin: 0px; padding: 0px;">pZC</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">QG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">M</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">00</code><code class="css plain" style="margin: 0px; padding: 0px;">dffe</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">hNnseupFL</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">53</code><code class="css plain" style="margin: 0px; padding: 0px;">r</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">F</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">YHSwJWUKP</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">q+k</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">RdsxyOB</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">11</code><code class="css plain" style="margin: 0px; padding: 0px;">n</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">xtOvnW</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">irMMFNV</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">H</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">uqwS</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">ExsmP</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">AxbDTc</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">JwgneAT</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">vTiUSm</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">E</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">BSflSt</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">bfa</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">tv</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">Di</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">R</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">n</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">Af</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">MNWzs</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">49</code><code class="css plain" style="margin: 0px; padding: 0px;">hmauE</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">wP+ttrq+AsWpFG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">awvsuOqbipWHgtuvuaAE+A</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">Z/</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">gC</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">hesnr+</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">wqCwG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">c</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">yAg</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">AL</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">fm</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">T</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">AZtp/bbJGwl</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">pNrE</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">RuOX</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">PeMRUERVaPpEs+yqeoSmuOlokqw</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">49</code><code class="css plain" style="margin: 0px; padding: 0px;">pgomjLeh</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">icHNlG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">19</code><code class="css plain" style="margin: 0px; padding: 0px;">yjs</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">XXOMedYm</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">xH</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">YxpV</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">tc</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">Ro</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">jJfxC</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">50</code><code class="css plain" style="margin: 0px; padding: 0px;">ApuxGob</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">lMsxfTbeUv</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">07</code><code class="css plain" style="margin: 0px; padding: 0px;">TyYxpeLucEH</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">gNd</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">IKH</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">LAg</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">TdVhlCafZvpskfncCfx</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">pOhJzd</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">76</code><code class="css plain" style="margin: 0px; padding: 0px;">bJWeYFnFciwcYfubRc</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">12</code><code class="css plain" style="margin: 0px; padding: 0px;">Ip/ppIhA</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">/mSZ/RxjFDrJC</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">xifFjJpY</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">Xl</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">zXdguFqYyTR</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">zSp</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">Y</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">p+tktDYYSNflcxI</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">iyO</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">TPBdlRcpeqjK/piF</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">bklq</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">77</code><code class="css plain" style="margin: 0px; padding: 0px;">VSEaA+z</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">qmJTFzIWiitbnzR</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">794</code><code class="css plain" style="margin: 0px; padding: 0px;">USKBUaT</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">NTEsVjZqLaFVqJoPN</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">ODG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">70</code><code class="css plain" style="margin: 0px; padding: 0px;">IPbfBHKK+/q/AWR</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">tJzYHRULOa</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">MP+W/HfGadZUbfw</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">177</code><code class="css plain" style="margin: 0px; padding: 0px;">G</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">j/OGbIs</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">TahLyynl</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">X</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">RinF</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">793</code><code class="css plain" style="margin: 0px; padding: 0px;">Oz+BU</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">saXtUHrVBFT/DnA</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">ctNPoGbs</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">hRIjTok</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">i+algT</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">lTHi</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">SxFvONKNrgQFAq</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">/gFnWMXgwffgYMJpiKYkmW</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">tTg</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">ZQ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">Jq+f</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">XN+A</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">eeUKHWvJWJ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">sgJ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">Sop+wwhqFVijqWaJhwtD</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">MNlSBeWNNWTa</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">Z</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">kPZw</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">+LbVT</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">99</code><code class="css plain" style="margin: 0px; padding: 0px;">wqTdx</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">29</code><code class="css plain" style="margin: 0px; padding: 0px;">lMUH</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">OIG/D</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">86</code><code class="css plain" style="margin: 0px; padding: 0px;">ruKEauBjvH</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">xy</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">um/Sfj</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">ei</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">UUVk</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">AIl</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">MyD</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">MSSTOFgSwsH/QJWaQ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">as</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">7</code><code class="css plain" style="margin: 0px; padding: 0px;">ZcmgBZkzjjU</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">UrQ</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">74</code><code class="css plain" style="margin: 0px; padding: 0px;">ci</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">gWBCSGHtuV</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">H</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2</code><code class="css plain" style="margin: 0px; padding: 0px;">mhSnO</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">Wp/</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">fEV</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">a+</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">wz//</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">qy</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8</code><code class="css plain" style="margin: 0px; padding: 0px;">JxjZsmxxy</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">+</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">w</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">9</code><code class="css plain" style="margin: 0px; padding: 0px;">CDNJY</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">09</code><code class="css plain" style="margin: 0px; padding: 0px;">T</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">072</code><code class="css plain" style="margin: 0px; padding: 0px;">iKG</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">EnOS</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">arEYgXqYnXcYHwjTtUNAcMelOd</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">xpkoqiTYICWFq</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">JSiPfPDQdnt+</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4</code><code class="css plain" style="margin: 0px; padding: 0px;">/wuqcXY</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">47</code><code class="css plain" style="margin: 0px; padding: 0px;">QILbgAAAABJRU</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5</code><code class="css plain" style="margin: 0px; padding: 0px;">ErkJggg==);</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#0094d0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p><strong>19.List Ordering</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">你可能会遇到这种列表情况，需要把这个列表拆分成两个UL元素，你不妨看看下面这段代码。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_775776" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">24</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ol.chapters {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">list-style</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin-left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"> </div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ol.chapters > li:before {</code></div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">counter</code><code class="css plain" style="margin: 0px; padding: 0px;">(chapter) </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">". "</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">counter-increment</code><code class="css plain" style="margin: 0px; padding: 0px;">: chapter;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-weight</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">bold</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">float</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">40px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"> </div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ol.chapters li {</code></div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">clear</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"> </div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ol.start {</code></div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">counter-reset</code><code class="css plain" style="margin: 0px; padding: 0px;">: chapter;</code>
</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"> </div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ol.continue {</code></div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">counter-reset</code><code class="css plain" style="margin: 0px; padding: 0px;">: chapter </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">11</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://timmychristensen.com/css-ordered-list-numbering-examples.html">http://timmychristensen.com/css-ordered-list-numbering-examples.html</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>20.</strong><strong>为文本添加悬停提示框</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">把这段代码拷贝到样式表中，使用新的HTML5数据属性，通过使用data-tooltip你就可以给文本添加悬停提示框了。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_31931" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">24</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">25</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">26</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">27</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">28</div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">29</div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">30</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">31</div>
<div class="line number32 index31 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">32</div>
<div class="line number33 index32 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">33</div>
<div class="line number34 index33 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">34</div>
<div class="line number35 index34 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">35</div>
<div class="line number36 index35 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">36</div>
<div class="line number37 index36 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">37</div>
<div class="line number38 index37 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">38</div>
<div class="line number39 index38 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">39</div>
<div class="line number40 index39 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">40</div>
<div class="line number41 index40 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">41</div>
<div class="line number42 index41 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">42</div>
<div class="line number43 index42 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">43</div>
<div class="line number44 index43 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">44</div>
<div class="line number45 index44 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">45</div>
<div class="line number46 index45 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">46</div>
<div class="line number47 index46 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">47</div>
<div class="line number48 index47 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">48</div>
<div class="line number49 index48 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">49</div>
<div class="line number50 index49 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">50</div>
<div class="line number51 index50 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">51</div>
<div class="line number52 index51 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">52</div>
<div class="line number53 index52 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">53</div>
<div class="line number54 index53 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">54</div>
<div class="line number55 index54 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">55</div>
<div class="line number56 index55 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">56</div>
<div class="line number57 index56 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">57</div>
<div class="line number58 index57 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">58</div>
<div class="line number59 index58 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">59</div>
<div class="line number60 index59 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">60</div>
<div class="line number61 index60 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">61</div>
<div class="line number62 index61 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">62</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-bottom</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#bbb</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#666</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">:inline-</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">block</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-decoration</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:hover,</code></div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:focus {</code></div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#36c</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:active {</code></div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code> </div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* Tooltip styling */</code></div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a[data-tooltip]:after {</code></div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#222</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css plain" style="margin: 0px; padding: 0px;">hsla(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0%</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0%</code><code class="css plain" style="margin: 0px; padding: 0px;">,.</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">85</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-right</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">""</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">25%</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a[data-tooltip]:before {</code></div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#222</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: hsla(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0%</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0%</code><code class="css plain" style="margin: 0px; padding: 0px;">,.</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">85</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number32 index31 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#f6f6f6</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number33 index32 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">attr</code><code class="css plain" style="margin: 0px; padding: 0px;">(data-tooltip);</code>
</div>
<div class="line number34 index33 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number35 index34 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-family</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">sans-serif</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number36 index35 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">14px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number37 index36 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">32px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number38 index37 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number39 index38 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">32px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number40 index39 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number41 index40 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number42 index41 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-shadow</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css plain" style="margin: 0px; padding: 0px;">hsla(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0%</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0%</code><code class="css plain" style="margin: 0px; padding: 0px;">,</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number43 index42 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">white-space</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">nowrap</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number44 index43 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-border-radius: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number45 index44 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-border-radius: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number46 index45 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-o-border-radius: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number47 index46 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">border-radius: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number48 index47 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number49 index48 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a[data-tooltip]:hover:after {</code></div>
<div class="line number50 index49 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">block</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number51 index50 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-9px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number52 index51 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number53 index52 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a[data-tooltip]:hover:before {</code></div>
<div class="line number54 index53 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">block</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number55 index54 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-41px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number56 index55 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number57 index56 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a[data-tooltip]:active:after {</code></div>
<div class="line number58 index57 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number59 index58 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number60 index59 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a[data-tooltip]:active:before {</code></div>
<div class="line number61 index60 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-42px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number62 index61 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://www.impressivewebs.com/pure-css-tool-tips/">http://www.impressivewebs.com/pure-css-tool-tips/</a></p>
<p> </p>
<p style="margin-bottom: 1.5em;"><strong>21.创建暗灰色的按钮样式</strong></p>
<p style="margin-bottom: 1.5em;">下面这段代码创建了CSS3按钮类，并根据按钮颜色命名为.graybtn。当然你也可以根据自己的网站风格对颜色进行更改。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_796551" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">24</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">25</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">26</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">27</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">28</div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">29</div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">30</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">31</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.graybtn {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">:-webkit-gradient( linear, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">bottom</code><code class="css plain" style="margin: 0px; padding: 0px;">, color-stop(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.05</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code><code class="css plain" style="margin: 0px; padding: 0px;">), color-stop(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#d1d1d1</code><code class="css plain" style="margin: 0px; padding: 0px;">) );</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">:-moz-linear-gradient( </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">center</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#d1d1d1</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100%</code> <code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'#ffffff'</code><code class="css plain" style="margin: 0px; padding: 0px;">, endColorstr=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'#d1d1d1'</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-color</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-border-radius:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-border-radius:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">border-radius:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#dcdcdc</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">:inline-</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">block</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#777777</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-family</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">arial</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-size</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-weight</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">bold</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">24px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-decoration</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-shadow</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.graybtn:hover {</code></div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">:-webkit-gradient( linear, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">bottom</code><code class="css plain" style="margin: 0px; padding: 0px;">, color-stop(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.05</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#d1d1d1</code><code class="css plain" style="margin: 0px; padding: 0px;">), color-stop(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code><code class="css plain" style="margin: 0px; padding: 0px;">) );</code>
</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">:-moz-linear-gradient( </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">center</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#d1d1d1</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffffff</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100%</code> <code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'#d1d1d1'</code><code class="css plain" style="margin: 0px; padding: 0px;">, endColorstr=</code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'#ffffff'</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-color</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#d1d1d1</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.graybtn:active {</code></div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">:</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://html5snippets.com/snippets/1-a-css-rounded-gray-button">http://html5snippets.com/snippets/1-a-css-rounded-gray-button</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>22.打印的页面上显示URL</strong></p>
<p style="margin-bottom: 1.5em;">这条规则会使打印出来的页面在超链接文字后面加上URL，URL会被放在一组括号里面,前后各留一个空格。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_964868" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css plain" style="margin: 0px; padding: 0px;">@media </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">print</code> <code class="css plain" style="margin: 0px; padding: 0px;">{ </code>
</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">a:after { </code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">" ["</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">attr</code><code class="css plain" style="margin: 0px; padding: 0px;">(href) </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"] "</code><code class="css plain" style="margin: 0px; padding: 0px;">; </code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">} </code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址：<a style="cursor: pointer; color: #0066cc;" href="http://www.smipple.net/snippet/bramloquet/Print%20the%20url%20after%20your%20links">http://www.smipple.net/snippet/bramloquet/Print%20the%20url%20after%20your%20links</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"> </p>
<h4 style="margin-top: 0.75em; margin-bottom: 0.75em; color: #333333; font-size: 14px; line-height: 24px;">23.屏蔽Webkit移动浏览器中元素高亮效果</h4>
<p style="margin-bottom: 1.5em;">在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，而下面这段代码即可屏蔽这种样式。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_574016" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">body {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-touch-callout: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-user-select: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-khtml-user-select: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-user-select: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-ms-user-select: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">user-select: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p><strong>24.利用CSS生成小圆点图案</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">通过下面的代码，可以让你的网站背景上产生一些小圆点装饰图案。默认情况下，它是使用在body元素上，但你也可以把它使用在网页里的其他容器上。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_7087" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">body {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: radial-gradient(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">circle</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">white</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10%</code><code class="css plain" style="margin: 0px; padding: 0px;">),</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">radial-gradient(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">circle</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">white</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">black</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10%</code><code class="css plain" style="margin: 0px; padding: 0px;">) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">50px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">50px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">background-</code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://dabblet.com/gist/1457668">http://dabblet.com/gist/1457668</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em; display: inline !important;"><strong>25.CSS3棋盘格效果</strong></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">和上面的小圆点设计一样，这个效果需要一些额外的语法才可以工作，它需要在支持CSS3的浏览器上运行，效果很艳丽。当然，你可以根据需要自定义颜色。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_906967" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">body {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">white</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-image</code><code class="css plain" style="margin: 0px; padding: 0px;">: linear-gradient(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">45</code><code class="css plain" style="margin: 0px; padding: 0px;">deg, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">black</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">25%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">25%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">75%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">black</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">75%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">black</code><code class="css plain" style="margin: 0px; padding: 0px;">),</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">linear-gradient(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">45</code><code class="css plain" style="margin: 0px; padding: 0px;">deg, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">black</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">25%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">25%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">75%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">black</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">75%</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">black</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">background-</code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">size</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">50px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">50px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p style="margin-bottom: 1.5em; display: inline !important;">26.Github Fork红丝带</p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;">下面这段代码是利用CSS3的transform属性生成Fork me on Github红丝带效果。</p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_53879" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">24</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">25</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">26</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.ribbon {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#a00</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">overflow</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">hidden</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* top left corner */</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-3em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">2.5em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* 45 deg ccw rotation */</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-transform: rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-45</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-transform: rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-45</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* shadow */</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#888</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#888</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.ribbon a {</code></div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#faa</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#fff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">display</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">block</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">bold</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">81.25%</code> <code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">'Helvetiva Neue'</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">Helvetica</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">Arial</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">sans-serif</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.05em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.075em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.5em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3.5em</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-align</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">center</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-decoration</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* shadow */</code>
</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-shadow</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.5em</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#444</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/">http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>27.字体压缩</strong></p>
<p style="margin-bottom: 1.5em;">在样式表里使用如下代码能够帮你节省许多网页空间。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_455518" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">p {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">italic</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">small-caps</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">bold</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.2em</code><code class="css plain" style="margin: 0px; padding: 0px;">/</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1.0em</code> <code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">Arial</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">Tahoma</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css color1" style="margin: 0px; padding: 0px; color: gray !important;">Helvetica</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://www.csspop.com/view/542">http://www.csspop.com/view/542</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>28.纸页面卷曲效果</strong></p>
<p style="margin-bottom: 1.5em;">这种效果可以被广泛的使用在多种容器中，查看 <a style="cursor: pointer; color: #0066cc;" href="http://www.csspop.com/view/524">demo page</a>页面来更好地掌握该函数的使用吧。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_935875" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">24</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">25</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">26</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">27</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">28</div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">29</div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">30</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">31</div>
<div class="line number32 index31 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 48px !important;">32</div>
<div class="line number33 index32 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">33</div>
<div class="line number34 index33 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">34</div>
<div class="line number35 index34 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">35</div>
<div class="line number36 index35 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">36</div>
<div class="line number37 index36 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">37</div>
<div class="line number38 index37 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">38</div>
<div class="line number39 index38 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">39</div>
<div class="line number40 index39 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">40</div>
<div class="line number41 index40 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">41</div>
<div class="line number42 index41 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">42</div>
<div class="line number43 index42 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">43</div>
<div class="line number44 index43 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">44</div>
<div class="line number45 index44 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">45</div>
<div class="line number46 index45 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">46</div>
<div class="line number47 index46 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">47</div>
<div class="line number48 index47 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">48</div>
<div class="line number49 index48 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">49</div>
<div class="line number50 index49 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">50</div>
<div class="line number51 index50 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">51</div>
<div class="line number52 index51 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">52</div>
<div class="line number53 index52 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">53</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ul.box {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">z-index</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* prevent shadows falling behind containers with backgrounds */</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">overflow</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">hidden</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">list-style</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"> </div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ul.box li {</code></div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">float</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">250px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">150px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#efefef</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">30px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">30px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">background</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#fff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.27</code><code class="css plain" style="margin: 0px; padding: 0px;">), </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">40px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.06</code><code class="css plain" style="margin: 0px; padding: 0px;">) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.27</code><code class="css plain" style="margin: 0px; padding: 0px;">), </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">40px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.06</code><code class="css plain" style="margin: 0px; padding: 0px;">) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.27</code><code class="css plain" style="margin: 0px; padding: 0px;">), </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">40px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.06</code><code class="css plain" style="margin: 0px; padding: 0px;">) </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">inset</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"> </div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ul.box li:before,</code></div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ul.box li:after {</code></div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">''</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">z-index</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-1</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number29 index28 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number30 index29 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">bottom</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number31 index30 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">70%</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number32 index31 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">max-width</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">300px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code><code class="css comments" style="margin: 0px; padding: 0px; display: block; color: #008200 !important;">/* avoid rotation causing ugly appearance at large container widths */</code>
</div>
<div class="line number33 index32 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">max-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">100px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number34 index33 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">55%</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number35 index34 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">16px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.3</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number36 index35 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">16px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.3</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number37 index36 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">8px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">16px</code> <code class="css plain" style="margin: 0px; padding: 0px;">rgba(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">, </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0.3</code><code class="css plain" style="margin: 0px; padding: 0px;">);</code>
</div>
<div class="line number38 index37 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number39 index38 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number40 index39 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-ms-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number41 index40 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-o-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number42 index41 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number43 index42 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number44 index43 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"> </div>
<div class="line number45 index44 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">ul.box li:after {</code></div>
<div class="line number46 index45 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">auto</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number47 index46 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">right</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number48 index47 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number49 index48 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-moz-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number50 index49 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-ms-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number51 index50 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-o-transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number52 index51 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">transform: skew(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15</code><code class="css plain" style="margin: 0px; padding: 0px;">deg) rotate(</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">6</code><code class="css plain" style="margin: 0px; padding: 0px;">deg);</code>
</div>
<div class="line number53 index52 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://www.csspop.com/view/524">http://www.csspop.com/view/524</a></p>
<p style="margin-bottom: 1.5em;"> </p>
<p style="margin-bottom: 1.5em;"><strong>29.发光的锚链接</strong></p>
<p style="margin-bottom: 1.5em;">下面这段代码可以创建自定义的锚链接，鼠标悬浮在上面会发光。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_643920" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">24</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#00e</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:visited {</code></div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#551a8b</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:hover {</code></div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#06e</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:focus {</code></div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">outline</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">thin</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">dotted</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:hover, a:active {</code></div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">outline</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a, a:visited, a:active {</code></div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-decoration</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">none</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#fff</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">-webkit-transition: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">all</code> <code class="css plain" style="margin: 0px; padding: 0px;">.</code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">3</code><code class="css plain" style="margin: 0px; padding: 0px;">s ease-in-out;</code>
</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">a:hover, .glow {</code></div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ff0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">text-shadow</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ff0</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p style="margin-bottom: 1.5em;"><strong>30.创建CSS3 Banner</strong></p>
<p style="margin-bottom: 1.5em;">在支持CSS3的浏览器中，下面的代码可以生成漂亮的纯CSS图案。这种效果常见于电子商务网站的产品图片、缩略图、视频预览等。</p>
<p style="margin-bottom: 1.5em;"> </p>
<div style="margin: 0px; padding: 0px;">
<div id="highlighter_81921" class="syntaxhighlighter css" style="margin: 0px 0px 20px; padding: 0px;">
<table style="border-collapse: collapse; border: none; width: 618px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>
<td class="gutter" style="margin: 0px; border: none; white-space: nowrap; width: 30px; padding: 0px !important; color: #333333 !important; background-color: #eeeeee !important; text-align: center !important;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">1</div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">2</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">3</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">4</div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">5</div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">6</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">7</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">8</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">9</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">10</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">11</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">12</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">13</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">14</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">15</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">16</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">17</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">18</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">19</div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">20</div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">21</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">22</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">23</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">24</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">25</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">26</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">27</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 8px !important; border-right-width: 3px !important; border-right-style: solid !important; border-right-color: #146b00 !important; height: 24px !important;">28</div>
</td>
<td class="code" style="margin: 0px; border: none; padding: 0px !important;">
<div class="container" style="margin: 0px; padding: 0px;">
<div class="line number1 index0 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.featureBanner {</code></div>
<div class="line number2 index1 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">relative</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number3 index2 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">margin</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">20px</code>
</div>
<div class="line number4 index3 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number5 index4 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.featureBanner:before {</code></div>
<div class="line number6 index5 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">"Featured"</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number7 index6 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number8 index7 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number9 index8 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-8px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number10 index9 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">padding-right</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">10px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number11 index10 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#232323</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number12 index11 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">font-weight</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">bold</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number13 index12 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number14 index13 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">15px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#ffa200</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number15 index14 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-right-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number16 index15 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">line-height</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">0px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number17 index16 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css plain" style="margin: 0px; padding: 0px;">box-shadow: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-0px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-5px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#000</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number18 index17 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">z-index</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">1</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number19 index18 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
<div class="line number20 index19 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">.featureBanner:after {</code></div>
<div class="line number21 index20 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">content</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css string" style="margin: 0px; padding: 0px; color: #0066cc !important;">""</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number22 index21 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">position</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">absolute</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number23 index22 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">top</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">35px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number24 index23 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">left</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">-8px</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number25 index24 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">4px</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">solid</code> <code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">#89540c</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number26 index25 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-left-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number27 index26 alt2" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important;">
<code class="css spaces" style="margin: 0px; padding: 0px;"> </code><code class="css keyword" style="margin: 0px; padding: 0px; color: #006699 !important; font-weight: bold !important;">border-bottom-color</code><code class="css plain" style="margin: 0px; padding: 0px;">: </code><code class="css value" style="margin: 0px; padding: 0px; color: #009900 !important;">transparent</code><code class="css plain" style="margin: 0px; padding: 0px;">;</code>
</div>
<div class="line number28 index27 alt1" style="margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px !important; background-color: #f8f8f8 !important;"><code class="css plain" style="margin: 0px; padding: 0px;">}</code></div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<p>源码地址： <a style="cursor: pointer; color: #0066cc;" href="http://www.csspop.com/view/553">http://www.csspop.com/view/553</a></p>
</div>
</div>
</div>
</div>
相关推荐
10段超有用的Git命令行代码 #3 MySQL 相关： MySQL基础命令 Rust 相关： Rust 学习笔记及示例代码: Learning Rust 。 Bash 相关： 本人翻译的 Bash 中文指南 ，不错的 linux bash 命令入门材料。 Vue 相关： Vu
本文提出了一种超宽带蝶形天线，该天线通过利用微带巴伦和带有背衬空腔的负载在超高频（UHF）下工作。 通过将两个折叠的元件连接到Boetie偶极子的贴片，可以实现天线的紧凑尺寸。 所提出的天线具有从到的工作带宽...
6. **跨年段超课时工作**：面对教学任务的挑战，教师应具备敬业精神，无论任务多重都能勇担责任，全身心投入教育教学工作。 7. **青年教师培养**：资深教师有责任帮助年轻教师成长，通过提供教学指导和反馈，促进...
- **无私奉献**：愿意承担额外的教学任务，如跨年段超课时的工作，体现了教师的责任感和奉献精神。 #### 三、政治思想与师德建设 - **坚定正确的政治方向**：作为一名党员教师，应当坚定理想信念，全面贯彻党的...
将头发股分成N段，使用拉格朗日力学定律动画绘制每段超螺旋杆，最后将各段连接起来，构成整个头发股。基于其他可行的模型与动态超螺旋线模型的比较，实验结果显示模型能够有效地处理大范围具有高逼真度的卷发。
在压缩包内的“ds18b20 2013.8.6 完整版”可能包含了DS18B20的驱动程序代码、ATMEGA88的配置示例、中断服务例程以及相关的硬件连接图等资源。这些资料可以帮助开发者了解如何配置ATMEGA88的外部中断和串口通信，以及...
兴业证券 王涵,王轶君,段超,贾潇君,王连庆, 卢燕津,卓泓 2021 宏观经济 1 广发证券 郭磊,吴棋滢,贺骁束,钟林楠 2021 策略研究 5 广发证券 戴康,郑恺,曹柳龙,俞一奇,韦冀星,倪赓 2021 策略
水热合成HZSM-5/SAPO-34复合分子筛及其催化乙醇制丙烯，段超，张昕，采用水热法合成了HZSM-5/SAPO-34复合分子筛，并借助氮等温吸附脱附、X-射线衍射、氨程序升温脱附和催化剂性能评价技术比较研究了HSZM-5/S
HZSM-5/SAPO-34复合分子筛催化剂上乙醇制丙烯：SAPO-34含量的影响，段超，张昕，借助氮等温吸附脱附、X-射线衍射、氨程序升温脱附和催化剂性能评价考察了HZSM-5/SAPO-34复合分子筛中SAPO-34的含量对催化剂结构、酸性...
**正文** 本文将深入探讨基于MSP430F149单片机的多路温度采集系统，该系统利用DS18B20数字温度传感器进行数据获取，并涉及到了定时器、串行通信（UART）以及低功耗设计等关键技术。在深入讲解之前，先了解MSP430F...
- 特级教师不仅承担教学任务，还可能涉及学校其他管理工作，如跨年段超课时工作、值周工作、实验室管理等，展现教师的全面能力。 5. **教育技术的应用** - 在信息时代，教师需要掌握现代教育技术，如使用计算机和...
3. **跨年段超课时工作**：教师愿意接受额外的工作挑战，例如跨年级教学，体现出敬业精神和对教育工作的献身精神。 4. **信息技术与学科整合**：在教育领域，将信息技术融入课堂教学，如通过网络环境进行化学教学...
英飞凌宣布已成功完成一款具备双频段超宽带(Ultra-Wideband)射频（RF）收发器芯片的定型工作。这项突破是以该公司成熟的低功耗CMOS工艺为基础，为各类移动终端如手机、个人数字助理（PDA）、可携式摄像机、数码相机...
3. **跨年段超课时工作**：教师需要具备高度的责任感和敬业精神，面对超出常规的工作量，能积极承担并完成。这体现了教师对教育事业的献身精神和对学生的无私付出。 4. **信息技术与学科整合**：在信息化时代，教师...
3. **跨年段超课时工作**： - 教师面对学校的工作需求，愿意承担超出常规的工作量，体现其对教育事业的热爱和责任感。 4. **信息技术与学科整合**： - 教师关注信息技术在教育中的应用，通过理论和实践探索，将...
5. **教育教学责任**：教师愿意接受额外的教学任务，如跨年段超课时工作，体现了敬业精神和对教育事业的献身精神。 6. **自我评价与反思**：述职报告也是教师自我评价和反思的过程，通过总结工作中的成功与不足，以...
- 跨年段超课时工作，体现教师的敬业精神和责任感。 - 在课程整合上进行理论与实践的探索，如信息技术与学科的融合。 - 主讲的课题《网络环境下的中学化学教学改革》受到广泛认可。 4. **关爱学生，教书育人**：...
3. **跨年段超课时工作** - 面对师资短缺，特级教师能承担起跨年级、超负荷的教学任务，展示出敬业精神和奉献精神。 4. **信息技术与学科整合** - 特级教师应熟悉并运用信息技术，将其融入课堂教学，以适应培养未来...
3. **超额工作与团队合作**：教师可能面临繁重的教学任务，如跨年段超课时工作，但他们会积极面对，以实际行动展现对教育工作的热爱和对同事的尊重与支持。 4. **信息技术与学科整合**：在信息化时代，教师需要掌握...