九宫格设计.docx
15 冰极峰教程系列之一：九宫格布局九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多，比如我们经常看到软件中的一个窗体，其实就是一个九宫格的典型应用，因为窗体需要在八个方向拉伸，所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会，这种布局逐渐被一些网页设计师运用在网页中去，用得最多的就是在圆角框布局中应用。下图演示了九宫格的基本布局： 从上图可以看出，每一行包括三列，其中蓝色方块是顶角，这四个块是宽高固定的区域，而黄色的四个区域分别是四条边，这些都是要水平或垂直平铺的，而中间的橙色区域是装载内容的主要区域。这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高，这种结构也是网页设计师是最想要的一种布局结构，它灵动而从容。下面我们就来实现它：【结构层】：因为它要适应八个方向的伸展，所以每个方向都用一个div来实现，少一个则灵活性就不足。那么根据这个原理，我们可以得到如下的结构：<div class="box"> <div class="t_l"></div> <div class="t_m"></div> <div class="t_r"></div> <div class="m_l"></div> <div class="m_m">内容区</div> <div class="m_r"></div> <div class="b_l"></div> <div class="b_m"></div> <div class="b_r"></div></div>【样式层】：根据结构，我们可以写出基本的样式。基本实现原理，是利用将总容器.box设置为相对定位并设置overflow:hidden;让超出它的地方全部被切除，并将其里面的八个方向的div设为绝对定位，并将它们的z-index设置为2，然后将四个角容器分别设置到四个角落上。.boxoverflow:hidden;position:relative;.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r position:absolute;z-index:2;【注意】：这里有两个地方需要注意到：1、就是t_m和b_m这两个容器是需要水平平铺的，所以需要将它的z-index设置为比左右两角的div的z-index的值低，我们将它设置为z-index:1;这样它就置于t_l和t_r的下面了，然后，我们设置它的宽度为100%，让它水平铺满整个第一行的宽度。.t_m z-index:1;width:100%; 2、对于m_l，m_r这两个div容器，因为要让背景向下垂直平铺，所以我们将它们的高度值设为一个非常大的值，我们将它设置为20000px，让它一直向下垂直平铺，然后因为总容器设置了overflow:hidden，会将多余的部分切除。 这样一个基本的九宫格布局就形成，你可以查看下面的演示模型。本模型在以下浏览器中测试通过：IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>基本的九宫格(<style type="text/css">*margin:0;padding:0;.boxoverflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#F34703;.t_l,.t_m,.t_rposition:absolute;top:0;z-index:2;height:10px;font-size:0%;.t_lleft:0;width:10px;background:blue;.t_mz-index:1;width:100%;background:orange;.t_rright:0;width:10px;background:blue;.m_l,.m_rposition:absolute;z-index:2;width:10px;.m_ltop:0px;left:0;z-index:1;background:orange;height:2000px;.m_rtop:0px;right:0;z-index:1;background:orange;height:2000px;.b_l,.b_m,.b_rposition:absolute;bottom:0;z-index:2;height:10px;font-size:0%;.b_lleft:0;width:10px;background:blue;.b_mz-index:1;width:100%;background:orange;.b_rright:0;width:10px;background:blue;.m_mwidth:100%;font-size:12px;color:#fff;h3text-align:center;font-size:14px;line-height:26px;.m_m pline-height:22px;padding:0 20px;</style></head><body><div class="box"><div class="t_l"></div><div class="t_m"></div><div class="t_r"></div><div class="m_l"></div><div class="m_m"><h3>九宫格-基本模型</h3><p>这是一个九宫格基本布局模型，未加载任何图片，请随意拉伸缩放窗体大小，看看九宫格向各个方向自由伸展。</p><p>本模型测试在以下几个浏览器中完全通过：</p><p>IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。</p><p style="text-align:right">更多原创请访问：<a href=" title="去网站看看">冰极峰</a></p></div><div class="m_r"></div><div class="b_l"></div><div class="b_m"></div><div class="b_r"></div></div></body></html>似乎到这儿就该结束了，然而.要是细心的朋友在测试本模型时会发现，在IE6浏览器中，会与一个BUG不期而遇，那就是IE6宽高值奇数1px BUG，估且这么称呼吧，因为对于这个BUG，网络上并没有一个统一的称呼。这个bug的激发条件是：一个相对定位的父容器，其子容器采用绝对定位的方式向左或向右靠齐，当父容器的宽度值为奇数时，父容器与子容器之间会存在px的间隙，不能完全紧贴在一起。而我这个演示模型刚好满足了条件所以当你在IE6浏览器中缩小窗口，并进行拖拉缩放时，最右边和下面的两个小方块和父容器中会出现一个px的空距。如果你觉得不用考虑IE6的话，那么这种布局就已经基本满足你的需要了。然而，对于一些比较追求完美的设计者来说，这是让人无法容忍的。在我的前一篇教程九宫格基本布局中，我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法，好像制作过程中一切都是顺理成章的事情，然而因为IE6让人恶心的奇偶性BUG，使得这种布局方法要想通用变得有点遥不可及，因为国内大多数用户还是用着IE6，我们不能因此而丢掉这部分用户。这个BUG目前是无药可治，也没有什么Hack技巧能运用，唯一能用的方式就是绕开它。也就是说我要定位这九宫格的四个角容器的位置，绝对定位的方法是不能采用的了，这不吝是一个重大的打击，这将完全推翻我前一篇文章中用到的方法，我们只好另起炉灶了。那么还有那些技术能够拯救这个BUG于水深火热之中呢？我们知道如果用左右浮动的方法能够准确地将元素对象发生偏移，并且这种方法也能避免IE6的奇偶性BUG。OK，我们就用它了。 【布局的重点和难点】我们还是按照表格的结构来构建我们新模型的结构体，然而这次会相对于前一篇文章的结构有所改变。在这个模型中我们要关注的重点和难点是以下这两点：1、 t_m和b_m这两个中间容器的宽度值必须是一个百分比的值，否则不能保证整个九宫格的左右动态伸展，它决不能为某个固定的像素值。其宽度等于总容器宽度减去两侧角容器宽度之和的百分比值。其计算公式为：t_m（或b_m）的宽度=（总容器宽度-（左上角容器宽+右上角容器宽度）/总容器宽度也就是说t_m或b_m的宽度不是100%，然而t_l和t_r这两个容器的宽度在实际案例中一般是一张图片的宽度，所以它一般都是一个固定宽度值，这样在一个同行的三个容器中，左右两侧宽度是固定值，而中间又要求是百分比，并且这三个容器的总宽度加起来应该是100%，这该怎么办呢？这里我们采用一种比较稳妥的办法来让中间容器能达到理想的宽度百分比：我们可以用一个DIV容器，设置它的padding:0 10px;不设置它的宽度，默认状况下，它的宽度就是100%的。因为设置了左右的padding值，则其内部的宽度就是我们要的t_m的理想宽度值，因此我们再给它内部定义一个容器，这个子容器宽度设置为100%。这个子容器的背景色就可以设置为左右水平平铺的背景图片。这个子容器就是我们要用到的上顶边容器。它满足了我们对宽度值的特殊要求。 因此这个t_m的结构就可以做成如下的结构： <div class="top"><span class="t_m"></span></div>然而这样定义会导致另外一个问题，这个问题在IE7以下的浏览器的都存在，因为我们定义了padding，会在下面的中间的主体层中也同时产生左右侧的内补丁，这里有点不明白的是：为什么会对IE7产生影响？ 因此其补救方法是在这儿针对IE6和IE7应用一个HACK技巧：.b_lmargin-left:0px;+margin-left:-10px;_margin-left:-10px;.b_rmargin-right:0px;+margin-right:-10px;_margin-right:-10px;这句话是针对三种浏览器设置不同的偏移值，将b_l和b_r向左右偏移到指定的位置。2、 b_l和b_r这两个容器的高度值必须相同，以使它们可以一直垂直向下平铺背景色。这样，当中间主体内容区（context）中内容的高度发生改变时，其两侧的背景色能一直和主体内容区（context）保持同一高度。也就是说它们能根据内容主体的高度而自由地拉伸自己的高度值。我们可以采用在平时工作中经常用到的多列同高的方法来处理这个问题。这个方法就是采用内补丁和负外补丁相结合的方式来达到多列同高： .m_l,.m_rpadding-bottom:30000px;margin-bottom:-30000px;我们将m_l和m_r的下内补丁padding-bottom的值设置为一个相对比较大的值，比如我将它们设置为30000px（你可以将它设置为你想要的值），相信一般的情况下，是不会超过这个高度值了。然后将下外补丁（margin-bottom）设置为和下内补丁（padding-bottom）值相同的负值，将它拉回到原来的位置上，并将总容器（box）设置overflow:hidden;，截除多余的高度，就可以保证两列同高。 将上面两个难点问题解决后，余下的事情就是简单而愉快的事情了！ 【结构层】 现在我们将结构层在前一个案例的基础上作了一下调整，因此就成了下面这样一种结构了：<div class="box"> <!-第一行顶部*/-> <div class="top"><span class="t_m"></span></div> <span class="t_l"></span> <span class="t_r"></span> <!-第二行中间内容区*/-> <span class="m_l"></span> <span class="m_r"></span> <div class="context">内容主体区域</div> <!-第三行底部*/-> <div class="b_m"><span></span></div> <span class="b_l"></span> <span class="b_r"></span></div> 【样式层】 下面是主要的样式设置： /*总容器*/ .boxoverflow:hidden;width:50%;margin:50px auto 0;background:#fff; .box spandisplay:block; /*顶部样式*/ .topheight:10px;padding:0 10px; .t_l,.t_rwidth:10px;height:10px;font-size:0%;margin-top:-10px; .t_lfloat:left;background:#ff0000;/*左上角*/ .t_rfloat:right;background:#ff0000;/*右上角*/ .t_mheight:10px;font-size:0%;width:100%;background:#7F0000;/*这是可左右伸展的区域，两例留出空白便于放置左右角容器*/ /*中间样式*/ .m_l,.m_rwidth:10px;padding-bottom:30000px;margin-bottom:-30000px;/*两列等高*/ .m_lfloat:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000; /*左边框*/ .m_rfloat:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000; /*右边框*/ /*底部样式*/ .b_mpadding:0 10px;height:10px;/*这是可左右伸展的区域，两例留出空白便于放置左右列同高容器*/ .b_m spanwidth:100%;height:10px;font-size:0%;background:#7F0000; .b_l,.b_rheight:10px;font-size:0%;width:10px;margin-top:-10px; .b_lfloat:left;background:#ff0000;/*左下角*/ .b_rfloat:right;background:#ff0000;/*右下角*/ 经过上述设置后，我们的九宫格就算完成了，它是“牢不可破”的，会随着内容主体的宽高动态地向各个方向自由伸展。在此模型中，为了演示的效果，我将总容器的宽度设置了一个百分比50%，你可以根据你的实际需要调整它的大小，其内部会随着它的宽度值自动填充整个区域，不会撑破父容器。如下图所示：你可以用八张图片来制作一个漂亮的九宫格盒子。看看它的完美表现。 本模型在以下浏览器中测试通过：IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>牢不可破的九宫格布局（<style type="text/css">/*布局名称：牢不可破的九宫格作者：冰极峰博客地址：*/*margin:0;padding:0;font-size:12px;bodytext-align:center;color:#fff;/*ie5.5不支持margin的居中对齐*/*总容器*/.boxoverflow:hidden;width:50%;margin:50px auto 0;background:#fff;.box spandisplay:block;/*顶部样式*/.topheight:10px;padding:0 10px;.t_l,.t_rwidth:10px;height:10px;font-size:0%;margin-top:-10px;.t_lfloat:left;background:#ff0000;/*左上角*/.t_rfloat:right;background:#ff0000;/*右上角*/.t_mheight:10px;font-size:0%;width:100%;background:#7F0000;/*这是可左右伸展的区域，两例留出空白便于放置左右角容器*/*中间样式*/.m_l,.m_rwidth:10px;padding-bottom:30000px;margin-bottom:-30000px;/*两列等高*/.m_lfloat:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000; /*左边框*/.m_rfloat:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000; /*右边框*/*底部样式*/.b_mpadding:0 10px;height:10px;/*这是可左右伸展的区域，两例留出空白便于放置左右列同高容器*/.b_m spanwidth:100%;height:10px;font-size:0%;background:#7F0000;.b_l,.b_rheight:10px;font-size:0%;width:10px;margin-top:-10px;.b_lfloat:left;background:#ff0000;/*左下角*/.b_rfloat:right;background:#ff0000;/*右下角*/*内容区*/.contextbackground:#D45F00;h3text-align:center;font-size:14px;width:80%;margin:0 auto;line-height:26px;pline-height:22px;padding:0 20px;text-align:left;a:link,a:visitedcolor:#fff;font-weight:bold;a:hovercolor:green;</style></head><body><div class="box"><BGSOUND CEP="5" /><div class="top"><span class="t_m"></span></div><span class="t_l"></span><span class="t_r"></span><BGSOUND CEP="6" /><span class="m_l"></span><span class="m_r"></span><div class="context"><h3>牢不可破的九宫格布局</h3><p>这是一个九宫格布局模型，未加载任何图片，请随意拉伸缩放窗体大小，会看到九宫格向各个方向自由弹性伸展。</p><p>本模型修改了上一个版本的不足，用浮动的方法避开了ie6的宽高值奇数1px Bug问题，完美地实现所有主流浏览器全部兼容通过。</p><p>本模型测试在以下几个浏览器中完全通过：</p><p>IE5.5、 IE6、 IE7、 IE8、 FF3、 TT、 Maxthon2.1.5、 Opera9.6、 Safari4.0、 Chrome2.0。</p><p style="text-align:right">更多原创请访问：<a href=" title="去网站看看">冰极峰博客</a></p><p style="text-align:right">博客地址：</div><BGSOUND CEP="7" /><div class="b_m"><span></span></div><span class="b_l"></span><span class="b_r"></span></div></body></html>在我的前一篇教程牢不可破的九宫格布局中，我介绍了一种比较完美的九宫格布局方法，它能完全弹性地调整自己的宽高，从而实现比较灵活的布局风格。然而为了弹性功能完美地体现出来，所付出的代价还是很沉重的，从结构上看，其结构是比较臃肿的，但是每个节点又是必不可少的，无法精简，否则会导致其灵活性不够。在实战运用中，可能好多设计师并不喜欢这种布局结构，嫌其结构冗余。一个完美的九宫格设计应该是一种三层分离的结构，我想达到的理想的九宫格应该是这样的：1、 只需要应用一个class样式给想应用九宫格布局的容器，就能自动创建这种布局。结构应该足够精简，只用很少的结构就能实现丰富的颜色风格。2、 能够将这种布局样式应用于一个页面的多个容器中。3、 三层分离的设计，能提供丰富的颜色皮肤方案，便于将不同的样式应用于多个风格迥异的盒子上。4、 要足够健壮，能兼容大多数浏览器。因此，在这一篇文章中，我会将这种布局尽量向着这种理想化的境界靠近，让它更宜于应用在各个方面。对于一、二点，又想要保持其灵活性，又想要达到精简的效果，就是说想“鱼和熊掌兼得”，除了应用js封装外，并无其它的办法。你可以说这是一种“掩耳盗铃”的做法，是的，我不得不承认，这种用JS封装的办法，从本质上说并没有精简其结构，只不过将其结构都用动态的方式来创建，但对冗余的html结构确实有立竿见影的效果，一下子就将所有冗余的结构化于无形之中。我们还是从三层分离的做法中了解如何改进我们的九宫格吧。 【结构层】这是我们要尽量精简的重点区域，我们用js的方式来动态创建其结构，所以现在的结构应该是如下的最最原始的结构了：<div class="box">第一个九宫格盒子</div><div class="box" id=“one”>第二个九宫格盒子</div><div class="box" id=“two”>第三个九宫格盒子</div>我唯一作了一点修改的是，将每一个盒子加了一个不同的ID，这为以后创建不同的颜色方式留下一个供样式表调用的钩子。通过这个ID在样式表中创建不同的图片或颜色风格。我们应该只需要给div容器添加一个class=”box”，就会将九宫格布局成功地创建出来。这样是够简洁的了吧！ 【样式层】刚才在结构层中我们埋下了定制样式的突破点（那个不同的id），那么在写样式时就显得得心应手了。我们将所有的九个需要改变风格的地方的样式进行覆盖性重置，就能得到不同的风格样式。 /*颜色方案一*/ #one .t_lbackground:blue; #one .t_rbackground:blue; #one .t_mbackground:orange; #one .m_lbackground:orange; #one .m_rbackground:orange; #one .b_lbackground:blue; #one .b_rbackground:blue; #one .b_m spanbackground:orange; #one .contextbackground:#666; /*颜色方案二*/ #two .t_lbackground:red; #two .t_rbackground:red; #two .t_mbackground:black; #two .m_lbackground:black; #two .m_rbackground:black; #two .b_lbackground:red; #two .b_rbackground:red; #two .b_m spanbackground:black; #two .contextbackground:#999;当然你可以将不同的图片应用于background上作为其背景，我只是为了演示方便而调用了颜色值而已，具体的界面风格就看你的设计功夫了。【行为层】我们在结构层中已经将所有用于创建九宫格的结构全部删除了，那么在我们就要在行为层（js）中动态的创建它。在这里我们会遇到一个问题：我们想将所有应用了class="box"的div都用循环的方式遍历出来，以便于我们只需要一个class就可以自动应用这种九宫格样式，可是在js的dom方法中并没有一个已经存在的函数，就像“getElementsByTagName”一样通过一个标签名称来获得一个对象数组的方法，我想在这儿我们最想要的是一个如同“getElementsByClassName”（从字面的意思上是指：根据一个class类名获得一个对象的数组）的方法了。因此在我们的js中就需要写一个这样的自定义方法：为了更贴近地表达的我们的意思，我们就将它取名为“getElementsByClassName”。这个方法就是传递一个class类名，然后获得一个应用了这个class的容器的对象数组。document.getElementsByClassName = function(theName) var j = 0; var array = for(var i = 0;(e = document.getElementsByTagName("*")i); i+) if(e.className = theName) arrayj = e; j+; return array;获得了所有应用了这个class的div容器的对象数组后，我们就可以利用for循环遍历每个对象，然后分别给它内部装填我们刚才删除的九宫格结构。因此我们再创建一个函数，用来动态生成结构体：/根据类名加载九宫格样式function creatDiv()divs = document.getElementsByClassName('box');for (var i = 0; i < divs.length; i+) var strhtml = divsi.innerHTML; /将结构体封装在这个变量中 var indiv = "<div class='top'><span class='t_m'></span></div><span class='t_l'></span><span class='t_r'></span><span class='m_l'></span><span class='m_r'></span><div class='context' id='m_m_" + i + "'></div><div class='b_m'><span></span></div><span class='b_l'></span><span class='b_r'></span>" divsi.innerHTML=indiv; var dd1 = document.getElementById("m_m_"+i); dd1.innerHTML=strhtml;然后我们利用window.onload函数在窗体一加载时就加载这个creatDiv（）方法。window.onload=creatDiv; 这样在整个页面加载成功后，会自动将所有应用了class=”box”的div容器加载成九宫格的结构样式。经过上述的一番改头换面的修改后，一个更健壮，三层分离的完美九宫格就被我们打造出来了。这种布局可以应用到很多地方，并且因为其强大的自适应功能和灵活多变的风格更受广大朋友的喜爱。下面是演示效果截图：在前面的三篇系列文章中，我对九宫格布局作了详细的介绍。先从一个基本布局入手，将在制作过程中遇到的问题逐一进行了讲解。这三篇文章都是基本原理的讲解，没有一个有力的应用案例来证明这种原理是否正确，可能有些朋友已经有点急不可烦，也有网友要求我能提供案例。因此，在这一篇文章中，我将介绍一个九宫格案例极酷的播放器。在我的第三篇文章三层分离的完美九宫格中，我介绍了用JS封装html标签，以便于减少冗余的结构体，但这种方式也是有缺陷的，如果用户禁用了JS，将造成结构完全显示不出来，当然对于当今的上网条件来说，这应该不是一个大问题，但纵观国外的的一些网页设计，都是有这种考虑的必要的。这就需要优雅降级和功能弱化，但这样带来的结果和不应用JS封装是一样的。所以，鱼和熊掌不可兼得也。哎，这些都是题外话，还是来看看我们的一个极酷播放器是如何设计出来的吧！先入为主，大家都想先看看结果，好，先秀出截图： 图一一般对于这样一个有丰富色彩的播放器来说，都是要求其宽高值是可以动态调整，因此这样的图形用九宫格来做是非常适合的选择。当然原理我也不再重述了，请参考我的系列文章中的牢不可破的九宫格布局，这个应用案例就是针对它来实现的。当然在制作中还是有些技巧可以帮我们更好地的完成任务。比如css sprites技术（可以查看我的另一篇文章css sprites图片背景优化技术），它能有利地减少图片的请求数，一般对于九宫格布局的应用来讲，其图片是比较多的，因为它至少需要八张图片分别来装饰四个角落和四条边。所以怎样减少图片数量，对于设计人员来说是一件不得不考虑的事情。在本例中我将四角的图片合并成了一张图片，它们看起应该就是下面这个样子： 图二在上图中我为了让大家看得仔细一点，几张图片的交界处用辅助线画了出来，我们应用图片定位原理将它们分别固定在四个角落上。它们在样式表中是如下方式来定义的：.t_l background:url(./image/round.gif) no-repeat left top;/*左上角*/.t_rbackground:url(./image/round.gif) no-repeat right top;/*右上角*/.b_lbackground:url(./image/round.gif) no-repeat left bottom;/*左下角*/.b_r background:url(./image/round.gif) no-repeat right bottom;/*右下角*/ 我们再将左右边框合并成一张图片，如下图所示： 图三左右边框是需要纵向垂直平铺的，所以一定要注意它们的宽度值，这需要精确定位：.m_lwidth: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_mbackground:url(./image/u_dborder.gif) no-repeat center top; /*上边框*/.b_m_mbackground:url(./image/u_dborder.gif) no-repeat center bottom; /*下边框*/在本案例中，比较烦杂的地方是底部区域中的一些控制按钮，这个按钮都是采用浮动，相对定位加绝对定位来进行精确设置的。具体代码就不一一列举了，要了解详情请查看
黑公网安备:91230400333293403D
