|
我們再將左右邊框合并成一張圖片，如下圖所示：
圖三
左右邊框是需要縱向垂直平鋪的，所以一定要注意它們的寬度值，這需要精確定位：
.m_l{width:15px;background:url(../image/l_rborder.gif) repeat-y left top;} /*左邊框*/
.m_r{ width:15px;background:url(../image/l_rborder.gif) repeat-y right top;} /*右邊框*/
對于上下邊框圖片，我們也采用合并的方法，有一點(diǎn)需要注意，這兩張圖片是一張很寬的圖片，其寬度值達(dá)到2000px，我是想讓它們能在更寬的屏幕上能夠通用，它們具有一個左右漸變的背景色，其中間色彩比兩側(cè)淺，所以我將兩側(cè)的背景進(jìn)行了延伸，這樣我可以用background-position的center值來進(jìn)行居中定位，就可以將圖片中間始終定位在容器的中間。
.t_m{background:url(../image/u_dborder.gif) no-repeat center top; }/*上邊框*/
.b_m_m{background:url(../image/u_dborder.gif) no-repeat center bottom;} /*下邊框*/
在本案例中，比較煩雜的地方是底部區(qū)域中的一些控制按鈕，這個按鈕都是采用浮動，相對定位加絕對定位來進(jìn)行精確設(shè)置的。具體代碼就不一一列舉了，要了解詳情請查看源代碼。我只針對這里面的兩個拖動欄的制作作一下說明。
我們可以看到在本案例中有兩個進(jìn)度欄，一個是進(jìn)度欄，一個是調(diào)整音量欄，其實(shí)它們的制作方法是一樣的。
其結(jié)構(gòu)是如下：
<div class="progressbar">
<div class="leftbar" id="progressbar">
<span class="rightbar" id="idBar">
<b class="drawbar">進(jìn)度拖動欄</b>
</span>
</div>
</div>
其樣式如下：
.progressbar{float:left;width:95%;height:5px;margin-top:3px;margin-bottom:5px; position:relative;}
.leftbar{width:100%;height:5px;font-size:0%;background:url(../image/splitbar.gif) repeat-x left bottom;}
.rightbar{float:right;width:50%;position:relative;height:5px;font-size:0%;background:url(../image/splitbar.gif) repeat-x left top;}
.drawbar{display:block;width:11px;height:11px;position:absolute;top:-3px;left:0;background:url(../image/bar.gif) no-repeat left top;text-indent:-9999px;}
Leftbar這個div是左側(cè)綠色的進(jìn)度槽，它的寬度其實(shí)是100%，它在下面，它的上面是rightbar這個div，為了演示，我將它的寬度設(shè)置為50%，并將它設(shè)置為向右浮動，因?yàn)樗荓eftbar的子容器，所以它會遮蓋住Leftbar的右邊50%的寬度，并將背景圖設(shè)置為一個灰色圖片，這樣就有了點(diǎn)進(jìn)度在50%的樣子了，然后我在rightbar中再加了一個子容器，它是用來加載那個綠色拖動欄的小圖標(biāo)的。我們將它設(shè)置為絕對定位，讓它浮在rightbar這個父容器的上面，因?yàn)檫@個小圖標(biāo)的高度比rightbar高，所以將它向上偏移了3像素，讓它看起上下是垂直居中的樣子。這樣一個拖動欄就算制作成功，當(dāng)然因?yàn)檫�沒有加入js功能的原因，所以目前它還不能拖動，為了以后js功能的完善，我在這兒為這兩個容器加入了一個ID，作為js代碼的鉤子。
至于音量進(jìn)度欄，其設(shè)置方式是一樣的，只是它少了一個拖動圖片罷了。
然后我們再給“全屏”和“寬屏”這兩個按鈕加入了一點(diǎn)js代碼，讓它能演示這種布局在寬高值變化時的狀態(tài)。
Ok，一個比較漂亮的播放器基本布局就算完成了，當(dāng)然它目前只是一個花架子，你可以加入播放功能來完善它。
本模型為了演示九宮格的強(qiáng)大自適應(yīng)功能，只對右下角的三個按鈕加入了js功能，你可以點(diǎn)擊這幾個按鈕來演示九宮格在寬高值放大的情況下的完美表現(xiàn)。
本模型在以下瀏覽器中測試通過：
IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
點(diǎn)擊這兒下載本演示模型的壓縮包：下載Demo
總結(jié)：
本系列文章在這一篇后就暫時告一段落，塵埃落定之際，我們應(yīng)該反思一下，它的應(yīng)用是否就僅局限于此呢，NO！九宮格布局可以應(yīng)用的地方是很多的，比如現(xiàn)在的網(wǎng)頁設(shè)計中，對于一個個區(qū)域版塊，我們都可以應(yīng)用它，這種布局設(shè)計特別適用于圖形設(shè)計要求比較高的地方。當(dāng)然對于這種布局的制作可能花費(fèi)的時間比一個普通的設(shè)計要多得多，針對具體環(huán)境具體運(yùn)用了。
后記：
本系列教程試圖通過由淺入深的方式將這種布局設(shè)計帶給大家，古人常說：授人以魚，不如授人以漁。希望大家能融會貫通，將它發(fā)揚(yáng)光大，當(dāng)然因本人水平有限，如果有講解不妥之處，敬請原諒，也希望大家雅正!
如果在本教程中有什么疑問，可以直接在我的博客上提出來，或電郵我。謝謝！
原文：http://www.cnblogs.com/binyong/archive/2009/06/29/1512909.html
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2936289-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/6830.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 九宮格應(yīng)用案例:極酷網(wǎng)頁播放器 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 九宮格應(yīng)用案例:極酷網(wǎng)頁播放器 [2]
