<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位練習(xí)</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        #main {
            width: 960px;
            margin: 0 auto;
        }
        #logo {
            height: 120px;
            margin: 10px 0;
            background: #F3F3F3;
        }
        #post {
            height: 300px;
            margin: 10px 0;
            background: #F3F3F3;
        }
        #footer {
            height: 160px;
            margin: 10px 0;
            background: #F3F3F3;
        }
        #nav {
            height: 36px;
            margin: 10px 0;
            background: #333;
        }
    </style>
</head>
<body>
    <div id="main"><!-- 頁(yè)面內(nèi)容，寬 960 Start -->
        <div id="logo"></div>
        <div id="nav">
            <!-- 后面的 Html 結(jié)構(gòu)寫(xiě)在這里，因?yàn)槲覀円獙?xiě)一個(gè)導(dǎo)航 -->
        </div>
        <div id="post"></div><!-- 這是海報(bào) -->
        <div id="post"></div>
        <div id="post"></div>
    </div><!-- 頁(yè)面內(nèi)容，寬 960 End -->
    <div id="footer"></div><!-- 這是一個(gè)頁(yè)尾 -->
</body>
</html>

這些都看得懂了吧，你看，簡(jiǎn)單的幾行一個(gè)基本的頁(yè)面結(jié)構(gòu)就出來(lái)了，難嗎？理解了就真的沒(méi)什么了。自己去看下效果，我不截圖了，這些只是給我們今天的主角一個(gè)舞臺(tái)而已。

然后來(lái)寫(xiě)個(gè)導(dǎo)航，也沒(méi)啥大不了的，輕車熟路啊~

<ul>
    <li>首頁(yè)</li>
    <li>分類 &#9660;</li>
    <li>關(guān)于</li>
    <li>聯(lián)系</li>
    <li>福利</li>
</ul>
<div class="clear"></div>

他的 CSS 如下：

#nav ul {
    margin: 0;
    padding: 0;
    float: left;
}
#nav ul>li {
    margin: 0;
    padding: 0 35px;
    list-style: none;
    float: left;
    color: #FCFCFC;
    line-height: 36px;
}
.clear {
    clear: both;
}

這也全是前面學(xué)過(guò)的內(nèi)容，我們不多說(shuō)，鏈接我不寫(xiě)了，反正這也不是我們這次的重點(diǎn)，我們盡量寫(xiě)的清爽一些。

然后接是一個(gè)新的選擇器 > 表示某元素的子元素里的什么。#nav ul>li 就是說(shuō) #nav ul 的所有是 li 子元素。就這么說(shuō)吧，以前我們說(shuō) #nav ul li，是說(shuō)這個(gè) ul 的所有后代，哪怕是七十八代玄孫，只要叫 li ，那就有一個(gè)算一個(gè)?，F(xiàn)在 #nav ul>li 就只說(shuō)他兒子輩里面叫 li 的，跟其他輩分沒(méi)有毛關(guān)系了。

你說(shuō)我們寫(xiě)了這么半天學(xué)過(guò)的東西，沒(méi)見(jiàn)到啥區(qū)別啊。嗯……你看到分類那一項(xiàng)我寫(xiě)了個(gè)向下的三角箭頭么？我們要給他寫(xiě)一個(gè)下拉菜單，不過(guò)……打字打得手疼了，下節(jié)課再繼續(xù)……

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

alay9999@163.com （劉源）

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

主站首發(fā)： http://coffee.zji.me/
Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
簡(jiǎn)書(shū)： 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

上一篇：第四十三章定位實(shí)例（四）下一篇：第二十七章首屏大海報(bào)（一）

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

第四十章 定位實(shí)例（一）

第四十章定位實(shí)例（一）