在開(kāi)始的時(shí)候有一件事情我們一直說(shuō)后面再說(shuō)后面再說(shuō)，但是后來(lái)我忘了……為什么醬紫……

不過(guò)現(xiàn)在來(lái)講一點(diǎn)也不晚啊，我們來(lái)講一講導(dǎo)航里那個(gè)奇葩的鏈接地址的問(wèn)題，回過(guò)頭來(lái)改一下導(dǎo)航里的鏈接地址哦……

等等……為什么是改……因?yàn)槲液竺鏇](méi)按著那個(gè)寫(xiě)啊……額，我說(shuō)我寫(xiě)錯(cuò)了你能原諒我嗎？算了，我就這么寫(xiě)了，你來(lái)咬我呀！

<ul id="nav-items">
    <li class="nav-item"><a href="#">首頁(yè)</a></li>
    <li class="nav-item"><a href="#post">下載</a></li>
    <li class="nav-item"><a href="#post-a">特點(diǎn)</a></li>
    <li class="nav-item"><a href="#post-b">關(guān)于</a></li>
</ul>

有沒(méi)有覺(jué)得似乎看懂了什么？誒，鏈接到的好像是我們頁(yè)面中的的 ID 耶。嗯哼，挺好理解的吧？這個(gè)寫(xiě)法叫做錨點(diǎn)，可以鏈接（用來(lái)跳轉(zhuǎn)）到頁(yè)面的指定元素。事實(shí)上他可以用來(lái)跳轉(zhuǎn)到指定頁(yè)面的指定元素。比如寫(xiě)作：<a ></a>

這個(gè)效果大家可以去試試看，我就不截圖了，畢竟靜態(tài)圖片也不是很好表示。

然后加點(diǎn)小料，因?yàn)槔习宥酥潜?82 年的普洱過(guò)來(lái)說(shuō)：要?jiǎng)悠饋?lái)，動(dòng)次打次的節(jié)奏啊~~我的滑板鞋……

老板漸行漸遠(yuǎn)，我的內(nèi)心卻久久無(wú)法平復(fù)。還沒(méi)學(xué)到 Javascript ??！怎么做動(dòng)態(tài)？好在我們還有別的辦法進(jìn)行變通?，F(xiàn)在我們就來(lái)給高大上的二維碼部分做一個(gè)簡(jiǎn)單的動(dòng)態(tài)效果。

首先我們分析一下：我要做的是鼠標(biāo)滑到二維碼上二維碼放大的效果。那么這個(gè)效果中有一個(gè)小要點(diǎn)，就是放大前后的圖片哪個(gè)點(diǎn)的坐標(biāo)是不變的？這是一個(gè)放大的基準(zhǔn)點(diǎn)。假設(shè)是圖片的左上角位置不變，那么放大的時(shí)候就是圖片向右側(cè)和下方進(jìn)行延伸（拉伸）效果。當(dāng)然這個(gè)樣子的話可能顯得比較突兀（畢竟我們現(xiàn)在還沒(méi)辦法做過(guò)渡效果），所以我們選擇中心點(diǎn)不動(dòng)，放大時(shí)圖片向四周延伸的效果，這樣視覺(jué)的焦點(diǎn)基沒(méi)變，會(huì)覺(jué)得舒服一些。

其實(shí) Html 部分我們完全不需要修改，只要在現(xiàn)在的 CSS 文件上做些小手腳就可以了的。

#qrcode {
    float: right;
}
#qrcode img {
    width: 250px;
    height: 250px;
}

這是當(dāng)前相關(guān)的 CSS，因?yàn)楝F(xiàn)在的圖片已經(jīng)很大了，其實(shí)我們并不希望他更大，所以我們可以先把他弄的小一點(diǎn)，把放大的空間也預(yù)留出來(lái)。

#qrcode {
    float: right;
}
#qrcode img {
    width: 210px;
    height: 210px;
    padding: 20px;
}

現(xiàn)在圖片內(nèi)容的寬高各縮小了 40px，但是因?yàn)榧恿藘?nèi)補(bǔ)，所以它所占的面積并沒(méi)有變化，他的中心點(diǎn)也依舊在原來(lái)的位置。然后我們給圖片加一個(gè) :hover 狀態(tài)。

#qrcode img:hover {
    width: 250px;
    height: 250px;
    padding: 0;
}

其實(shí)就是鼠標(biāo)滑到上面的時(shí)候恢復(fù)到以前啊，來(lái)仔細(xì)看一看，認(rèn)真想一想，是不是很簡(jiǎn)單的一件事情？其實(shí)就憑一個(gè) hover 就可以做出很多好玩的效果啦~

然后學(xué)到這里你的寫(xiě)的怎么樣了呢？是不是比我的高大上許多倍？想不想發(fā)出來(lái)給大家看一看？下節(jié)課來(lái)教大家如何發(fā)布頁(yè)面到互聯(lián)網(wǎng)上。

本章代碼下載：本章代碼

本書(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