所有的讀者都可以通過此鏈接（https://code.pubu.im/reg/b6mebkgg18lbtrr）注冊，來和我們交流。
已付費的讀者請與我聯(lián)系，告知我您的支付寶賬號與常用郵箱，我會邀請您加入 VIP 交流頻道，方便我們更深入的探討代碼。
我就一直在想，我們應(yīng)該把這個頁面寫成什么樣的，是高大上還是……還好，后來我的懶惰打敗了我——寫個簡單的！
但是不管怎么說，再懶也得動手了，先寫個導航，嗯，雖然是個單頁面網(wǎng)站，但是還是可以有導航的。反正也沒老板指手畫腳，所以隨心所欲點挺好的。
其實說呢，寫個導航很簡單的，有啥?。吭蹅兒嫌嫼嫌嫲?，要個 Logo，幾個導航項（什么首頁啊，聯(lián)系啊，關(guān)于啊這類的），一個搜索（前邊我們學了主要功能代碼），最多再加個登陸注冊。這就是一般導航條（放這么多東西還叫導航條？）的所有內(nèi)容。
我說啦，咱就一個單頁面網(wǎng)站，一個 Logo 和一組導航項妥妥的了～。那我們就把他們寫出來哦～
<div id="nav">
</div>這段代碼寫在哪里知道吧，上一章的代碼里我已經(jīng)標識出來了哦，
然后我們同步的去寫 CSS，就是在我們前邊的 CSS 文件里寫下如下代碼：
#nav {
width:100%;
height:50px;
background:#F3F3F3;
}開始解釋啊，因為這是第一次，我會努力說的很詳細，以后會簡單些。
#nav 是說 id="nav" 的元素，就是先說名字，再說事情，那個張二狗啊，今天的戲里你去扮演旺財，穿黃色的戲服，再戴上長耳朵哦。叫了名字，就告訴他，大括號里就是你今天的行頭，都穿上就對了。
然后我們看看 #nav 今天都有什么行頭哦。width:100%; 這個是說寬度，寬度 100%，這里就又有問題了，這是誰的 100% ？百分比是有參照物的，那么在這里的百分比是說父元素的百分之多少，什么是父元素？顧名思義就是他上一層的元素，換言之是套在他外邊緊挨著的那一層（不是套在外邊就行，是緊挨著的?。?，所以 #nav 的父元素就是 <body></body>。為什么不是 <html></html> ？雖然也是套在外面，但他不是緊挨著的，中間還套了一層 <body></body>。所以， <body></body> 是父元素，而如果非要論起來 <html></html> 就是爺爺元素了（事實上沒人這么說，也沒這個名詞，在此只是為了解釋）。
現(xiàn)在 #nav 的寬度就和 body 的寬度一樣了，那高度呢？我們寫了 50px，這個就沒啥解釋的了。最后 background 設(shè)置的是背景，背景色的值為 #F3F3F3 （這個看不懂的朋友去研究一下 RGB 顏色的 HEX 格式），當然顏色也可以用 red，blue 之類顏色名稱表示。
然后我們就可以看看效果了，如果你寫對了的話基本應(yīng)該是這個樣子的：
來注意看灰色那塊就是我們剛才寫出來的效果。
然后你說了，看起來你想做的這個導航應(yīng)該是通欄的，但是好像左右沒到頭，上邊也差一點??！嗯，我來解釋一下，這不是我的另類的設(shè)計，這是我們寫代碼遇到的第一個問題，作為一個通欄導航，我當然希望他的上左右三面都緊貼著邊的，可是現(xiàn)在沒成功，為什么呢？
是因為瀏覽器對每個元素（標簽）都有一個默認的樣式（所以前邊我們說 div 的默認樣式幾乎為零，所以很好用），那么根據(jù)我剛給出的這個條件來判斷，雖然我們還不是很了解情況，但是也基本可以判斷出問題更可能出在 body 身上。
確實的，這里是因為 body 默認有一個外補（margin）造成的，關(guān)于外補（margin）我們晚些再講，現(xiàn)在先來解決問題，方法當然很簡單，就是把外補（margin）設(shè)置為零就可以了。但是一般的一些謹小慎微，希望不出任何意外的朋友會把內(nèi)補（padding）順便也設(shè)置為 0 ，而且既然 body 設(shè)置了，為什么不順便給 html 也來一發(fā)呢？所以 CSS 里面添加如下內(nèi)容：
html, body {
margin:0;
padding:0;
}大家注意了哦，上面代碼中的 html 和 body 分別指的是兩個標簽，二者兩個標簽有相同的 CSS 屬性，所以我們放在一起定義，我們用一個英文逗號來分隔兩個選擇器，然后后面大括號寫上他們的共同屬性，當然了更多個元素也是這樣的格式去寫，很方便是不是？就好像張三，李四你倆穿一樣的行頭！一個意思。
因為這個定義是最外層的，我們本著從整體到局部的原則，把他寫在前邊，而 #nav 的定義因為是內(nèi)層，所以放在后面，這樣符合邏輯順序的 CSS 是為了方便我們?nèi)蘸蟮拈喿x，是一個習慣問題。
所以我們現(xiàn)在的 main.css 文件全文如下：
/* 這是我寫的第一個 CSS 文件，內(nèi)心十分的激動，在這心潮澎湃之余，我想到了一個真理 —— 稻米鼠真帥！ */
html, body {
margin:0;
padding:0;
}
#nav {
width:100%;
height:50px;
background:#F3F3F3;
}index.html 文件全文：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我們的目標是搶前端的飯碗！</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
</div>
</body>
</html>來看看現(xiàn)在的效果哦：
終于三邊都挨上了，歐耶～
那么大家都看到了，其實 CSS 文件就是這樣一條一條的去定義元素的樣式，我們只要知道這個元素有什么樣式，和這個樣式都可以有什么屬性值就好。當然這些要靠我們的日常練習去積累，而不是死記硬背，一定要記住這一點。然后補充一些小知識哦～
在 CSS 里數(shù)值如果有單位就必須帶上單位，否則會出錯。但是有一個特殊情況是 0，因為無論什么單位，0 是等價的（幸好不用考慮攝氏度和華氏度），不會因為沒有單位產(chǎn)生歧義。
Html 里的屬性值我們卻常常省略單位，因為在 Html 里的屬性值若不特別說明，則默認單位是 px（像素）
本章學習卡片：卡片 16
本章代碼下載：本章代碼
本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內(nèi)容以主站為準：
未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多