頁面CSS技巧運用實例

頁面CSS技巧運用實例15.1修改滾動條顯示效果當(dāng)網(wǎng)頁的長度或者寬度超出當(dāng)前瀏覽器窗口長和寬的時候，在窗口的右邊和底部，就會出現(xiàn)滾動條。瀏覽者可以通過拖拽滾動條中的滑塊，或者單擊滾動條兩端的箭頭按鈕讓瀏覽器顯示網(wǎng)頁在屏幕外的內(nèi)容。15.1.1滾動條的結(jié)構(gòu)滾動條的結(jié)構(gòu)如圖15-1所示，分為四個部分，默認(rèn)是3D風(fēng)格顯示的：上（左）箭頭按鈕：使滑塊向上（向左）運動，令網(wǎng)頁上方（左邊）不在瀏覽器窗口的部分顯現(xiàn)出來。下（右）箭頭按鈕：使滑塊向下（向右）運動，令網(wǎng)頁下方（右邊）不在瀏覽器窗口的部分顯現(xiàn)出來?；瑝K：可以被鼠標(biāo)或者鍵盤的上、下、左、右鍵控制運動，起到了替代滾動條箭頭按鈕的作用，而且比它們控制的效果顯著?；瑝K軌道：滑塊在其上運動。滾動條的結(jié)構(gòu)

15.1.2通過樣式表來修改滾動條的外觀當(dāng)頁面上的表單改變了默認(rèn)的樣式之后，滾動條如果還是默認(rèn)的3D方塊和灰色，則多少有些美中不足，其實可以通過樣式表來修改滾動條的外觀，如代碼所示。

在IE瀏覽器中的顯示滾動條上的七種顏色

15.2利用Clip屬性進(jìn)行剪裁下面來講解一下前面章節(jié)中并未介紹、實際應(yīng)用也比較少的Clip屬性。15.2.1Clip屬性Clip這個詞在英文中的意思是裁剪，比如我們?nèi)ダ戆l(fā)就可以說是Getaclip。因此，CSS樣式屬性中的Clip屬性也可以把標(biāo)簽“裁剪”后再顯示。Clip屬性的用法如下：Clip:auto或者rect(numbernumbernumbernumber)具體各屬性值的含義如下：Auto：表示不剪切。Rect(numbernumbernumbernumber)：依據(jù)上、右、下、左，順時針的方向開始剪裁，從標(biāo)簽左上角的起點為(0,0)坐標(biāo)開始，每一邊顯示開始的坐標(biāo)位置。因此，如果number大于0，不為auto，就相當(dāng)于標(biāo)簽顯示的范圍縮小了，標(biāo)簽于是被剪裁了。當(dāng)其中任一數(shù)值被設(shè)置為auto時，此邊不剪裁。在應(yīng)用了Clip屬性后，剪裁區(qū)域外的部分是透明的，因此別的標(biāo)簽可以透過透明的區(qū)域顯示出來。注意必須將應(yīng)用Clip標(biāo)簽的position值設(shè)為absolute，才可以開始剪裁。15.2.2利用Clip屬性裁剪圖片利用Clip屬性可以做出不少的效果，有時候還能救急，比如：由于網(wǎng)頁上表格限制了寬度，現(xiàn)有的一幅圖片放不下，如果強行在<img>標(biāo)簽中修改大小，會影響圖片的顯示效果，為此需要修改圖片本身。不巧的是，美工休假了，同事們都不知道如何使用Photoshop來修改它。在這個時候，可以對圖片應(yīng)用Clip屬性，將不符合要求的部分裁剪掉，利用Clip屬性對圖片進(jìn)行裁剪

15.2.3利用Clip屬性創(chuàng)建多彩文字除了理解起來比較自然的裁剪圖片之外，Clip屬性還可以對文字進(jìn)行裁剪，下面介紹一個很有意思的效果。將兩段內(nèi)容相同但顏色不同的文字重合在一起，再通過分別對這些文字設(shè)置Clip屬性，使得兩段文字各自被裁剪的位置不同，合并形成一段上下部分顏色不同的文字。實現(xiàn)了這樣的效果。利用Clip屬性裁剪文字：多彩文字的效果

15.2.4Clip屬性值的進(jìn)一步思考我們看到Clip屬性值后面首先都是rect這樣的字符，熟悉英文的讀者可能已經(jīng)猜到了，這是rectangle的縮寫，表示長方形，結(jié)合裁剪的意義，也就是裁剪成長方形的意思，這樣也是符合后面的四個坐標(biāo)值設(shè)置的。那么，有沒有別的裁剪方式呢？截至目前還沒有。不過在W3C的官方文檔上，Clip屬性后面跟著的是shape參數(shù)，看來在人們的設(shè)想中確實有過不僅限于rect的想法，在今后的CSS版本中可能會實現(xiàn)。如果夢想變?yōu)楝F(xiàn)實的話，我們就能利用“圓型”、“心型”等等多種形狀的剪刀創(chuàng)造出更加多彩的特效文字。15.2.5Dreamweaver設(shè)置Clip屬性的小問題有很多讀者是利用Dreamweaver這一強大的網(wǎng)頁制作設(shè)計工具編輯修改CSS的，但它在設(shè)置Clip屬性的時候有一點點小問題：通過CSS管理面板和CSS定義對話框設(shè)置完Clip屬性后，在代碼中發(fā)現(xiàn)rect括號里面的四個值是用逗號分隔開的，因此在IE瀏覽器上會沒有效果。這時，需要自己把逗號變換成空格就可以了。15.3改變列表的樣式列表標(biāo)簽，即<ul>、<ol>和<dl>標(biāo)簽，在網(wǎng)頁中起到了很大的作用：它們可以使得內(nèi)容更具有條理性，更具有信服力。本節(jié)將講述如何利用CSS樣式規(guī)則來改變列表標(biāo)簽的效果。15.3.1列表標(biāo)簽介紹雖然我們在最初的幾章中就介紹了列表標(biāo)簽，但是為了內(nèi)容的完整和學(xué)習(xí)效果的強化，這里通過實際代碼復(fù)習(xí)一下。注意，列表標(biāo)簽和通常歸于表單家族的列表框是不同的。項目列表：用<ul>來表示，ul是unorderedlist，無序列表的簡寫，表明其中各項之間沒有次序關(guān)系。列表中的項目用<li>標(biāo)簽來表示。編號列表：用<ol>來表示，ol是orderedlist，有序列表的簡寫，和項目列表相反，其中各項之間有次序關(guān)系。當(dāng)然，這種次序關(guān)系需要使用者在寫代碼的時候就安排好。<ol>中的各個項目也是用<li>標(biāo)簽來顯示的。定義列表：用<dl>來表示，dl是definitionlist，定義列表的意思，用于名詞解釋等場合。與前兩種列表不同，<dl>列表有兩個子標(biāo)簽，<dt>標(biāo)簽代表名詞，<dd>標(biāo)簽代表含義。15.3.2修改列表項的項目符號項目列表標(biāo)簽的默認(rèn)Bullet為傳統(tǒng)的圓點，編號列表標(biāo)簽的默認(rèn)Bullet是遞增排序的阿拉伯?dāng)?shù)字，其實，CSS中還可以選擇其他的項目符號。表列出了所有主流瀏覽器支持的項目符號：主流瀏覽器支持的項目符號樣式Bullet名稱外觀square實心正方形disc實心圓circle空心圓decimal從1開始的正整數(shù)Decimal-leading-zero以0開頭的正整數(shù)，例如01，02等等Lower-roman小寫羅馬字母Upper-roman大寫羅馬字母Lower-alpha小寫英文字母Upper-alpha大寫英文字母Lower-latin小寫拉丁字母Upper-latin大寫拉丁字母none不顯示項目符號15.3.3列表項添加分隔符有時候由于列表項目比較多，容易使瀏覽者看不很清楚，因此，需要利用一些技巧來保持項目彼此的距離。這樣的方法多種多樣，比如：設(shè)置行高：利用line-height屬性將每一行的高度增加，字體不變的情況下，項目彼此的距離自然增大。設(shè)置內(nèi)間距或者外邊距：和行高類似，也可以改變兩個項目之間的距離。設(shè)置分隔符：所謂分隔符，并不是一個特別的標(biāo)簽，而是利用了邊框來實現(xiàn)的。在為列表項目增加邊框的時候，可以只顯示下邊框，從而達(dá)到了分隔符的作用。15.4實驗：利用列表標(biāo)簽創(chuàng)建導(dǎo)航菜單導(dǎo)航菜單，或者叫做導(dǎo)航條，是一個網(wǎng)站極為重要的組成部分。瀏覽者靠導(dǎo)航條的指引才能夠順利到達(dá)各個感興趣的頻道、欄目。圖是新浪網(wǎng)站某頁面的截屏：新浪網(wǎng)某頁的導(dǎo)航功能區(qū)

15.4.1面包屑路徑在圖中，有兩個區(qū)域起到了導(dǎo)航的作用，一個是頁面上方的導(dǎo)航條，另一個則是內(nèi)容上方的“面包屑路徑”，英文成為Scrum。之所以這么稱呼它是因為古時候的人進(jìn)入森林后為了防止迷路，總把一些面包屑灑在樹根旁邊標(biāo)記走過的路徑。網(wǎng)頁上的“面包屑路徑”同樣可以起到類似的作用，使瀏覽者不至于在復(fù)雜的站點中迷失方向。實現(xiàn)導(dǎo)航條可以有多種方法，本節(jié)介紹利用列表標(biāo)簽的方法。我們知道，列表標(biāo)簽顯示的時候是從上至下的，而導(dǎo)航條一般情況下卻是橫向的，這兩種事物看起來風(fēng)馬牛不相及。其實，列表標(biāo)簽由于默認(rèn)是塊元素，才默認(rèn)顯示成印象中的樣子，如果將其改變?yōu)樾袃?nèi)元素，和導(dǎo)航條就相似多了。15.4.2將列表標(biāo)簽轉(zhuǎn)化為行內(nèi)元素方法很簡單，之前的章節(jié)也多次使用過：利用display:inline樣式規(guī)則。代碼實現(xiàn)了一個轉(zhuǎn)化后的列表標(biāo)簽，文件命名為navibar-1.html。將列表標(biāo)簽轉(zhuǎn)化為行內(nèi)元素

15.4.3目標(biāo)導(dǎo)航條的外觀我們將要實現(xiàn)的導(dǎo)航條類似卓越購物網(wǎng)站上的樣子，如圖所示。卓越網(wǎng)的導(dǎo)航條

15.4.4目標(biāo)導(dǎo)航條的要求對于待實現(xiàn)的這個導(dǎo)航條，主要的需求如下：導(dǎo)航條上每個卡片都可以單擊，從而轉(zhuǎn)到相關(guān)頁面?？ㄆ哂羞吙颉Ｊ髽?biāo)懸停、單擊導(dǎo)航條某卡片后卡片可以改變顏色。