頁(yè)面CSS技巧運(yùn)用實(shí)例

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

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

在IE瀏覽器中的顯示滾動(dòng)條上的七種顏色

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

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

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

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

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

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