九宫格设计.docx
《九宫格设计.docx》由会员分享,可在线阅读,更多相关《九宫格设计.docx(15页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、15 冰极峰教程系列之一:九宫格布局九宫格是一种比较古老的设计,它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多,比如我们经常看到软件中的一个窗体,其实就是一个九宫格的典型应用,因为窗体需要在八个方向拉伸,所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会,这种布局逐渐被一些网页设计师运用在网页中去,用得最多的就是在圆角框布局中应用。下图演示了九宫格的基本布局:从上图可以看出,每一行包括三列,其中蓝色方块是顶角,这四个块是宽高固定的区域,而黄色的四个区域分别是四条边,这些都是要水平或垂直平铺的,而中间的橙色区域是装载内容的
2、主要区域。这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高,这种结构也是网页设计师是最想要的一种布局结构,它灵动而从容。下面我们就来实现它:【结构层】:因为它要适应八个方向的伸展,所以每个方向都用一个div来实现,少一个则灵活性就不足。那么根据这个原理,我们可以得到如下的结构:内容区【样式层】:根据结构,我们可以写出基本的样式。基本实现原理,是利用将总容器.box设置为相对定位并设置overflow:hidden;让超出它的地方全部被切除,并将其里面的八个方向的div设为绝对定位,并将它们的z-index设置为2,然后将四个角容器分别设置到四个角落上。.boxoverflow:hid
3、den;position:relative;.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_rposition:absolute;z-index:2;【注意】:这里有两个地方需要注意到:1、就是t_m和b_m这两个容器是需要水平平铺的,所以需要将它的z-index设置为比左右两角的div的z-index的值低,我们将它设置为z-index:1;这样它就置于t_l和t_r的下面了,然后,我们设置它的宽度为100%,让它水平铺满整个第一行的宽度。.t_mz-index:1;width:100%;2、对于m_l,m_r这两个div容器,因为要让背景向下垂直平铺,所以我们将
4、它们的高度值设为一个非常大的值,我们将它设置为20000px,让它一直向下垂直平铺,然后因为总容器设置了overflow:hidden,会将多余的部分切除。这样一个基本的九宫格布局就形成,你可以查看下面的演示模型。本模型在以下浏览器中测试通过:IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。基本的九宫格(*margin:0;padding:0;.boxoverflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#
5、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;heigh
6、t: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;col
7、or:#fff;h3text-align:center;font-size:14px;line-height:26px;.m_m pline-height:22px;padding:0 20px;九宫格-基本模型这是一个九宫格基本布局模型,未加载任何图片,请随意拉伸缩放窗体大小,看看九宫格向各个方向自由伸展。本模型测试在以下几个浏览器中完全通过:IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。更多原创请访问:冰极峰似乎到这儿就该结束了,然而.要是细心的朋友在测试本模型时会发现,在IE6浏览器中,会与一个BUG不期而遇,那
8、就是IE6宽高值奇数1px BUG,估且这么称呼吧,因为对于这个BUG,网络上并没有一个统一的称呼。这个bug的激发条件是:一个相对定位的父容器,其子容器采用绝对定位的方式向左或向右靠齐,当父容器的宽度值为奇数时,父容器与子容器之间会存在px的间隙,不能完全紧贴在一起。而我这个演示模型刚好满足了条件所以当你在IE6浏览器中缩小窗口,并进行拖拉缩放时,最右边和下面的两个小方块和父容器中会出现一个px的空距。如果你觉得不用考虑IE6的话,那么这种布局就已经基本满足你的需要了。然而,对于一些比较追求完美的设计者来说,这是让人无法容忍的。在我的前一篇教程九宫格基本布局中,我介绍了用相对定位加绝对定位的
9、方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法,好像制作过程中一切都是顺理成章的事情,然而因为IE6让人恶心的奇偶性BUG,使得这种布局方法要想通用变得有点遥不可及,因为国内大多数用户还是用着IE6,我们不能因此而丢掉这部分用户。这个BUG目前是无药可治,也没有什么Hack技巧能运用,唯一能用的方式就是绕开它。也就是说我要定位这九宫格的四个角容器的位置,绝对定位的方法是不能采用的了,这不吝是一个重大的打击,这将完全推翻我前一篇文章中用到的方法,我们只好另起炉灶了。那么还有那些技术能够拯救这个BUG于水深火热之中呢?我们知道如果用左右浮动的方法能够准确地将元素对象发生偏移,并且这
10、种方法也能避免IE6的奇偶性BUG。OK,我们就用它了。 【布局的重点和难点】我们还是按照表格的结构来构建我们新模型的结构体,然而这次会相对于前一篇文章的结构有所改变。在这个模型中我们要关注的重点和难点是以下这两点:1、 t_m和b_m这两个中间容器的宽度值必须是一个百分比的值,否则不能保证整个九宫格的左右动态伸展,它决不能为某个固定的像素值。其宽度等于总容器宽度减去两侧角容器宽度之和的百分比值。其计算公式为:t_m(或b_m)的宽度=(总容器宽度-(左上角容器宽+右上角容器宽度)/总容器宽度也就是说t_m或b_m的宽度不是100%,然而t_l和t_r这两个容器的宽度在实际案例中一般是一张图片
11、的宽度,所以它一般都是一个固定宽度值,这样在一个同行的三个容器中,左右两侧宽度是固定值,而中间又要求是百分比,并且这三个容器的总宽度加起来应该是100%,这该怎么办呢?这里我们采用一种比较稳妥的办法来让中间容器能达到理想的宽度百分比:我们可以用一个DIV容器,设置它的padding:0 10px;不设置它的宽度,默认状况下,它的宽度就是100%的。因为设置了左右的padding值,则其内部的宽度就是我们要的t_m的理想宽度值,因此我们再给它内部定义一个容器,这个子容器宽度设置为100%。这个子容器的背景色就可以设置为左右水平平铺的背景图片。这个子容器就是我们要用到的上顶边容器。它满足了我们对宽
12、度值的特殊要求。 因此这个t_m的结构就可以做成如下的结构: 然而这样定义会导致另外一个问题,这个问题在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;这句话是针对三种浏览器设置不同的偏移值,
13、将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-bott
14、om的值设置为一个相对比较大的值,比如我将它们设置为30000px(你可以将它设置为你想要的值),相信一般的情况下,是不会超过这个高度值了。然后将下外补丁(margin-bottom)设置为和下内补丁(padding-bottom)值相同的负值,将它拉回到原来的位置上,并将总容器(box)设置overflow:hidden;,截除多余的高度,就可以保证两列同高。 将上面两个难点问题解决后,余下的事情就是简单而愉快的事情了!【结构层】 现在我们将结构层在前一个案例的基础上作了一下调整,因此就成了下面这样一种结构了:内容主体区域 【样式层】 下面是主要的样式设置: /*总容器*/.boxoverf
15、low:hidden;width:50%;margin:50pxauto0;background:#fff;.boxspandisplay:block;/*顶部样式*/.topheight:10px;padding:010px;.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%;b
16、ackground:#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;bac
17、kground:#7F0000;/*右边框*/*底部样式*/.b_mpadding:010px;height:10px;/*这是可左右伸展的区域,两例留出空白便于放置左右列同高容器*/.b_mspanwidth: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;/*右下角*/
18、 经过上述设置后,我们的九宫格就算完成了,它是“牢不可破”的,会随着内容主体的宽高动态地向各个方向自由伸展。在此模型中,为了演示的效果,我将总容器的宽度设置了一个百分比50%,你可以根据你的实际需要调整它的大小,其内部会随着它的宽度值自动填充整个区域,不会撑破父容器。如下图所示:你可以用八张图片来制作一个漂亮的九宫格盒子。看看它的完美表现。 本模型在以下浏览器中测试通过:IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。牢不可破的九宫格布局(/*布局名称:牢不可破的九宫格作者:冰极峰博客地址:*/*margin
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 九宫 设计
限制150内