不過顯然的，要是做個海報這么簡單碼農(nóng)們就不哭了。所以現(xiàn)在我們要做一些沒有設計師我們一樣玩的很 High 的工作。

你看我的海報其實還只有一個背景，上節(jié)課雖然加了鏈接，也不過是自欺欺人，沒內(nèi)容誰點擊啊？所以我們要開始添加內(nèi)容了。

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

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

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

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

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

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

相似度確實不低呢，所以啦，其實寫網(wǎng)頁就是那點東西，套來套去的，套的多了自然就熟練了，也就會用了。

在這之后是什么？往里面加東西啊。來，先加上這句：

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

當然了，我們知道這是一個不容置疑的事實。但是，你應該知道吧，上邊這句要放在 .post-content 里面哦，別放錯位置。

然后如果你刷新頁面的話……你會從這一刻開始懷疑人生。

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

那么現(xiàn)在我們怎么做呢，我先打一個不太恰當?shù)谋确饺ダ斫庖幌庐斍暗那闆r，padding 是內(nèi)補，內(nèi)部問題終究是好解決的。margin 是外補，這是一個要跟他的相鄰元素或者父元素產(chǎn)生相互影響的事情，于是就有點熱鬧了。眼下的問題是父元素對他的約束力不夠，就是當?shù)臎]管住孩子，孩子就開始淘氣了。怎么管住孩子呢？加一些特別的屬性就可以的，這個可以根據(jù)情況選擇各種屬性，比如給父元素加個內(nèi)補神馬的，但是這里我們并不希望加內(nèi)補，因為內(nèi)補會影響元素的尺寸。那就加一個語義上說得過去的屬性好了，反正我也挺隨心的。

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

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

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

看看效果：

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

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

然后看效果：

說真的，我仔細找了半天才找到那一行小字。現(xiàn)在我們很容易想到給他加上各種樣式，不過仔細想想，我們要加的樣式跟上面的 h1 元素好像有很多重復啊。這時候其實我們沒必要定義兩次。那個同學說用一樣的 class ，沒錯！這只是其中的一個方法，現(xiàn)在我們來試試另外一種。我去把 h1 的文字顏色（color）、文字對齊方式（text-align）的定義，移動到 #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;
}

來看效果哦:

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

本章學習卡片：卡片 29

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

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

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

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