(義務(wù)編者：帝位庫)
.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;}
.rightbar{float:right;width:50%;position:relative;height:5px;font-size:0%;background:url(../image/splitbar.gif) repeat-x left top;}
.leftbar{width:100%;height:5px;font-size:0%;background:url(../image/splitbar.gif) repeat-x left bottom;}
.progressbar{float:left;width:95%;height:5px;margin-top:3px;margin-bottom:5px; position:relative;}
其款式如次：
</div>
  </div>
    </span>
      <b class="drawbar">速度拖動欄</b>
    <span class="rightbar" id="idBar">
  <div class="leftbar" id="progressbar">
<div class="progressbar">
其構(gòu)造是如次：
咱們能夠看到正在該案例中有兩個速度欄，一度是速度欄，一度是調(diào)動高低欄，實在它們的制造辦法是一樣的。
.m_r{ width:15px;background:url(../image/l_rborder.gif) repeat-y right top;} /*左邊框*/
.m_l{width:15px;background:url(../image/l_rborder.gif) repeat-y left top;} /*右邊框*/
左左邊框是需求縱向垂直平鋪的，因為定然要留意它們的幅度值，這需求準(zhǔn)確定位：
圖三

咱們再將左左邊框兼并成一張圖片，如次圖所示：

 

/*右下角*/
.b_r{ background:url(../image/round.gif) no-repeat right bottom;}
/*左下角*/
.b_l{background:url(../image/round.gif) no-repeat left bottom;}
/*右上方*/
.t_r{background:url(../image/round.gif) no-repeat right top;}
/*左上角*/
.t_l{ background:url(../image/round.gif) no-repeat left top;}
正在上圖中我為了讓自己看得細(xì)心小半，多少張圖片的接壤處用輔佐線畫了進(jìn)去，咱們使用圖片定位原理將它們辨別流動正在四個拐角上。這三篇作品都是根本原理的解說，沒有一度無力的使用案例來證實這種原理能否準(zhǔn)確，能夠有些冤家曾經(jīng)有點急沒有可煩，也有網(wǎng)友請求我能需要案例。詳細(xì)代碼就沒有逐個羅列了，要理解概況請檢查源代碼。哎，該署都是題外話，還是來看看咱們的一度極酷播放器是如何設(shè)想進(jìn)去的吧！
    正在后面的三篇系列作品中，我對于宮調(diào)格格局作了細(xì)致的引見。千萬正在制造中還是有些技巧能夠幫咱們更好地的實現(xiàn)使命。
正在該案例中，比擬煩雜的中央是底部海域中的一些掌握旋鈕，某個旋鈕都是采納浮動，絕對于定位加相對于定位來停止準(zhǔn)確安裝的。那樣一度拖動欄就算制造順利，千萬由于還沒有退出js性能的緣由，因為眼前它還沒有能拖動，為了當(dāng)前js性能的完美，我正在這兒為這兩個器皿退出了一度ID，作為js代碼的鉤子。
正常關(guān)于那樣一度有豐盛顏色的播放器來說，都是請求其寬高值是能夠靜態(tài)調(diào)動，因而那樣的圖形用宮調(diào)格來做是無比適宜的取舍。我只對準(zhǔn)于這外面的兩個拖動欄的制造作一下注明。先從一度根本格局動手，將正在制造進(jìn)程中遇到的成績逐個停止體會說。
.b_m_m{background:url(../image/u_dborder.gif) no-repeat center bottom;} /*下邊框*/
.t_m{background:url(../image/u_dborder.gif) no-repeat center top; }/*上邊框*/
關(guān)于高低邊框圖片，咱們也采納兼并的辦法，有小半需求留意，這兩張圖片是一張很寬的圖片，其幅度值到達(dá)2000px，我是想讓它們能正在更寬的銀幕上可以通用，它們存正在一度內(nèi)外突變的背風(fēng)光，其兩頭顏色比兩側(cè)淺，因為我將兩側(cè)的背景停止了蔓延，那樣我能夠用background-position的center值來停止從中定位，就能夠?qū)D片兩頭一直定位正在器皿的兩頭。Leftbar某個div是左側(cè)綠色的速度槽，它的幅度實在是100%，它正在上面，它的下面是rightbar某個div，為了演示，我將它的幅度安裝為50%，并將它安裝為向右浮動，由于它是Leftbar的子器皿，因為它會覆蓋住Leftbar的左邊50%的幅度，并將背景圖安裝為一度灰色圖片，那樣就有了點速度正在50%的形狀了，而后我正在rightbar中再加了一度子器皿，它是用于加載那個綠色拖動欄的小圖標(biāo)的。因而，正在這一篇作品中，我將引見一度宮調(diào)格案例—極酷的播放器。它們正在款式表中是如次形式來界說的：
圖二

正在本例中我將四角的圖片兼并成了一張圖片，它們看起該當(dāng)就是上面某個形狀：
千萬原理我也沒有再重述了，請參考我的系列作品中的《堅沒有可摧的宮調(diào)格格局》，某個使用案例就是對準(zhǔn)于它來完成的。比方css sprites技能（能夠檢查我的另一篇作品《css sprites圖片背景優(yōu)化技能》），它能有益地縮小圖片的要求數(shù)，正常關(guān)于宮調(diào)格格局的使用來講，其圖片是比擬多的，由于它至多需求八張圖片辨別來粉飾四個拐角和四條邊。咱們將它安裝為相對于定位，讓它浮正在rightbar某個父器皿的下面，由于某個小圖標(biāo)的高低比rightbar高，因為將它向上偏偏移了3像素，讓它看起高低是垂直從中的形狀。
圖一

先入為主，自己都想先看看后果，好，先秀出截圖：
正在我的其三篇作品《三層結(jié)合的圓滿宮調(diào)格》中，我引見了用JS封裝html標(biāo)簽，再不于縮小冗余的構(gòu)造體，但這種形式也是有缺點的，假如用戶禁用了JS，將形成構(gòu)造徹底顯現(xiàn)沒有進(jìn)去，千萬關(guān)于當(dāng)今的上網(wǎng)環(huán)境來說，這該當(dāng)沒有是一度大成績，但縱觀海外的的一些主頁設(shè)想，都是有這種思忖的多余的。因為怎么縮小圖片單位，關(guān)于設(shè)想人員來說是一件沒有得沒有思忖的事件。

。因為，魚和熊掌沒有可一舉多得也。這就需求文雅升級和性能弱化，但那樣帶來的后果和沒有使用JS封裝是一樣的。