我们再将左右边框合并成一张图片，如下图所示：

图三

左右边框是需要纵向垂直平铺的，所以一定要注意它们的宽度值，这需要精确定位：

.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;} /*右边框*/

对于上下边框图片，我们也采用合并的方法，有一点需要注意，这两张图片是一张很宽的图片，其宽度值达到2000px，我是想让它们能在更宽的屏幕上能够通用，它们具有一个左右渐变的背景色，其中间色彩比两侧浅，所以我将两侧的背景进行了延伸，这样我可以用background-position的center值来进行居中定位，就可以将图片中间始终定位在容器的中间。

.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;} /*下边框*/

在本案例中，比较烦杂的地方是底部区域中的一些控制按钮，这个按钮都是采用浮动，相对定位加绝对定位来进行精确设置的。具体代码就不一一列举了，要了解详情请查看源代码。我只针对这里面的两个拖动栏的制作作一下说明。

我们可以看到在本案例中有两个进度栏，一个是进度栏，一个是调整音量栏，其实它们的制作方法是一样的。

其结构是如下：

<div class="progressbar">
  <div class="leftbar" id="progressbar">
    <span class="rightbar" id="idBar">
      <b class="drawbar">进度拖动栏</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是左侧绿色的进度槽，它的宽度其实是100%，它在下面，它的上面是rightbar这个div，为了演示，我将它的宽度设置为50%，并将它设置为向右浮动，因为它是Leftbar的子容器，所以它会遮盖住Leftbar的右边50%的宽度，并将背景图设置为一个灰色图片，这样就有了点进度在50%的样子了，然后我在rightbar中再加了一个子容器，它是用来加载那个绿色拖动栏的小图标的。我们将它设置为绝对定位，让它浮在rightbar这个父容器的上面，因为这个小图标的高度比rightbar高，所以将它向上偏移了3像素，让它看起上下是垂直居中的样子。这样一个拖动栏就算制作成功，当然因为还没有加入js功能的原因，所以目前它还不能拖动，为了以后js功能的完善，我在这儿为这两个容器加入了一个ID，作为js代码的钩子。

至于音量进度栏，其设置方式是一样的，只是它少了一个拖动图片罢了。

然后我们再给“全屏”和“宽屏”这两个按钮加入了一点js代码，让它能演示这种布局在宽高值变化时的状态。

Ok，一个比较漂亮的播放器基本布局就算完成了，当然它目前只是一个花架子，你可以加入播放功能来完善它。

本模型为了演示九宫格的强大自适应功能，只对右下角的三个按钮加入了js功能，你可以点击这几个按钮来演示九宫格在宽高值放大的情况下的完美表现。

本模型在以下浏览器中测试通过：
IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

点击这儿下载本演示模型的压缩包：下载Demo

总结：

本系列文章在这一篇后就暂时告一段落，尘埃落定之际，我们应该反思一下，它的应用是否就仅局限于此呢，NO！九宫格布局可以应用的地方是很多的，比如现在的网页设计中，对于一个个区域版块，我们都可以应用它，这种布局设计特别适用于图形设计要求比较高的地方。当然对于这种布局的制作可能花费的时间比一个普通的设计要多得多，针对具体环境具体运用了。

后记：

本系列教程试图通过由浅入深的方式将这种布局设计带给大家，古人常说：授人以鱼，不如授人以渔。希望大家能融会贯通，将它发扬光大，当然因本人水平有限，如果有讲解不妥之处，敬请原谅，也希望大家雅正!

如果在本教程中有什么疑问，可以直接在我的博客上提出来，或电邮我。谢谢！

原文：http://www.cnblogs.com/binyong/archive/2009/06/29/1512909.html

经典论坛交流：
http://bbs.blueidea.com/thread-2936289-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6830.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 九宫格应用案例:极酷网页播放器 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。