好啦，為了展示它的特性呢，它是誰(shuí)？不是你想的那個(gè)樣子啦，是為了展示我們要發(fā)布的這個(gè)根本不存在的 App 的某些引人入勝的特性，我們要多加幾張海報(bào)。你說(shuō)把前邊海報(bào)部分復(fù)制一下就 OK 啦，反正也是，但是我要是那么懶，你們還不打死我？再說(shuō)了，千篇一律的版式也不方便糊弄老板啊！所以下邊兩個(gè)海報(bào)的樣式總要變一變的。

第一張呢，左邊文字，右邊一張什么什么 LOGO 或者 ICO 什么的，哎呀，不說(shuō)那么高大上了，放個(gè)剪切畫的意思。第二張就是把這兩邊換換，左邊剪切畫，右邊文字，當(dāng)然啦，他們都有通欄的背景，這樣顯得符合潮流……其實(shí)是符合老板惡俗的審美啊。

那么開始我們的工作，第一張海報(bào)……算了，這么懶的我肯定是兩張一起寫了，首先是 Html ：

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

    </div><!-- .post-content End -->
</div><!-- #post-a End -->
<div id="post-b">
    <div class="post-content">

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

然后是一些基礎(chǔ)的 CSS 樣式控制，我不用講你也看得懂啦。你看你們老說(shuō)學(xué)不會(huì)啊、看不懂啊，現(xiàn)在為啥就能看懂了？切，根本就沒那么難嘛~

#post, #post-a, #post-b  {
    width: 100%;
    height: 450px;
}
#post {
    background: url(../images/bg.jpg) center -250px;
}
#post-a {
    background: url(../images/bg-a.jpg) center 0px;
}
#post-b {
    background: url(../images/bg-b.jpg) center -250px;
}
.post-content {
    width: 960px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    color: #EFEFEF;
    text-align: center;
}

以上是我修改/添加的 CSS ，大家看看發(fā)生了什么變化？為什么捏？#post, #post-a, #post-b 三者樣式區(qū)別不大，所以干脆放在一起定義一下相同部分，然后再分別設(shè)置背景好了。.post-content 樣式是可以共用的，那就共用好了，所以去掉 #post 的約束。然后來(lái)看看效果，這次有點(diǎn)長(zhǎng)……

現(xiàn)在開始填寫海報(bào)里的內(nèi)容，幾乎跟第一張海報(bào)是一樣的。什么什么？你說(shuō)我偷懶？分明就是復(fù)制了第一張海報(bào)在糊弄？其實(shí)你把下兩張海報(bào)的高度改低點(diǎn)（或者高點(diǎn)），然后設(shè)置個(gè)純色背景就挺高大上的，不過(guò)好像比現(xiàn)在的還簡(jiǎn)單……所以我沒偷懶好伐？！

現(xiàn)在給第一張海報(bào)加上一個(gè)圖標(biāo)，一段文字。Html 代碼如下：

<div id="post-a">
    <div class="post-content">
        <div class="post-text">
            <h3>帥的那樣讓人心醉</h3>
            <p>讓你忍不住多看了一眼又一眼</p>
        </div>
        <div class="post-icon">
            <img src="/project/easy-web-code-book/images/icon-a.png" alt="">
        </div>
    </div><!-- .post-content End -->
</div><!-- #post-a End -->

我多復(fù)制了兩層，所以呢，你應(yīng)該可以知道這代碼是寫在哪里的了。首先我們?nèi)タ纯串?dāng)前混亂的局面，然后我們?cè)偃ヒ?guī)范他的樣式。

看看，隨手一放，就是這么的別有風(fēng)味，現(xiàn)在我們開始設(shè)置一下他的樣式，等設(shè)置完成就變得俗不可耐，十分討老板歡心了。

.post-content .post-text {
    float: left;
    width: 510px;
    padding-top: 165px;
    font-size: 28px;
    line-height:  60px;
}
.post-content .post-text h3 {
    margin: 0;
    font-size: 36px;
}
.post-content .post-icon {
    float: left;
    width: 256px;
    height: 256px;
    padding: 97px;
}
.post-content .post-icon img {
    width: 256px;
    height: 256px;
}

這些 CSS 我就不逐一的解釋了啊，你們可以通過(guò)審核元素去理解他們?yōu)樯赌敲磳?。兩個(gè)元素都 float:left 是為了橫排；圖片占了 450×450 的面積，左邊剩下 510寬的面積給文字，通過(guò)一些屬性的設(shè)置使得文字在他的位置內(nèi)居中。

然后效果如下：

這基本就達(dá)到了我們的預(yù)期，當(dāng)然要說(shuō)嚴(yán)謹(jǐn)?shù)脑掃€要清除一下浮動(dòng)才好，當(dāng)然如果不清除其實(shí)也出不了什么問題，因?yàn)楦鞣N屬性的限制，現(xiàn)在的布局其實(shí)不至于亂掉，當(dāng)然只是表面上看起來(lái)，事實(shí)上道理并不是講的很通，反正加不加看你嘍。

現(xiàn)在第二張海報(bào)……其實(shí)好簡(jiǎn)單的，只要你把 Html 寫一下就好。

<div id="post-b">
    <div class="post-content">
        <div class="post-icon">
            <img src="/project/easy-web-code-book/images/icon-b.png" alt="">
        </div>
        <div class="post-text">
            <h3>其實(shí)做人要謙虛的</h3>
            <p>你看作者從來(lái)不說(shuō)自己帥</p>
        </div>
    </div><!-- .post-content End -->
</div><!-- #post-b End -->

然后就行了呢，因?yàn)樗玫降?CSS 我們?cè)谇斑叾家呀?jīng)定義了呢~好啦，看一下整體的效果就可以結(jié)束這節(jié)課了哦。（其實(shí)底下還有悄悄話，我不告訴你）

你看，你看，這效果還是看得過(guò)去的……吧？

其實(shí)我就是為了把各種情況演示一下啦，所以做的不倫不類的，你們可不許這樣，要認(rèn)真哦！困，我先去睡會(huì)。

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

本章代碼下載：本章代碼

本書是收費(fèi)的，不過(guò)交費(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

上一篇：第三章幾個(gè)小故事下一篇：第五十三章一百遍啊一百遍！

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

第三十一章 還是海報(bào)

第三十一章還是海報(bào)