除非您是極簡(jiǎn)主義者，不然的話就我們之前做的頁面還是太單調(diào)了。在這一小節(jié)筆者將帶著您做一些頁面細(xì)節(jié)，順便補(bǔ)充一些 HTML 與 CSS 的若干瑣碎知識(shí)點(diǎn)。

如圖所示，我們要做的粉飾有兩部分，實(shí)際上也是我們經(jīng)常頁面裝飾。首先是頁面頭部增加一個(gè)魚的圖案。實(shí)際上只要您喜歡，您可以隨您的喜好把它添加到任何位置。這里只是把它添加到頭部作為一種示例。另外一個(gè)裝飾則是下方的頁碼。嚴(yán)格的說它并不只是一種裝飾，還有一些實(shí)際的用途。特別是在我們要展示的內(nèi)容比較多的時(shí)候，分頁是一個(gè)極好的選擇。

此外我們還要為接下來向動(dòng)態(tài)網(wǎng)站過渡做一些準(zhǔn)備，因?yàn)槟承┕δ軐?duì)于靜態(tài)頁面來說還是有一些困難的。當(dāng)然我們也就不再把它托管到 GitHub Page 上面了。

1.4.1 頁碼的制作

我們首先來解決的問題就是下方的頁面是怎么實(shí)現(xiàn)的。這實(shí)際上是 Foundation 中的 Pagination。您只需要把下面這段代碼復(fù)制到您需要的位置上。

<br/>
<ul class="pagination" role="navigation" aria-label="Pagination" style="text-align:center;">
  <li class="disabled">Previous <span class="show-for-sr">page</span></li>
  <li class="current">1</li>
  <li><a href="#0" aria-label="Page 2">2</a></li>
  <li><a href="#0" aria-label="Page 3">3</a></li>
  <li><a href="#0" aria-label="Page 4">4</a></li>
  <li class="ellipsis" aria-hidden="true"></li>
  <li><a href="#0" aria-label="Page 9">9</a></li>
  <li><a href="#0" aria-label="Page 10">10</a></li>
  <li><a href="#0" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
</ul>

任何一個(gè)能夠獨(dú)當(dāng)一面的前端工程師都應(yīng)該知道
是換行的意思。這是為了讓我們的頁面和之前的內(nèi)容分開一行，不然它會(huì)緊貼著之前的內(nèi)容。這看起來可不太美觀。而至于
標(biāo)簽，它直接就是一個(gè)閉合的標(biāo)簽。因?yàn)槟荒馨岩粋€(gè)換行符拆開，在其中加上什么內(nèi)容。

而我們的頁面也實(shí)際上是用列表實(shí)現(xiàn)的。這里有一個(gè)技巧，即很多成組出現(xiàn)的東西都可以使用列表來做。當(dāng)然您需要通過編寫 css 來調(diào)整它的樣式。

現(xiàn)在您會(huì)發(fā)現(xiàn)您的頁面選中頁并不是紅色的，它實(shí)際上是一個(gè)藍(lán)色的方塊。這和我們頁面的主題顏色不同。所以我們要修改它，使它和我們的主題顏色一致。

這時(shí)候我們就要去找到我們的 css 文件。實(shí)際上這個(gè)樣式在 foundation.min.css 文件中，然而這是一個(gè)經(jīng)過壓縮的文件，我們打開以后也很難找到我們需要修改的部分。所以我們我們應(yīng)該找到 foundation.css 這個(gè)文件進(jìn)行修改。當(dāng)修改完成后在將其壓縮為 foundation.min.css 文件。

您知道嗎？

*.min.css一般作為經(jīng)過代碼清洗和壓縮后的css文件，它可以提高我們頁面的加載速度。然而在開發(fā)的過程中使用它往往是不方便的。所以我們一般的做法是在開發(fā)和調(diào)試的過程中使用未經(jīng)壓縮的css文件，之后再將其壓縮。這里需要修改頁面中樣式表的連接，就我們的例子來說我們應(yīng)該在開發(fā)和調(diào)試的過程中把樣式表的連接改為<link rel="stylesheet" href="css/foundation.css">

我們首先要在css文件中找到 pagination 這個(gè)類，再找到它下面的 current 這個(gè)類。

.pagination .current {
    padding: 0.1875rem 0.625rem;
    background: #990000;
    color: #fefefe;
    cursor: default;
}

這里我們只需要把它的 background 屬性改為紅色就可以了。

1.4.2 選擇器小課堂

我們來講解一些 css 中比較難理解的一個(gè)東西就是選擇器。對(duì)應(yīng)我們這里例子，選擇器當(dāng)然是 .pagination .current ，沒錯(cuò)這例子里面的選擇器既不是 .pagination 也不是 .current 而是它們整體作為了一個(gè)選擇器。這種選擇器的學(xué)名叫做嵌套選擇器。

一些剛剛上手的前端工程師總是搞不清楚 css 中的選擇器，畢竟 css 的語法大致上已經(jīng)簡(jiǎn)單到我們只需要看懂那些單詞的含義就可以猜出來它到底是干什么用的。當(dāng)然這樣的語義化編程也有一個(gè)嚴(yán)重的問題就是對(duì)于一些剛剛上手的新人來說很容易忽視一些基礎(chǔ)。現(xiàn)在筆者就來給您補(bǔ)上這一課。

首先您必須知道 css 的基礎(chǔ)形式的選擇器大致可以分為三種。第一種就是用標(biāo)簽名作為選擇器的，這種選擇器一般都用于全局樣式的設(shè)置。譬如說您把一個(gè) MarkDown 的文檔渲染成 HTML 文件的話。就推薦用標(biāo)簽名做選擇器來設(shè)置樣式，因?yàn)檫@樣的頁面樣式比較統(tǒng)一，而且比較簡(jiǎn)單。用標(biāo)簽名作為選擇器更方便后期維護(hù)。

第二種則是用id作為選擇器，這種選擇器的特點(diǎn)就是在id名前加上了一個(gè)#號(hào)。有一些工程師認(rèn)為id選擇器并不是很好用，因?yàn)樗⒉蝗珙愡x擇器好維護(hù)。（其實(shí)它也有自己的用武之地）另外需要特別注意的是id名不要以數(shù)字開頭，否則會(huì)在火狐瀏覽器中會(huì)出現(xiàn)問題。我們?cè)谕ǔ５拈_發(fā)中見到這種選擇器往往并不如另外兩種選擇器多。（某些專門開發(fā)除外，而且有的時(shí)候id選擇器還是很方便的）

第三種則是我們最經(jīng)常打交道的類選擇器。類選擇器是比較好維護(hù)的一種選擇器。我們很方便的可以通過它對(duì)具有相似特征的事物的樣式進(jìn)行設(shè)置和維護(hù)。一般來說我們見到這種選擇器的情況是最多的。

接下來我們要講的則是分組、嵌套以及組合選擇符。首先要講的是分組。這件事實(shí)際上非常好理解。譬如說我們要把所有的標(biāo)題都設(shè)置成黑體，畢竟通常情況下標(biāo)題的字體不會(huì)有什么變化，只是大小有一些變化。那么我們就可以把選擇器分組寫成： h1, h2, h3, h4, h5, h6 這大大提高了我們的開發(fā)效率也節(jié)約了我們的維護(hù)成本。因?yàn)槲覀冎恍枰S護(hù)一處的字體，所有的字體都會(huì)跟著發(fā)生變化。（當(dāng)然這仍然遵守 css 后面的樣式會(huì)把之前的樣式覆蓋掉的法則）

其次我們要講嵌套，嵌套和組合選擇符中的后代選擇符實(shí)際上是一回事兒。.pagination .current 就是說具有 pagination 類的元素下的 current 類。這種嵌套可以應(yīng)用于任意的基礎(chǔ)選擇器中。您也可以為所有 pagination 類下的 div 標(biāo)簽設(shè)置樣式。我們做嵌套的時(shí)候都是以空格進(jìn)行分割。

然后則是直接子元素選擇器，譬如說 div>p 則是 div 標(biāo)簽下的直接 p 標(biāo)簽。這和 div p 這種后代選擇器的區(qū)別是：后代選擇器會(huì)對(duì)所有 div 標(biāo)簽下的 p 標(biāo)簽設(shè)置樣式，而直接子元素選擇器則只對(duì) div 標(biāo)簽下面一層的 p 標(biāo)簽設(shè)置樣式。即只對(duì)直接的子元素設(shè)置樣式。如果 div 標(biāo)簽下間隔了其他標(biāo)簽則不會(huì)對(duì)其他標(biāo)簽下的 p 設(shè)置樣式。

用加號(hào)表示的是相鄰兄弟選擇器，譬如 div+p 則是對(duì) div 標(biāo)簽后面的第一個(gè)臨接 p 標(biāo)簽進(jìn)行樣式設(shè)置。用波浪線表示的是普通兄弟選擇器，譬如 div~p 則是對(duì) div 標(biāo)簽后面所有臨接的 p 標(biāo)簽進(jìn)行樣式設(shè)置。

最后要講的則是偽類和偽元素。顧名思義，它們都是假裝是一個(gè)類以及假裝是一個(gè)元素。它們都是在其他的選擇器后面加上一個(gè)冒號(hào)再加上偽類或者偽元素的。偽類則是用于設(shè)置像鼠標(biāo)滑過（hover）這樣的樣式，偽元素則是用于設(shè)置像第一個(gè)字母（first-letter）這樣的樣式。

1.4.3 裝飾圖片的插入與剪裁

現(xiàn)在我們來插入魚的裝飾圖片。插入一張圖片本身是簡(jiǎn)單的，您只需要寫：

<i mg src="img/fish.png"/>

而插入一張圖片作為裝飾圖片卻不這么簡(jiǎn)單。因?yàn)檫@張圖片并不會(huì)處于一個(gè)我們想要的位置上。我們首先要對(duì)這張圖片的層級(jí)進(jìn)行調(diào)整：

style="position:absolute;z-index:1;"

當(dāng)您使用 z-index 則需要配合 position:absolute 使用。否則您的層級(jí)設(shè)置并不會(huì)顯現(xiàn)。

這里您如果想讓下方的按鈕浮上來還需要對(duì) css 文件進(jìn)行修改。我們?yōu)?header-subnav 類增加以下兩個(gè)屬性：

position:absolute;
z-index:2;

您知道嗎？

當(dāng)您編寫 css 文件時(shí)，建議您在開頭添加 @charset "UTF-8"; 以保證您的 css 會(huì)按照 UTF-8 編碼保存、傳輸、解析。

接下來我們則要對(duì)這張圖片進(jìn)行剪裁，常規(guī)的做法是使用 clip 屬性，用 rect 進(jìn)行剪裁，注意使用 rect 進(jìn)行剪裁的時(shí)候輸入的剪裁值的順序是上、右、下、左，而不是上、下、左、右，也不是對(duì)角線。（我們其實(shí)已經(jīng)對(duì)這種從上方開始以順時(shí)針方向選擇的值比較熟悉了）這種方法適合比較精確的圖片剪裁，即原圖是把多張圖片合并成一張圖片的這種情況。這和我們現(xiàn)在面臨的把一張獨(dú)立的圖片用于裝飾作用是不太一樣的。所以我們要使用的是另一種方法的剪裁。

我們要對(duì)圖片的上一層加入樣式屬性：

style="overflow:hidden;"

然后只需要對(duì)圖片的大小和位置再進(jìn)行調(diào)整即可完成剪裁，對(duì)于我們這個(gè)例子來說則是：

<header class="header" style="overflow:hidden;">
  <h1 class="headline">Liu's Homepage</h1>
  
<i mg src="img/fish.png"/>
  <ul class="header-subnav">
    <li><a href="#" id="sub_index" class="is-active">Index</a></li>
    <li><a href="#" id="sub_works">Works</a></li>
    <li><a href="#" id="sub_notes">Notes</a></li>
    <li><a href="#" id="sub_resume">Resume</a></li>
  </ul>
</header>