|
二、解決彈性圖片
我們看看上面哪張圖片，要做成彈性布局，就要解決頁(yè)頭圖片的動(dòng)態(tài)縮放。而這是一張圖片，我們都知道圖片是沒(méi)有辦法隨比例縮放的，該怎么辦呢？
我們可以換一個(gè)思維方式，將這張圖片在PS中做一點(diǎn)改動(dòng)，我們可以將這張圖片分割成左右兩部分，并將它們合并成一張圖片。如下圖所示：
圖二
第一圖片在容器中以背景定位的方式左上定位，而第二張片則右下定位，用兩個(gè)容器分裝兩張圖片，內(nèi)層的圖片級(jí)別比外層圖片級(jí)別高，它會(huì)浮動(dòng)到第一張圖片上蓋住它，當(dāng)然這第二張要做成透明底色的png或gif圖片，因?yàn)閜ng-24位透明圖片在IE6下不受支持，所以我們改成PNG-8位的透明圖片，這樣雖說(shuō)圖片質(zhì)量上有點(diǎn)影響，但可以保證在IE6中暢通無(wú)阻。
所以頁(yè)頭的結(jié)構(gòu)層應(yīng)該是如下的樣子：
<div id="header">
<div id="inhead">
<p>頁(yè)頭內(nèi)容</p>
</div>
</div>
針對(duì)這樣的結(jié)構(gòu)我們可以寫(xiě)出如下的樣式：
外層樣式：
#header{
height:150px;
width:100%;
background:#000 url(image/header-bg.png) no-repeat left top;
}
內(nèi)層樣式：
#inhead{
height:150px;
width:100%;
background:url(image/header-bg.png) no-repeat right bottom;
text-align:center;
color:#fff;
}
經(jīng)過(guò)這樣的改進(jìn)后，我們的頁(yè)頭就做成彈性的圖片，它在瀏覽器中顯示就應(yīng)該如下：
圖三
這樣，一個(gè)彈性布局就算基本完成了。最終的效果如下圖所示：
圖四
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 彈性流體布局 [1] 下一頁(yè) 彈性流體布局 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 彈性流體布局 [2]
