不過(guò)顯然的，要是做個(gè)海報(bào)這么簡(jiǎn)單碼農(nóng)們就不哭了。所以現(xiàn)在我們要做一些沒(méi)有設(shè)計(jì)師我們一樣玩的很 High 的工作。

你看我的海報(bào)其實(shí)還只有一個(gè)背景，上節(jié)課雖然加了鏈接，也不過(guò)是自欺欺人，沒(méi)內(nèi)容誰(shuí)點(diǎn)擊?。克晕覀円_(kāi)始添加內(nèi)容了。

那么上一節(jié)加的那個(gè)鏈接就顯得不夠精致，所以不要他了，于是我們好像又回到了第二十七章結(jié)束的時(shí)候。注意哦，現(xiàn)在每個(gè)元素我都在講著他的多種可能性，你們一定要注意點(diǎn)，跳著看的話可就亂了哦。

首先做什么？首先要給定內(nèi)容一個(gè)范圍，這樣比較便于控制里面的內(nèi)容，否則我們基于寬度變來(lái)變?nèi)サ?#post 進(jìn)行定位就會(huì)很困擾，要考慮的可能性太多了。但是如果我在其中劃出一片固定大小的區(qū)域用來(lái)放內(nèi)容，事情就變得簡(jiǎn)單了。

劃定一個(gè)區(qū)域，肯定是居中的，能夠被各種屏幕正常顯示的區(qū)域了，然后高度就是 #post 的高度，等等，怎么感覺(jué)越說(shuō)越像昨天加的鏈接了？

<div id="post">
    <div class="post-content">

    </div><!-- .post-content  End-->
</div><!-- #post End -->

#post .post-content {
    width: 960px;
    height: 100%;
    margin: 0 auto;
}

相似度確實(shí)不低呢，所以啦，其實(shí)寫網(wǎng)頁(yè)就是那點(diǎn)東西，套來(lái)套去的，套的多了自然就熟練了，也就會(huì)用了。

在這之后是什么？往里面加?xùn)|西啊。來(lái)，先加上這句：

<h1>稻米鼠是大帥哥！</h1>

當(dāng)然了，我們知道這是一個(gè)不容置疑的事實(shí)。但是，你應(yīng)該知道吧，上邊這句要放在 .post-content 里面哦，別放錯(cuò)位置。

然后如果你刷新頁(yè)面的話……你會(huì)從這一刻開(kāi)始懷疑人生。

先說(shuō) h1 標(biāo)簽是什么，是標(biāo)題，標(biāo)題標(biāo)簽有六個(gè) h1—h6，依次從大到小。這么說(shuō)這個(gè)標(biāo)簽肯定又是有自帶樣式的了，當(dāng)然我們可以根據(jù)需求歡快的去重新定義他們。那么現(xiàn)在的問(wèn)題是怎么引起的呢？h1 自帶了 margin 屬性，但是 margin 可不單純，這個(gè)屬性用起來(lái)很復(fù)雜，所以我特別建議一下，如果可以用 padding 的情況最好不要去用 margin ，除非你真的足夠熟悉它的特性。

那么現(xiàn)在我們?cè)趺醋瞿兀蚁却蛞粋€(gè)不太恰當(dāng)?shù)谋确饺ダ斫庖幌庐?dāng)前的情況，padding 是內(nèi)補(bǔ)，內(nèi)部問(wèn)題終究是好解決的。margin 是外補(bǔ)，這是一個(gè)要跟他的相鄰元素或者父元素產(chǎn)生相互影響的事情，于是就有點(diǎn)熱鬧了。眼下的問(wèn)題是父元素對(duì)他的約束力不夠，就是當(dāng)?shù)臎](méi)管住孩子，孩子就開(kāi)始淘氣了。怎么管住孩子呢？加一些特別的屬性就可以的，這個(gè)可以根據(jù)情況選擇各種屬性，比如給父元素加個(gè)內(nèi)補(bǔ)神馬的，但是這里我們并不希望加內(nèi)補(bǔ)，因?yàn)閮?nèi)補(bǔ)會(huì)影響元素的尺寸。那就加一個(gè)語(yǔ)義上說(shuō)得過(guò)去的屬性好了，反正我也挺隨心的。

那么給父元素（#post .post-content ）加上一個(gè) overflow: hidden; 好了，你說(shuō)這個(gè)什么意思？這倒是很值得說(shuō)道一下。overflow 這個(gè)屬性是說(shuō)元素內(nèi)容如果超出了元素的范圍怎么辦。這就比方說(shuō)你一個(gè)高二百的元素里插入了一個(gè)高五百的圖片，多出來(lái)那三百高度怎么辦？我們后面的屬性值也給出了答案，hidden 隱藏。藏起來(lái)不讓人看到就是了哦。

然后刷新頁(yè)面，你看到終于算是符合預(yù)期了?，F(xiàn)在就開(kāi)始下一個(gè)問(wèn)題，標(biāo)題居中。這個(gè)很簡(jiǎn)單了，文字水平居中啊，居左啊，居右啊，用這個(gè)屬性來(lái)定義：text-align 可用的屬性值有 left、center、right 等，這個(gè)比較顯而易見(jiàn)，不多說(shuō)，順便把文字顏色（color），距離頂部的距離（margin-top）定義一下好了。

#post .post-content h1 {
    margin-top: 120px;
    color: #EFEFEF;
    text-align: center;
    font-size: 42px;
}

看看效果：

嗯，為了強(qiáng)調(diào)這個(gè)事實(shí)，我又把字號(hào)（font-size）改大了一些，這樣感覺(jué)更有說(shuō)服力啊。但是我怕你們還是無(wú)法正確理解我的帥啊~所以我還要在這個(gè)標(biāo)題底下加上一行小字說(shuō)明一下。當(dāng)然就是在 h1 元素下面加上：

<p>這是一個(gè)毋庸置疑的事實(shí)，我們用靈魂承諾，此言不虛！</p>

然后看效果：

說(shuō)真的，我仔細(xì)找了半天才找到那一行小字。現(xiàn)在我們很容易想到給他加上各種樣式，不過(guò)仔細(xì)想想，我們要加的樣式跟上面的 h1 元素好像有很多重復(fù)啊。這時(shí)候其實(shí)我們沒(méi)必要定義兩次。那個(gè)同學(xué)說(shuō)用一樣的 class ，沒(méi)錯(cuò)！這只是其中的一個(gè)方法，現(xiàn)在我們來(lái)試試另外一種。我去把 h1 的文字顏色（color）、文字對(duì)齊方式（text-align）的定義，移動(dòng)到 #post .post-content 元素的定義里。變成了如下的樣子：

#post .post-content {
    width: 960px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    color: #EFEFEF;
    text-align: center;
}
#post .post-content h1 {
    margin-top: 120px;
    font-size: 42px;
}

來(lái)看效果哦:

你看實(shí)現(xiàn)了，但是我并沒(méi)有去定義更多的內(nèi)容，或者說(shuō)沒(méi)多打幾個(gè)字。這是 CSS 樣式的繼承，即子元素會(huì)繼承父元素的一些屬性。比如文字相關(guān)的屬性，大部分都是可繼承的。

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

本章代碼下載：本章代碼

本書是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(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