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

導(dǎo)航我還沒玩夠，哼哼，我要寫一個帥點(diǎn)的，這樣我們就可以順便學(xué)一些新鮮的玩意了。

首先左下角浮動一個按鈕，哎呀，這個寫起來跟右下角的一樣呢~我就不多廢話了，對了，區(qū)別有點(diǎn)，就是這次我們不用鏈接了。

<div id="show-nav"><div class="button">我<br>是<br>菜<br>單</div></div>

然后我們開始對它進(jìn)行美化，要是還跟右側(cè)的按鈕一樣，這頁面豈不丑死！來來，我們來寫一個長長的 CSS 樣式。

#show-nav {
    position: fixed;
    left: 0;
    bottom: 120px;
}
#show-nav .button {
    width: 16px;
    height: 64px;
    padding: 4px;
    position: relative;
    background: #AA0000;
    border: 5px;
    border-style: solid;
    border-color: #FFF;
    border-radius: 0 16px 16px 0;
    border-left: none;
    box-shadow: 2px 2px 18px #333;
    font-size: 12px;
    color: #FCFCFC;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 99;
}

呵，有點(diǎn)長，我們慢慢講。#show-nav 現(xiàn)在只負(fù)責(zé)定位，那么他的 CSS 很容易解讀了，只是簡單的設(shè)置了定位方式和位置而已。

#show-nav .button 主要負(fù)責(zé)樣式，其實(shí)大部分屬性我們都是可以自己看明白的，我就不反反復(fù)復(fù)地去講了，否則……估計(jì)有人要跟我叫“婆婆”了。

position: relative; 這個屬性又是一個助攻，借助它使得元素可以設(shè)置 z-index 屬性。而并不是用它去影響元素位置。當(dāng)然也可以說他影響了元素在層級上的定位。

邊框 border 這個復(fù)合屬性被我拆開來寫了，先完成各種邊框的定義之后，又用 border-left: none; 把左側(cè)的邊框干掉了。其他都好理解了，然后有一個新的屬性是 border-radius，這個設(shè)置的是邊框的圓角，可以設(shè)置一個值，代表圓角的半徑，四個角的圓角半徑相同?，F(xiàn)在我設(shè)置了四個值，顯然是把四個角分別設(shè)置了。四個值的順序是：左上、右上、右下、左下，依舊是順時針旋轉(zhuǎn)，所以記住從左上角開始就夠了。

box-shadow 是指元素的陰影，屬性是三個值和一個顏色，前三個值分別是 X軸偏移量，Y軸偏移量，陰影擴(kuò)散大小，最后的顏色當(dāng)然就是陰影的顏色值了。這個不懂就試一試，實(shí)踐是最好的學(xué)習(xí)方法，改改數(shù)值，看看效果立刻就明白了。

cursor 是說鼠標(biāo)指針樣式，當(dāng)然是限定鼠標(biāo)在這個元素之上的時候，pointer 標(biāo)識的就是那個小手的樣子，不知道？拿鼠標(biāo)指向一個鏈接，就是這個樣子的。

剩下寬高，行高，文字居中這些確定了文字的位置，你可以想一想我是怎么計(jì)算的，如果想明白了就修改數(shù)值看看，看你是否可以把他搞到另外的尺寸而保證文字居中。

那么現(xiàn)在我們把一個簡單的元素搞得復(fù)雜了，然而仔細(xì)想想，也并沒有做什么很奇特的事情。CSS 也不過就是為每個元素統(tǒng)籌安排這點(diǎn)有限的屬性罷了。

那么來看看我們左側(cè) Sao 紅的按鈕吧~

本章代碼下載：本章代碼

本書是收費(fèi)的，不過交費(fèi)憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

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

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me