Table of Contents
1. Outline the concept
2. Basic text typesetting (global settings)
3. Abbreviations abbr and .initialism
4. address address
5. Quote blockquote" >5. Quote blockquote
6. List
(1)ul-li unordered list
(2) ordered list ol-li
(3) dl-dt-dd definition list
7. 代码
(1)code
(2)kbd
(3)多行代码块pre
8.其它H5标记补充
(2) del mark and s mark
(3) ins tag and u tag
(4) Alignment related
(5) Case related:
【Example 3.1】Text formatting practice
3. Table related css
1.table basic style
(1) Add class="table" to the table tag, the effect becomes:
(3) Add border
(4)Hover Highlight
(5) Compact Tables
Home Web Front-end HTML Tutorial 'In-depth Understanding of Bootstrap' Reading Notes: Chapter 3 CSS Layout

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

Oct 11, 2016 pm 02:03 PM

<h2 id="Outline-the-concept">1. Outline the concept</h2> <div>bootstrap is developed based on H5. It advocates mobile first (media inquiry statement is required), and does not support a wide range of browsers. </div> <div>Responsive images: max-width:100% height:auto;</div> <div>You can add: .img-responsive class</div> <div>The basic style of typography is: </div> <div>The margin of the body is 0, the background color is white, and the line spacing is 20/14 times</div> <div>Use the Normalize.css library to minimize differences between browsers</div> <div>Centered container container has a maximum range. (The maximum left and right margins are auto, related to the device) </div> <div> </div> <h2 id="Basic-text-typesetting-global-settings">2. Basic text typesetting (global settings)</h2> <div> <h2>1.<span style="line-height: 1.6;">Title (h mark and small mark)</span> </h2> <div> <div id="highlighter_795477" class="syntaxhighlighter html" style="width: 1276.8px;"> <div id="highlighter_361744" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" style="width: 1275px;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> </td> <td class="code" style="width: 1173px;"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h1</code><code class="html plain">>header1<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h1</code><code class="html plain">> </code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h2</code><code class="html plain">>header2<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h2</code><code class="html plain">> </code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h3</code><code class="html plain">>header3<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">> </code></div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h4</code><code class="html plain">>header4<</code><code class="html keyword">small</code><code class="html plain">>subtitle of small tag</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h4</code><code class="html plain">> </code></div> <div class="line number5 index4 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h5</code><code class="html plain">>header5<</code><code class="html keyword">small</code><code class="html plain">>subtitle of small tag</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h5</code><code class="html plain">> </code></div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h6</code><code class="html plain">>header6<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h6</code><code class="html plain">> </code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142739102-1895601554.png" class="lazy" alt="" border="0"><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740055-2109177660.jpg" class="lazy" alt="" border="0"> </div> </div> <div> <p>The font color of the <small> content in all title elements is gray<span style="line-height: 1.6;"> (#999999), and the line spacing is 1. </span></p> The text font in <p><small> is 65% of the font size corresponding to the current element in h1, h2, and h3; while in h4, h5, and h6, it is 75%. <span style="line-height: 1.6;"></span> </p> </div> <p> </p> <p>A. The font size is 14px and the spacing is 20px. The margin-bottom of the p element is half the line spacing (10px). <span style="line-height: 1.6;"></span> </p> <p>B. Highlight<span style="line-height: 1.6;"></span> </p> <p><span style="line-height: 1.6;">When you have a piece of text that you want to highlight but don’t want to get the same weight as the h mark, you can class="lead"<span></span><br></span> </p> <p> </p> <div id="highlighter_393077" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1<div class="line number1 index0 alt2" style="height: 16px;"> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><<code class="html plain"></code>span<code class="html keyword"> </code>class<code class="html color1"></code>=<code class="html plain"></code>"lead"<code class="html string"></code>>email me</<code class="html plain"></code>span<code class="html keyword"></code>><code class="html plain"></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>As shown in the picture, the comparison effect between lead and h1: <span style="line-height: 1.6;"></span> </p> <p><span style="line-height: 1.6;"><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740539-2045389970.png" class="lazy" alt="" border="0"><br></span> </p>2. Emphasize text<h2> </h2> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table style="width: 100%;" border="1" bgcolor="#FFFFFF"> <tbody> <tr>Accent elements<td style="width: 50%;"> </td>Performance<td style="width: 50%;"> </td> </tr> <tr> <td style="width: 50%;">small<p> </p>(You can directly apply the .small class)<p> </p> </td>Small text<td style="width: 50%;"> </td> </tr> <tr>strong<td style="width: 50%;"> </td>Emphasis (bold)<td style="width: 50%;"> </td> </tr> <tr>em<td style="width: 50%;"> </td>italic<td style="width: 50%;"> </td> </tr> <tr>cite<td style="width: 50%;"> </td>Cite sources, font size is 85%<td style="width: 50%;"> </td> </tr> </tbody> <div> </div> <h2 id="Abbreviations-abbr-and-initialism">3. Abbreviations abbr and .initialism</h2> <p>Both can achieve the underline dotted hover hand effect, which needs to be used with the title attribute. </p> <h2 id="address-address">4. address address</h2> <p>Used to package information related to contact information. The style difference is that the spacing and bottom style are slightly different. </p> <div id="highlighter_86830" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>Twitter, Inc.</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain">795 Folsom Ave, Suite 600<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">​​​​</code><code class="html plain">San Francisco, CA 94107<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">abbr</code> <code class="html color1">title</code><code class="html plain">=</code><code class="html string">"Phone"</code><code class="html plain">>P:</</code><code class="html keyword">abbr</code><code class="html plain">>(123) 456-7890</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number7 index6 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">> Uncle Tom </</code><code class="html keyword">strong</code><code class="html plain">> </code><code class="html keyword">  </code><code class="html plain"><</code></div>a<div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">href</code><code class="html plain">=</code><code class="html keyword">"mailto:#"</code><code class="html color1">>tomxu@outlook.com</</code><code class="html plain">a</code><code class="html string">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">address</code></div>><div class="line number10 index9 alt1" style="height: 16px;"> <code class="html plain"> </code> <code class="html keyword"> </code> <code class="html plain"> </code> </div> </code> </div> </div> <p>The effect is as shown in the picture</p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741086-1251850225.png" class="lazy" alt="" border="0"></p> <h2 id="span-style-line-height-Quote-blockquote-span"><span style="line-height: 1.6;">5. Quote blockquote</span></h2> <p>The general format for citations is</p> <div id="highlighter_518004" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain"><blockquote></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 spaces"> </code><code class="as3 plain"><p>Love is not something you can just buy if you want</p></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 spaces">  </code><code class="as3 plain"><small>From<cite>Love Sales</cite></small></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"></blockquote></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741430-49428234.png" class="lazy" alt="" border="0"></p> <p><span style="line-height: 1.6;">Of course, replacing small with footer will have the same effect. </span></p> <p><span style="line-height: 1.6;">The default is left-aligned. If you want to right-align, you can use the .pull-right class for blockquote. The whole thing floated to the right. </span></p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" class="lazy" alt="" border="0"></p> <h2 id="List">6. List</h2> <h3 id="ul-li-unordered-list">(1)ul-li unordered list</h3> <p>Under bootstrap, the ul-li framework of ordinary lists is basically the same as the default. </p> <p>A. The style of the ul-li list is determined by list-style. Use the .list-unstyle class in the bootstrap framework. The source code style is nothing more than padding-left:0;list-style:none. </p> <p>Note: If it is a list nested list, if the <span>.</span><span>list-unstyle class is applied to the grandparent ul, the grandchild li will not inherit it. </span></p> <p><span>B. Inline list: Normal ul-li is displayed vertically. In many situations, the most typical one is navigation, which requires li to be arranged horizontally. At this time, you can use the <span>.list-inline class of the inline list</span></span></p> <p> </p> <div id="highlighter_385611" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                                                                                                      </code><code class="html plain">                                                                                                                                                                     </code><code class="html keyword">                                                                                                                                                  </code><code class="html plain">                                                                                                ​  </code> <code class="html keyword"> </code> <code class="html plain"> </code> </div> </div> <p><span><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742258-1575759483.png" class="lazy" alt="" border="0"><br></span></p> <h3 id="ordered-list-ol-li">(2) ordered list ol-li</h3> <p>Changed the font to make the display softer</p> <h3 id="dl-dt-dd-definition-list">(3) dl-dt-dd definition list</h3> <p>The definition list includes description information. The <span>dl-dt-dd definition list</span>under bootstrap is usually arranged vertically. </p> <div id="highlighter_598113" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">dl</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 1</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 1</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 2</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 2</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 3</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 3</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">dl</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742743-1319120599.png" class="lazy" alt="" border="0"></p> <p>我想在横向展示一个商品列表,包括描述信息。如果给dl加上<span>class="dl-horizontal"</span></p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142743258-1006507091.png" class="lazy" alt="" border="0"></p> <p> </p> <h2 id="代码">7. 代码</h2> <p>包括code单行代码,kbd用户输入代码和pre多行代码块。</p> <p>代码样式的用法示例如下:</p> <div id="highlighter_826630" class="syntaxhighlighter html"> <div id="highlighter_296927" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">code</code><code class="html plain">><body></body></</code><code class="html keyword">code</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">kbd</code><code class="html plain">><body></body></</code><code class="html keyword">kbd</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">pre</code><code class="html plain">><body></body></</code><code class="html keyword">pre</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744352-1730720578.png" class="lazy" alt="" border="0"> </div> <h3 id="code">(1)code</h3> <p><span>code内联代码可以在行间引用。原理是给code标记定义背景色,文字颜色</span></p> <h2 id="span-kbd-span"><span>(2)kbd</span></h2> <p>kbd表示需要用户输入,可以配合input元素使用。</p> <div id="highlighter_709029" class="syntaxhighlighter js"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="js plain">请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744649-2052810696.png" class="lazy" alt="" border="0"></p> <h2 id="多行代码块pre">(3)多行代码块pre</h2> <p>pre是预编译的意思。bootstrap实现基本方法是背景-边框,高度,圆角,竖向滚动。</p> <p>粘贴进去会有空格。</p> <p>类似还有<samp>可以格式化代码。用较为标准的字体和行间距显示</p> <h2 id="其它H-标记补充">8.其它H5标记补充</h2> <p><span>(1)<mark>,也可以使用.mark</span></p> <p> </p> <div id="highlighter_283527" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"mark"</code><code class="html plain">>this is mark text</</code><code class="html keyword">p</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><span><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744930-1750370126.png" class="lazy" alt="" border="0"><br></span></p> <h3 id="span-span-del-mark-and-s-mark-span-span"><span><span> (2) del mark and s mark </span></span></h3> <div id="highlighter_100404" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">del</code><code class="html plain">>I am delated.</</code><code class="html keyword">del</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142746164-1214610770.png" class="lazy" alt="" border="0"></p> <h3 id="ins-tag-and-u-tag"> (3) ins tag and u tag </h3> <div>Underscore, ins defines text that has been inserted into the document. The u mark <span style="line-height: 1.6;"> has different semantics from ins. If the text is not a hyperlink, don’t use the u mark </span> </div> <h3 id="Alignment-related">(4) Alignment related</h3> <div>——text-left</div> <div>——text-center</div> <div>——text-right</div> <div>Text is centered left, center and right. </div> <div>——text-justify: judge for yourself—Qi Xing defines the spacing between words, which is similar to the head and tail avoidance rule. Note that there are also corresponding properties in css3. </div> <div>——text-nowrap: Always keep 1 line when the browser is zoomed out</div> <h3 id="Case-related"> (5) Case related: </h3> <div>text-lowercase</div> <div>text-uppercase </div> <div>text-capitalize initial letter size</div> <h3 id="Example-Text-formatting-practice">【Example 3.1】Text formatting practice</h3> <div id="highlighter_620203" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 32px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 32px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-justify"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">           </code><code class="html plain"><</code><code class="html keyword">h3</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-center"</code><code class="html plain">>I am afraid <</code><code class="html keyword">small</code><code class="html plain">>William Shakespeare</</code><code class="html keyword"> small</code><code class="html plain">>< ;/</code><code class="html keyword">h3</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 32px;"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-capitalize"</code><code class="html plain">>you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">             </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">><mark>This is why I am afraid, you say that u love me too.</mark></</code><code class="html keyword">p</code><code class="html plain">></code> </div>> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">           </code><code class="html plain"><</code><code class="html keyword">ins</code><code class="html plain">><</code><code class="html keyword">em</code><code class="html plain">>Translation</</code><code class="html keyword">em</code><code class="html plain">></</code><code class="html keyword">ins</code><code class="html plain">&g t;</code> </div>& & Lt; <div class="line number6 index5 alt1" style="height: 32px;"> <code class="html spaces">P</code><code class="html plain"> & gt; You say that the rain and rain are slightly mang, Lanting looks away; You said that spring was brilliant, green sleeves were red and fragrant; later, the west building was hidden inside, and I stood quietly beside you. You said that the soft breeze blows gently, and I lie down drunk and think; later, the doors and windows are tightly closed, and the tents are filled with sorrow. </</code><code class="html keyword">p</code><code class="html plain">></code><code class="html keyword"> </code><code class="html plain">                                                                                                                                                                                                                        </</code></div>p<div class="line number7 index6 alt2" style="height: 16px;"><code class="html spaces">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">div</code><code class="html keyword">></code><code class="html plain"> </code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html plain"> </code> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" class="lazy" alt="" border="0"></p> <p> </p> <h2 id="Table-related-css">3. Table related css</h2> <p>The table is implemented by adding the .table class to the table</p> <h3>【Example 3.2】<span style="line-height: 1.6;">Make a table with 5 rows and 5 columns to record information</span> </h3> <p> </p> <div id="highlighter_341065" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                                                                                                                                                                                                             </code><code class="html plain">                                                                                                                                                                                                                  Since<div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                    </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">                                                                                                                                                                                                                                </code><code class="html plain">                                                                                                                                                                                                       </code><code class="html keyword">                                                                                                                    ​ </code><code class="html plain">                                                                                                                       ​ ~ </code><code class="html keyword">                                                                                                                                                                                   </code><code class="html plain">                                                                                                                                                               </code> </div>                                                                                                                                                                                                                       <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">                                                                                                                                                                                                                                               </code><code class="html plain">                                                                                                                     ​ </code><code class="html keyword">                                                                                                                        ​<div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number27 index26 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>水浒传</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>施耐庵</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>30.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number32 index31 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number33 index32 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number34 index33 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>红楼梦</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number35 index34 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>曹雪芹</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number36 index35 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>40.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number37 index36 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number38 index37 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number39 index38 alt2" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number40 index39 alt1" style="height: 16px;"> <code class="html spaces">                </code><code class="html plain"></</code><code class="html keyword">table</code><code class="html plain">></code> </div> </code> </div> </code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <div>Displayed when there is no class style: </div> <div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" class="lazy" style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" alt="" border="0"> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748961-1101927088.png" class="lazy" alt="" border="0"></p> <h2 id="table-basic-style">1.table basic style</h2> <h3 id="Add-class-table-to-the-table-tag-the-effect-becomes">(1) Add class="table" to the table tag, the effect becomes: </h3> </div> <div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" class="lazy" style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" alt="" border="0"> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142749539-745591421.png" class="lazy" alt="" border="0"></p> <p> Is it possible to become rich, handsome and rich in seconds? </p> </div> <h3>(2) Alternate row color change.<span>table-striped</span> </h3> <p><span><span>table-striped: zebra crossing</span><br></span></p> <p><span>Using CSS3’s :nth-child implementation. </span></p> <h3 id="Add-border">(3) Add border</h3> <p>Use .table-bordered to add a 1px border to all cells. </p> <h3 id="Hover-Highlight">(4)Hover Highlight</h3> <p>Use .table:hover to highlight the current row on hover</p> <h3 id="Compact-Tables">(5) Compact Tables</h3> <p><span><span>table-condensed: Condensed, slightly smaller - reduces cell padding. This is what it looks like after applying everything. </span><br></span></p> <p><span><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142750039-106969313.png" class="lazy" alt="" border="0"><br></span></p> <p>Code List</p> <div id="highlighter_419714" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"table table-bordered table-striped table-hover table-condensed"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                     </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div>& & Lt; <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">td</code><code class="html plain"> & gt; Journey to the West & LT;/</code><code class="html keyword">td</code><code class="html plain"> & gt; </code><code class="html keyword"> </code><code class="html plain">                                                                                                                                                                  </code> </div>                                                                                                                                                                                                                                                      <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces">                                                                                                                                                                                                        </code><code class="html plain">                                                                                                                     ​ </code><code class="html keyword">                                                                                                                        ​ ~ </code><code class="html plain">                                                                                                                                                                                                </code><code class="html keyword">                                                                                                                                                               </code><code class="html plain">                                                                                                                                                                                                                      <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"><c></c></div></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </table> </div> </div> </div>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

See all articles