(义务编者：帝位库)
.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">
其构造是如次：
咱们能够看到正在该案例中有两个速度栏，一度是速度栏，一度是调动高低栏，实在它们的制造办法是一样的。
.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;} /*右边框*/
左左边框是需求纵向垂直平铺的，因为定然要留意它们的幅度值，这需求准确定位：
图三
咱们再将左左边框兼并成一张图片，如次图所示：
/*右下角*/
.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;}
正在上图中我为了让自己看得细心小半，多少张图片的接壤处用辅佐线画了进去，咱们使用图片定位原理将它们辨别流动正在四个拐角上。这三篇作品都是根本原理的解说，没有一度无力的使用案例来证实这种原理能否准确，能够有些冤家曾经有点急没有可烦，也有网友请求我能需要案例。详细代码就没有逐个罗列了，要理解概况请检查源代码。哎，该署都是题外话，还是来看看咱们的一度极酷播放器是如何设想进去的吧！
正在后面的三篇系列作品中，我对于宫调格格局作了细致的引见。千万正在制造中还是有些技巧能够帮咱们更好地的实现使命。
正在该案例中，比拟烦杂的中央是底部海域中的一些掌握旋钮，某个旋钮都是采纳浮动，绝对于定位加相对于定位来停止准确安装的。那样一度拖动栏就算制造顺利，千万由于还没有退出js性能的缘由，因为眼前它还没有能拖动，为了当前js性能的完美，我正在这儿为这两个器皿退出了一度ID，作为js代码的钩子。
正常关于那样一度有丰盛颜色的播放器来说，都是请求其宽高值是能够静态调动，因而那样的图形用宫调格来做是无比适宜的取舍。我只对准于这外面的两个拖动栏的制造作一下注明。先从一度根本格局动手，将正在制造进程中遇到的成绩逐个停止体会说。
.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; }/*上边框*/
关于高低边框图片，咱们也采纳兼并的办法，有小半需求留意，这两张图片是一张很宽的图片，其幅度值到达2000px，我是想让它们能正在更宽的银幕上可以通用，它们存正在一度内外突变的背风光，其两头颜色比两侧浅，因为我将两侧的背景停止了蔓延，那样我能够用background-position的center值来停止从中定位，就能够将图片两头一直定位正在器皿的两头。Leftbar某个div是左侧绿色的速度槽，它的幅度实在是100%，它正在上面，它的下面是rightbar某个div，为了演示，我将它的幅度安装为50%，并将它安装为向右浮动，由于它是Leftbar的子器皿，因为它会覆盖住Leftbar的左边50%的幅度，并将背景图安装为一度灰色图片，那样就有了点速度正在50%的形状了，而后我正在rightbar中再加了一度子器皿，它是用于加载那个绿色拖动栏的小图标的。因而，正在这一篇作品中，我将引见一度宫调格案例—极酷的播放器。它们正在款式表中是如次形式来界说的：
图二
正在本例中我将四角的图片兼并成了一张图片，它们看起该当就是上面某个形状：
千万原理我也没有再重述了，请参考我的系列作品中的《坚没有可摧的宫调格格局》，某个使用案例就是对准于它来完成的。比方css sprites技能（能够检查我的另一篇作品《css sprites图片背景优化技能》），它能有益地缩小图片的要求数，正常关于宫调格格局的使用来讲，其图片是比拟多的，由于它至多需求八张图片辨别来粉饰四个拐角和四条边。咱们将它安装为相对于定位，让它浮正在rightbar某个父器皿的下面，由于某个小图标的高低比rightbar高，因为将它向上偏偏移了3像素，让它看起高低是垂直从中的形状。
图一
先入为主，自己都想先看看后果，好，先秀出截图：
正在我的其三篇作品《三层结合的圆满宫调格》中，我引见了用JS封装html标签，再不于缩小冗余的构造体，但这种形式也是有缺点的，假如用户禁用了JS，将形成构造彻底显现没有进去，千万关于当今的上网环境来说，这该当没有是一度大成绩，但纵观海外的的一些主页设想，都是有这种思忖的多余的。因为怎么缩小图片单位，关于设想人员来说是一件没有得没有思忖的事件。
。因为，鱼和熊掌没有可一举多得也。这就需求文雅升级和性能弱化，但那样带来的后果和没有使用JS封装是一样的。