如果本章演示效果無法正常展示，請(qǐng)至主站查看 http://coffee.zji.me/

你看，代碼這東西認(rèn)真玩起來其實(shí)還是很有意思的。不過可能有同學(xué)問了，咱不是寫一個(gè) App 的發(fā)布頁面么？怎么……啊啊，是啊是啊，所以我們接下來要寫一個(gè)下載按鈕呢~

這個(gè)按鈕的寫法比較多啊，你要是只為了鏈接到一個(gè)文件，其實(shí)用 a 標(biāo)簽就可以搞定啊，你會(huì)設(shè)置背景吧，會(huì)設(shè)置文字顏色吧，會(huì)設(shè)置邊框吧。然后哩？

當(dāng)然，要是希望用來發(fā)生什么有趣的事情，或者為了語義明確，我們也可以選用 button（按鈕）標(biāo)簽。這個(gè)寫起來超簡(jiǎn)單的~

<button>下載偶像巨幅簽名照</button>

是挺簡(jiǎn)單的，也挺難看的，開始給他定義樣式：

#post .post-content button {
    padding: 12px;
    margin-top: 36px;
    background: #CCE;
    border: 5px solid #DDF;
    font-size: 18px;
    font-weight: 600;
}

大家應(yīng)該都看得懂的，我也不多說了，看看效果吧，請(qǐng)?jiān)徫疫@詭異的配色！

到這里，這個(gè)海報(bào)其實(shí)就做得差不多了。雖然很多細(xì)節(jié)沒有去完善。不過……那不是應(yīng)該你們自己去做的嗎？趕緊的，每個(gè)人做一個(gè)漂亮的出來。

本來這章已經(jīng)可以結(jié)束了，但是好像字?jǐn)?shù)太少了，我總要對(duì)得起各位讀者的票錢……雖然你們大部分沒給錢。所以在下面做一些簡(jiǎn)單的補(bǔ)遺。

第一個(gè)問題：背景相關(guān)的還有一個(gè)屬性：background-repeat 是說背景重復(fù)。默認(rèn)是重復(fù)的呦，就是背景圖片小于元素的話，則通過重復(fù)的方式進(jìn)行填滿，而我們也可以單獨(dú)設(shè)置其中某個(gè)軸是否重復(fù)。

然后我來舉個(gè)例子：background-repeat: no-repeat repeat-y 就是橫向不重復(fù)，只在縱向重復(fù)。挺好理解的事情，就不多解釋了。

定義背景的時(shí)候我們可以把這些屬性都寫在一起，為什么這么做呢？我就是圖省事……

background:url(miao.jpg) center -15px no-repeat;

然后說說 margin 這個(gè)家伙。這個(gè)家伙其實(shí)也沒有想象的那么麻煩，就是縱向上兩個(gè) margin 相遇會(huì)重疊。比如：

<div style="height:50px;border:3px solid #666;margin:50px;">

</div>
<div style="height:50px;border:3px solid #666;margin:50px;">

</div>

效果如下：

你看你看，兩個(gè)元素的間隔明顯不是 100px（50+50）啊。其實(shí)只有 50px ，因?yàn)閮蓚€(gè) margin 重疊了。

然后其實(shí)上一章 h1 引起的問題也是著個(gè)問題的一個(gè)變種，當(dāng)時(shí)我們已經(jīng)解決掉了。這個(gè)先知道就好，剩下的到實(shí)踐中去理解。

然后留個(gè)作業(yè)吧，敢不敢獨(dú)立把這個(gè)頁面完成掉？而且要盡可能的完美~

本章學(xué)習(xí)卡片：卡片 30

本章代碼下載：本章代碼

本書是收費(fèi)的，不過交費(fèi)憑自覺。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me