<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>博客詳情</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><link rel="stylesheet" href="./static/css/typo.css"><link rel="stylesheet" href="./static/css/me.css"></head><body><!--導(dǎo)航--><nav class="ui inverted segment m-padded-tb-mini"><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">Blog</h2><a href="#"class="m-item item m-mobile-hide"><i class="mini home icon"></i> 首頁(yè)</a><a href="#"class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分類</a><a href="#"class="m-item item m-mobile-hide"><i class="mini tags icon"></i>標(biāo)簽</a><a href="#"class="m-item item m-mobile-hide"><i class="mini clone icon"></i>歸檔</a><a href="#"class="m-item item m-mobile-hide"><i class="mini info icon"></i>關(guān)于我</a><div class="right m-item item m-mobile-hide"><div class="ui icon inverted transparent input"><input type="text" placeholder="搜索...."><i class="search link icon"></i></div></div></div></div><a href="#"class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a></nav><!--中間內(nèi)容--><div><div class="m-container-small m-padded-tb-big"><div class="ui container"><!--頭部--><div class="ui top attached segment"><div class="ui horizontal link list"><div class="item"><img src="http://unsplash.it/100/100?image=1005" alt=""class="ui avatar image"><div class="content"><a href="#"class="header">李仁密</a></div></div><div class="item"><i class="calendar icon"></i>2017-10-01</div><div class="item"><i class="eye icon"></i>2342</div></div></div><div class="ui attached segment"><!--圖片區(qū)域--><img src="http://unsplash.it/800/450?image=1005" alt=""class="ui fluid rounded image"></div><div class="ui attached padded segment"><!--內(nèi)容--><div class="ui right aligned basic segment"><div class="ui orange basic label">原創(chuàng)</div></div><h2 class="ui center aligned header">關(guān)于刻意練習(xí)的清單</h2><br><div id="content "class="typo typo-selection m-padded-lr-responsive m-padded-tb-large"><h2 id="tagline"class="serif">一致化瀏覽器排版效果，構(gòu)建最適合中文閱讀的網(wǎng)頁(yè)排版</h2><ol id="table"><li><a href="#section1">關(guān)于 <i class="serif">Typo.css</i></a></li><li><a href="#section2">排版實(shí)例</a><ul><li><a href="#section2-1">例1：論語(yǔ)學(xué)而篇第一</a></li><li><a href="#section2-2">例2：英文排版</a></li></ul></li><li><a href="#section3">附錄</a><ul><li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重點(diǎn)</a></li><li><a href="#appendix2">開(kāi)源許可</a></li></ul></li></ol><h2 id="section1">一、關(guān)于 <i class="serif">Typo.css</i></h2><p><i class="serif">Typo.css</i> 的目的是，在一致化瀏覽器排版效果的同時(shí)，構(gòu)建最適合中文閱讀的網(wǎng)頁(yè)排版。</p><h4>現(xiàn)狀和如何去做：</h4><p class="typo-first">排版是一個(gè)麻煩的問(wèn)題 <sup><a href="#appendix1"># 附錄一</a></sup>，需要精心設(shè)計(jì)，而這個(gè)設(shè)計(jì)卻是常被視覺(jué)設(shè)計(jì)師所忽略的。前端工程師更常看到這樣的問(wèn)題，但不便變更。因?yàn)樵诙鄠€(gè) OS 中的不同瀏覽器渲染不同，改動(dòng)需要多的時(shí)間做回歸測(cè)試，所以改變變得更困難。而像我們一般使用的Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都沒(méi)有很好地考慮中文排版。<i class="serif">Typo.css</i> 要做的就是解決中文排版的問(wèn)題。</p><p><strong><i class="serif">Typo.css</i> 測(cè)試于如下平臺(tái)：</strong></p><table class="ui table" summary="Typo.css 的測(cè)試平臺(tái)列表"><thead><tr><th>OS/瀏覽器</th><th>Firefox</th><th>Chrome</th><th>Safari</th><th>Opera</th><th>IE9</th><th>IE8</th><th>IE7</th><th>IE6</th></tr></thead><tbody><tr><td>OS X</td><td>?</td><td>?</td><td>?</td><td>?</td><td>-</td><td>-</td><td>-</td><td>-</td></tr><tr><td>Win 7</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>-</td></tr><tr><td>Win XP</td><td>?</td><td>?</td><td>?</td><td>?</td><td>-</td><td>?</td><td>?</td><td>?</td></tr><tr><td>Ubuntu</td><td>?</td><td>?</td><td>-</td><td>?</td><td>-</td><td>-</td><td>-</td><td>-</td></tr></tbody></table><h4>中文排版的重點(diǎn)和難點(diǎn)</h4><p>在中文排版中，HTML4 的很多標(biāo)準(zhǔn)在語(yǔ)義在都有照顧到。但從視覺(jué)效果上，卻很難利用單獨(dú)的 CSS 來(lái)實(shí)現(xiàn)，像<abbr title="在文字下多加一個(gè)點(diǎn)">著重號(hào)</abbr>（例：這里<em class="typo-em">強(qiáng)調(diào)一下</em>）。在 HTML4 中，專名號(hào)標(biāo)簽（<code><u></code>）已經(jīng)被放棄，而HTML5 被<a href="//html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i> 也根據(jù)實(shí)際情況提供相應(yīng)的方案。我們重要要注意的兩點(diǎn)是：</p><ol><li>語(yǔ)義：語(yǔ)義對(duì)應(yīng)的用法和樣式是否與中文排版一致</li><li>表現(xiàn)：在各瀏覽器中的字體、大小和縮放是否如排版預(yù)期</li></ol><p>對(duì)于這些，<i class="serif">Typo.css</i> 排版項(xiàng)目的中文偏重注意點(diǎn)，都添加在附錄中，詳見(jiàn)：</p><blockquote><b>附錄一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重點(diǎn)</a></blockquote><p>目前已有像百姓網(wǎng)等全面使用 <i class="serif">Typo.css</i> 的項(xiàng)目，測(cè)試平臺(tái)的覆蓋，特別是在<abbr title="手機(jī)、平板電腦等移動(dòng)平臺(tái)">移動(dòng)端</abbr>上還沒(méi)有覆蓋完主流平臺(tái)，希望有能力的同學(xué)能加入測(cè)試行列，或者加入到 <i class="serif">Typo.css</i>的開(kāi)發(fā)。加入方法：<a href="https://github.com/sofish/Typo.css">參與 <i class="serif">Typo.css</i> 開(kāi)發(fā)</a>。如有批評(píng)、建議和意見(jiàn)，也隨時(shí)歡迎給在 Github 直接提 <ahref="https://github.com/sofish/Typo.css/issues">issues</a>，或給<abbr title="Sofish Lin, author of Typo.css"role="author">我</abbr>發(fā)<ahref="mailto:sofish@icloud.com">郵件</a>。</p><h2 id="section2">二、排版實(shí)例：</h2><p>提供2個(gè)排版實(shí)例，第一個(gè)中文實(shí)例來(lái)自于來(lái)自于<cite class="typo-unique">張燕嬰</cite>的《論語(yǔ)》，由于古文排版涉及到的元素比較多，所以采用《論語(yǔ)》中《學(xué)而》的第一篇作為排版實(shí)例介紹；第2個(gè)來(lái)自到經(jīng)典的Lorem Ipsum，并加入了一些代碼和列表等比較具有代表性的排版元素。</p><h3 id="section2-1">例1：論語(yǔ)學(xué)而篇第一</h3><p><small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（<time>前551年9月28日－前479年4月11日</time>）</small></p><h4>本篇引語(yǔ)</h4><p>《學(xué)而》是《論語(yǔ)》第一篇的篇名。《論語(yǔ)》中各篇一般都是以第一章的前二三個(gè)字作為該篇的篇名。《學(xué)而》一篇包括16章，內(nèi)容涉及諸多方面。其中重點(diǎn)是「吾日三省吾身」；「節(jié)用而愛(ài)人，使民以時(shí)」；「禮之用，和為貴」以及仁、孝、信等道德范疇。 </p><h4>原文</h4><p>子曰：「學(xué)而時(shí)習(xí)之，不亦說(shuō)乎？有朋自遠(yuǎn)方來(lái)，不亦樂(lè)乎？人不知，而不慍，不亦君子乎？」 </p><h4>譯文</h4><p>孔子說(shuō)：「學(xué)了又時(shí)常溫習(xí)和練習(xí)，不是很愉快嗎？有志同道合的人從遠(yuǎn)方來(lái)，不是很令人高興的嗎？人家不了解我，我也不怨恨、惱怒，不也是一個(gè)有德的君子嗎？」 </p><h4>評(píng)析</h4><p>宋代著名學(xué)者<u class="typo-u">朱熹</u>對(duì)此章評(píng)價(jià)極高，說(shuō)它是「入道之門，積德之基」。本章這三句話是人們非常熟悉的。歷來(lái)的解釋都是：學(xué)了以后，又時(shí)常溫習(xí)和練習(xí)，不也高興嗎等等。三句話，一句一個(gè)意思，前后句子也沒(méi)有什么連貫性。但也有人認(rèn)為這樣解釋不符合原義，指出這里的「學(xué)」不是指學(xué)習(xí)，而是指學(xué)說(shuō)或主張；「時(shí)」不能解為時(shí)常，而是時(shí)代或社會(huì)的意思，「習(xí)」不是溫習(xí)，而是使用，引申為采用。而且，這三句話不是孤立的，而是前后相互連貫的。這三句的意思是：自己的學(xué)說(shuō)，要是被社會(huì)采用了，那就太高興了；退一步說(shuō)，要是沒(méi)有被社會(huì)所采用，可是很多朋友贊同<abbrtitle="張燕嬰">我</abbr>的學(xué)說(shuō)，紛紛到我這里來(lái)討論問(wèn)題，我也感到快樂(lè)；再退一步說(shuō)，即使社會(huì)不采用，人們也不理解我，我也不怨恨，這樣做，不也就是君子嗎？（見(jiàn)《齊魯學(xué)刊》1986年第6期文）這種解釋可以自圓其說(shuō)，而且也有一定的道理，供讀者在理解本章內(nèi)容時(shí)參考。</p><p>此外，在對(duì)「人不知，而不慍」一句的解釋中，也有人認(rèn)為，「人不知」的后面沒(méi)有賓語(yǔ)，人家不知道什么呢？當(dāng)時(shí)因?yàn)榭鬃佑姓f(shuō)話的特定環(huán)境，他不需要說(shuō)出知道什么，別人就可以理解了，卻給后人留下一個(gè)謎。有人說(shuō)，這一句是接上一句說(shuō)的，從遠(yuǎn)方來(lái)的朋友向我求教，我告訴他，他還不懂，我卻不怨恨。這樣，「人不知」就是「人家不知道我所講述的」了。這樣的解釋似乎有些牽強(qiáng)。</p><p>總之，本章提出以學(xué)習(xí)為樂(lè)事，做到人不知而不慍，反映出孔子學(xué)而不厭、誨人不倦、注重修養(yǎng)、嚴(yán)格要求自己的主張。這些思想主張?jiān)凇墩撜Z(yǔ)》書中多處可見(jiàn)，有助于對(duì)第一章內(nèi)容的深入了解。</p><h3 id="section2-2">例2：英文排版</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make atype specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remainingessentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsumpassages, and more recently with desktop publishing software like Aldus PageMaker including versions of LoremIpsum.</p><blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote><h4>The standard Lorem Ipsum passage, used since the 1500s</h4><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4><p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsamvoluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui rationevoluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipiscivelit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enimad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodiconsequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p><h4>List style in action</h4><ul><li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence asyour brother and hope as your sentry.<p>如果你希望成功，當(dāng)以恒心為良友，以經(jīng)驗(yàn)為參謀，以謹(jǐn)慎為兄弟，以希望為哨兵。</p></li><li>Sometimes one pays most for the things one gets for nothing.<p>有時(shí)候一個(gè)人為不花錢得到的東西付出的代價(jià)最高。</p></li><li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult thingseasily.<p>只有有耐心圓滿完成簡(jiǎn)單工作的人，才能夠輕而易舉的完成困難的事。</p></li></ul><h4>You may want to create a perfect <code><hr /></code> line, despite the fact that there will never have one</h4><hr/><p><abbr title="法國(guó)作家羅切福考爾德">La Racheforcauld</abbr> said:<mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man failsto succeed".</mark>You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as thedemo you're watching now. The following code is the best way to render typo in Chinese:</p><pre>/* 標(biāo)題應(yīng)該更貼緊內(nèi)容，并與其他塊區(qū)分，margin 值要相應(yīng)做優(yōu)化 */
h1,h2,h3,h4,h5,h6 {line-height:1;font-family:Arial,sans-serif;margin:1.4em 00.8em;}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}/* 現(xiàn)代排版：保證塊/段落之間的空白隔行 */.typo p,.typo pre,.typo ul,.typo ol,.typo dl,.typo form,.typo hr {margin:1em 00.6em;}</pre><h3 id="section3">三、附錄</h3><h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重點(diǎn)</h5><table class="ui table" summary="Typo.css 排版偏重點(diǎn)"><thead><tr><th>類型</th><th>語(yǔ)義</th><th>標(biāo)簽</th><th>注意點(diǎn)</th></tr></thead><tbody><tr><th rowspan="15">基礎(chǔ)標(biāo)簽</th><td>標(biāo)題</td><td><code>h1</code> ～ <code>h6</code></td><td>全局不強(qiáng)制大小，<code>.typo</code> 中標(biāo)題與其對(duì)應(yīng)的內(nèi)容應(yīng)緊貼，并且有相應(yīng)的大小設(shè)置</td></tr><tr><td>上、下標(biāo)</td><td><code>sup</code>/<code>sub</code></td><td>保持與 MicroSoft Office Word 等程序的日常排版一致</td></tr><tr><td>引用</td><td><code>blockquote</code></td><td>顯示/嵌套樣式</td></tr><tr><td>縮寫</td><td><code>abbr</code></td><td>是否都有下劃線，鼠標(biāo) <code>hover</code> 是否為幫助手勢(shì)</td></tr><tr><td>分割線</td><td><code>hr</code></td><td>顯示的 <code>padding</code> 和 <code>margin</code>正確</td></tr><tr><td>列表</td><td><code>ul</code>/<code>ol</code>/<code>dl</code></td><td>在全局沒(méi)有 <code>list-style</code>，在 .<code>typo</code> 中對(duì)齊正確</td></tr><tr><td>定義列表</td><td><code>dl</code></td><td>全局 <code>padding</code> 和 <code>margin</code>為0， .<code>typo</code> 中對(duì)齊正確</td></tr><tr><td>選項(xiàng)</td><td><code>input[type=radio[, checkbox]]</code></td><td>與其他 <code>form</code> 元素排版時(shí)是否居中</td></tr><tr><td>斜體</td><td><code>i</code></td><td>只設(shè)置一種斜體，讓 <code>em</code> 和 <code>cite</code> 顯示為正體</td></tr><tr><td>強(qiáng)調(diào)</td><td><code>em</code></td><td>在全局顯示正體，在 <code>.typo</code> 中顯示與 <code>b</code> 和 <code>strong</code> 的樣式一致，為粗體</td></tr><tr><td>加強(qiáng)</td><td><code>strong/b</code></td><td>顯示為粗體</td></tr><tr><td>標(biāo)記</td><td><code>mark</code></td><td>類似熒光筆</td></tr><tr><td>印刷</td><td><code>small</code></td><td>保持為正確字體的 80% 大小，顏色設(shè)置為淺灰色</td></tr><tr><td>表格</td><td><code>table</code></td><td>全局不顯示線條，在 <code>table</code> 中顯示表格外框，并且表頭有淺灰背景</td></tr><tr><td>代碼</td><td><code>pre</code>/<code>code</code></td><td>字體使用 <code>courier</code> 系字體，保持與 <code>serif</code> 有比較一致的顯示效果</td></tr><tr><th rowspan="5">特殊符號(hào)</th><td>著重號(hào)</td><td><em class="typo-em">在文字下加點(diǎn)</em></td><td>在支持 <code>:after</code> 和 <code>:before</code> 的瀏覽器可以做漸進(jìn)增強(qiáng)實(shí)現(xiàn)</td></tr><tr><td>專名號(hào)</td><td><u>林建鋒</u></td><td>專名號(hào)，有下劃線，使用 <code>u</code> 或都 <code>.typo-u</code> 類</td></tr><tr><td>破折號(hào)</td><td>——</td><td>保持一劃，而非兩劃</td></tr><tr><td>人民幣</td><td>¥</td><td>使用兩平等線的符號(hào)，或者 HTML 實(shí)體符號(hào) <code>&yen;</code></td></tr><tr><td>刪除符</td><td><del>已刪除（deleted）</del></td><td>一致化各瀏覽器顯示，中英混排正確</td></tr><tr><th rowspan="3">加強(qiáng)類</th><td>專名號(hào)</td><td><code>.typo-u</code></td><td>由于 <code>u</code> 被 HTML4 放棄，在向后兼容上推薦使用 <code>.typo-u</code></td></tr><tr><td>著重符</td><td><code>.typo-em</code></td><td>利用 <code>:after</code> 和 <code>:before</code> 實(shí)現(xiàn)著重符</td></tr><tr><td>清除浮動(dòng)</td><td><code>.clearfix</code></td><td>與一般 CSS Reset 保持一對(duì)致 API</td></tr><tr><th rowspan="5">注意點(diǎn)</th><td colspan="3">（1）中英文混排行高/行距</td></tr><tr><td colspan="3">（2）上下標(biāo)在 IE 中顯示效果</td></tr><tr><td colspan="3">（3）塊/段落分割空白是否符合設(shè)計(jì)原則</td></tr><tr><td colspan="3">（4）input 多余空間問(wèn)題</td></tr><tr><td colspan="3">（5）默認(rèn)字體色彩，目前采用 <code>#333</code> 在各種瀏覽顯示比較好</td></tr></tbody></table><h5 id="appendix2">2、開(kāi)源許可</h5></div><!--標(biāo)簽--><div class="m-padded-lr-responsive"><div class="ui basic teal left pointing label">方法論</div></div><!--贊賞--><div class="ui center aligned basic segment"><button id="payButton"class="ui orange basic circular button">贊賞</button></div><div class="ui payQR flowing popup top left transition hidden"><div class="ui orange basic label"><div class="ui images" style="font-size: inherit !important;"><div class="image"><img src="./static/images/wechat.jpg" alt=""class="ui rounded bordered image" style="width:120px "><div>支付寶</div></div><div class="image"><img src="./static/images/wechat.jpg" alt=""class="ui rounded bordered image" style="width:120px "><div>微信</div></div></div></div></div></div><div class="ui attached positive message"><!--博客信息--><div class="ui middle aligned grid"><div class="eleven wide column"><ui class="list"><li>作者: 李仁密（聯(lián)系作者）</li><li>發(fā)表時(shí)間:2017/10/0209:08</li><li>版權(quán)聲明: 自由轉(zhuǎn)載-非商用-保持署名（創(chuàng)意共享3.0許可證）</li><li>公眾號(hào)轉(zhuǎn)載: 請(qǐng)?jiān)谖哪┨砑幼髡吖娞?hào)二維碼</li></ui></div><div class="five wide column"><img src="./static/images/wechat.jpg" alt=""class="ui right floated rounded bordered image" style="width: 110px"></div></div></div><div class="ui bottom attached segment"><!--留言區(qū)域列表--><div class="ui teal segment"><div class="ui threaded comments"><h3 class="ui dividing header">Comments</h3><div class="comment"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Matt</a><div class="metadata"><span class="date">Today at 5:42PM</span></div><div class="text">How artistic!</div><div class="actions"><a class="reply">回復(fù)</a></div></div></div><div class="comment"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Elliot Fu</a><div class="metadata"><span class="date">Yesterday at 12:30AM</span></div><div class="text"><p>This has been very useful for my research. Thanks as well!</p></div><div class="actions"><a class="reply">回復(fù)</a></div></div><div class="comments"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Jenny Hess</a><div class="metadata"><span class="date">Just now</span></div><div class="text">Elliot you are always so right :)</div><div class="actions"><a class="reply">回復(fù)</a></div></div></div></div><div class="comment"><a class="avatar"><img src="http://unsplash.it/100/100?image=1005"></a><div class="content"><a class="author">Joe Henderson</a><div class="metadata"><span class="date">5 days ago</span></div><div class="text">Dude,this is awesome. Thanks so much</div><div class="actions"><a class="reply">回復(fù)</a></div></div></div></div></div><div class="ui form"><div class="field"><textarea name="content" placeholder="請(qǐng)輸入評(píng)論信息..."></textarea></div><div class="fields"><div class="field m-mobile-wide m-margin-bottom-small"><div class="ui left icon input"><i class="user icon"></i><input type="text" name="nickname" placeholder="姓名"></div></div><div class="field m-mobile-wide m-margin-bottom-small"><div class="ui left icon input"><i class="user icon"></i><input type="text" name="email" placeholder="郵箱"></div></div><div class="filed m-margin-bottom-small m-mobile-wide"><button class="ui teal button m-mobile-wide"><i class="edit icon"></i>發(fā)布</button></div></div></div></div></div></div></div><br><br><!--底部?jī)?nèi)容--><footer class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="./static/images/wechat.jpg"class=" ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4><div class="ui inverted link list"><a href="#"class="item">用戶故事（User Story）</a><a href="#"class="item">冠以刻意練習(xí)的清單</a><a href="#"class="item">失敗要趁早</a></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">聯(lián)系我</h4><div class="ui inverted link list"><a href="#"class="item">Email：1440206921@qq.com</a><a href="#"class="item">QQ：1440206921</a></div></div><div class="seven wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4><p class="m-text-thin m-text-spaced m-opacity-mini">這是我的個(gè)人博客、會(huì)分享關(guān)于編程、寫作、思考相關(guān)的任何內(nèi)容，希望可以給來(lái)到這的人有所幫助...</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright ? 2016-2017 Lirenmi Designed by Lirenmi</p></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><script>$('.menu.toggle').click(function (){$('.m-item').toggleClass('m-mobile-hide');});$('#payButton').popup({popup : $('.payQR.popup'),on :'click',position:'bottom center'});</script></body></html>
