CSS應用實例(8)-無限伸縮的框架設計

一般來說,網站都會設計一、二個萬用框,可以在各種不同的位置擺放,並且可以隨內容調整大小。如果這個框是使用圖片設計、CSS排版,該如何撰寫呢?首先在圖片的設計上,框線的上下左右一定要留下可以延伸的區域,參考下面的示意圖:

可延伸的框

接著就要來製作圖檔了,利用Photoshop把四個角裁下來,並且在延伸區域抓一段可以重覆貼圖的區段。以上圖來說可以分解成下面八個圖檔,括號內是圖片的像素:

frame_corner-upper-left(264x78) frame_line-top(1x78) frame_corner-upper-right(64x78)
frame_line-left(64x1) frame_line-right(64x1)
frame_corner-lower-left(64x64) frame_line-bottom(1x64) frame_corner-lower-right(64x64)

從上面可以發現,同一個横排的高度必須一樣,直排比較沒有關係。這個框架重覆的區域只是線段,所以留下 1px 重覆貼就可以了;如果是重覆的花紋,就要根據花紋裁剪。接著就要安排 HTML Tag 的位置。我們一眼就可以看出表格可以分成三行,這只要透過三個 DIV 就可以達成,因為 DIV 會自動換行。所以初步的 HTML Tag 如下:

接下來,因為每一行都分成三格,所以理所當然我們要在 2~4 行的 DIV 內各加入三個 DIV 標籤。不過這個時候加入的順序並不是單純由左至右,因為我們希望中間的圖會不斷重覆,並且隨著內容伸縮,所以這個時候要把”伸縮的目標”放在最下面,變成這個樣子:

會這樣擺放的原因是因為,我們預期四個角都會設定absolute屬性,將它的位置固定住,但中間那一格並不是absolute,所以如果有Tag在它的後面,會被自動斷行(但它們必須要在相同的水平線上)。加上被設為absolute屬性的物件高度會被其它物件”無視”,並不會影響後面的標籤(參考版面配置),所以四個角的物件放在前面是比較合適的。

接著就要開始撰寫CSS了。首先為了確保每個物件原點(0,0)的位置,所有的 Tag 一定要加上 position 屬性(參考版面配置),四個角是 position:absolute,其餘則是 position:relative。接著我們可以把圖片利用 background-image 放上去,再設定它的寬和高。上下重覆的部份,只要設定高即可(寬度可無限延伸),而左右兩側的重覆區域則是設定寬即可(高度可無限延伸)。最後產生的CSS如下:

.frame { position:relative; }
.frame-top { height:78px; position:relative; }
.frame-upper-left {
    width:264px;
    height:78px;
    background-image:url(https://lh6.googleusercontent.com/-ySTCp573ZXY/UFVzMGtUGkI/AAAAAAAADVI/_FFQCpDYI2M/s264/frame01_corner-upper-left.png);
    position:absolute;
    left:0px;
}
.frame-upper-middle {
    height:78px;
    background-image:url(https://lh5.googleusercontent.com/-TA401NKSKOU/UFVzNqdVEqI/AAAAAAAADVw/gogDb1TbDTY/s78/frame01_line-top.png);
    position:relative;
    margin-left:264px;
    margin-right:64px;
}
.frame-upper-right {
    width:64px;
    height:78px;
    background-image:url(https://lh3.googleusercontent.com/-IQJ2qCoiBTU/UFVzM3rS4kI/AAAAAAAADVU/WHOLBEtF0xk/s78/frame01_corner-upper-right.png);
    position:absolute;
    right:0px;
}
.frame-middle { position:relative; }
.frame-left {
    width:64px;
    height:100%;
    background-image:url(https://lh5.googleusercontent.com/-S5QHPlAsj8k/UFVzNSDi5yI/AAAAAAAADVo/lkesn5jBcgI/s64/frame01_line-left.png);
    position:absolute;
    left:0px;
}
.frame-content {
    position:relative;
    margin-left:64px;
    margin-right:64px;
    text-align:left;
}
.frame-right {
    width:64px;
    height:100%;
    background-image:url(https://lh6.googleusercontent.com/-cDByXvv15M8/UFVzNXXzqdI/AAAAAAAADVk/sk9CXMAxHWI/s64/frame01_line-right.png);
    position:absolute;
    right:0px;
}
.frame-bottom { height:78px; position:relative; }
.frame-lower-left {
    width:64px;
    height:64px;
    background-image:url(https://lh4.googleusercontent.com/-aBooIN-MZYg/UFVzMMcyjGI/AAAAAAAADVQ/jWfjrIpd5cE/s64/frame01_corner-lower-left.png);
    position:absolute;
    left:0px;
}
.frame-lower-middle {
    height:64px;
    background-image:url(https://lh6.googleusercontent.com/-Ud_LpxF2o9o/UFVzMxnZ6LI/AAAAAAAADVY/jMBdjvBLvZY/s64/frame01_line-bottom.png);
    position:relative;
    margin-left:64px;
    margin-right:64px;
}
.frame-lower-right {
    width:64px;
    height:64px;
    background-image:url(https://lh4.googleusercontent.com/-T-3_VAp0syk/UFVzMJ5CUCI/AAAAAAAADVM/PVSCFfZABfQ/s64/frame01_corner-lower-right.png);
    position:absolute;
    right:0px;
}

第 8、22、51、65 行程式,是用來讓四個角定位在角落的語法。IE8 以上 absolute 屬性的元素會自動從父物件的左上角開始擺放(參考版面配置),但 IE7 不會主動移動,所以左上和左下的角也要特別指定 left:0px。

接著是中間那一排的位置必須指定。因為 absolute 的物件寬度會被”無視”,所以不指定位置的話,中間的物件也會從最左邊開始擺起。由於它的 position 是 relative (相對位置),所以不使用 left 屬性(絕對座標)指定,改用 margin-left 設定,所以寫 14、34、57 行的語法。右邊也是一樣的道理,如果不指定右邊界,系統預設就是和父元素一樣,右邊就會凸出去了,所以設定 15、35、58 行的 margin-right 來限制右邊界。指定的像素就是和角落物件的寬度一樣就可以了。

因為沒有指定框架的寬度,所以預設會和瀏覽器寬度一樣。使用的時候只要覆寫第 1 行 .frame 的寬度就好了,或是指定 32 行 .frame-content 的寬度也可以。這個框架的高度會隨著

裡面的內容自動調整。在 IE7 以上的瀏覽器都可以正常運作。