頁面CSS技巧運用實例

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

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

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

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

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

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

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

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

15.4.4目標導航條的要求對于待實現(xiàn)的這個導航條，主要的需求如下：導航條上每個卡片都可以單擊，從而轉到相關頁面?？ㄆ哂羞吙颉Ｊ髽藨彝！螕魧Ш綏l某卡片后卡片可以改變顏色。