原创：冰极峰    转载请注明出处 2009年12月11日8:29:27

文章导航：

第一章：基本的圆角框

第二章：透明圆角化背景图片

第三章：圆角化图片

第四章：CSS圆角框组件 V1.0

前序：本来前三篇文章已经将CSS圆角框讲解完毕，但从网友反馈中，都说到不好使用，因此有了这篇文章，本文主要是将前面的结果总结修订后进行JS封装，方便调用。

在本次封装中，增加了对真正img标签引用的图片实现圆角化，之前的圆角图片大多是基于背景图片的，因为纯css无法实现img图片的圆角，有了js的加入，就变成可能了。并且在这次封装过程中修正了上次的背景图片下面两个圆角图片的定位错误问题。

其实这个控件的JS代码很简单，只需要用到innerHTML就可以完成其大部分工作，而真正的难点在于对于CSS样式的合并组合使用。

先看看最终效果截图：

图一

在我的《CSS圆角框组件V1.0》中，可以变化出6种基本风格的圆角框（至于颜色风格，则可以说是千变万化了）。它们分别是：

1. 纯线框圆角。

2. 标题线框圆角。不带背景色或背景图片，透明。

3. 标题和内容区可分别自定义颜色圆角。

4. 标题背景图片圆角。标题带背景图片时，自动实现圆角。

5. 装饰性背景图片圆角。容器有装饰性背景图片时，自动实现圆角。

6. Img图片圆角。如果有img标签引用图片时，自动实现圆角。

js代码就不用详解了，都很简单，我在js中作了详细的注释说明，一看就会。下面说说这6种风格的调用方法：

第一种：纯线框圆角

这是最基本，也是应用最广泛的一种应用。只需一句话就可以了。

Js行为：

解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。

Html结构：

第二种：标题线框圆角

一般这种块状布局，都需要在页头加入标题，你可以使用h1~h6系列标签。

Js行为：

解释：五个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称，因为考虑了扩展性，当想使用其它的标签时，可以随时替换，如h1~h6系列标签。

Html结构：

第三种：标题和内容区可分别自定义颜色圆角

与第二种风格差不多，差别在于可以分别定义标题和内容区的颜色值。

Js行为：

解释：六个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值。

Html结构：

第四种：标题背景图片圆角

这种需要将标题的背景图片路径作为参数传入，有了背景图片，一般都不需要背景颜色了，所以将第六个参数值设为空：

Js行为：

解释：七个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值、标题背景图片路径。

Html结构：

第五种：装饰性背景图片圆角

这种圆角也是用得比较多的，这种风格要注意：在CSS中需要设置容器的宽高值，因为在js中会查找到这个图片的宽高值。

Js行为：

解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。背景色值和背景图片只选其一，所以将第三个参数置为空。

Html结构：

第六种：Img图片圆角

纯CSS方法是无法做到Img图片圆角的，但有JS的加入，就可以变相实现。原理和第五种相似，只是将这个Img的图片路径取出来，在js中以背景图片的方式加入到各个容器中去，然后再还原img标签。

Js行为：

解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。

Html结构：

最简洁的HTML结构，无冗余代码。

组件优点：

1. 全面兼容所有浏览器。

2. 圆角不需要图片，直接代码生成，省去制图的麻烦。

3. 自适应外框的大小，可广泛应用于布局区块中。

4. 封装难以控制的CSS代码，调用灵活方便。

5. 封装HTML结构，你只需定义你想要的结构，无冗余，更语义化。

组件缺点：

1. 不能定义线框的大小。如果你需要改变线框大小，本组件不适合你。

2. 圆角不够圆滑，如果你对圆角图片的精度要求较高，不宜采用本组件。

3. 线框颜色和背景色不宜采用对比太强烈的颜色，容易看出锯齿。

本模型在以下浏览器中完美通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

点击这儿下载完整的压缩包：下载Demo

评论: 33　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

 第三章、圆角化图片

原创：冰极峰转载请注明出处 2009年12月2日8:26:38

文章导航：

第一章：基本的圆角框

第二章：透明圆角化背景图片

第三章：圆角化图片

第四章：CSS圆角框组件 V1.0

在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？

答案是肯定的，下面看看它的终极功夫。

还是先看最终效果图吧！

 

图一

看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，我特意应用了一个背景图片，你可以下载本模型到你的电脑中，随意伸缩窗口的大小，看看外圆角是否是透明的。

有了这种效果，你再也不愁给每一张图片作圆角的工作，这种效果在一些图片类的演示页面中经常见到，特别适用那些图片比较多的列表中。怎么样，效果还可以吧！

好了，我们来看看它的实现机制吧！ 

实现原理：

这种效果其实就是我在第二章中变体实现，下面讲一讲主要的关键代码。

主要变化的还是背景图片的定位，只是这一次与第二章中的有些不同，这次需要考虑到下面的两个圆角的变化。

先看看上面两个圆角的实现：

再看看下面两个圆角的样式设置，下面部分和上面部分是相互对应的。

不同的图片调用样式：

/*颜色方案一,绿色风格----------------------------------------*/
/*边框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{background:#262626;}
/*图片路径*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no-repeat;}

前面两句共同构成边线框的颜色值，需要设置成同一个色值，后面的一句设置图片的调用路径。

三句话就搞定一种颜色方案了。 

缺点：

对于这种用纯CSS来实现的圆角框，不得不说说它的缺陷。

1. 语义化不够好，因为其圆角全部由HTML结构标签堆砌而成，而这些标签在字面上讲没有任何的含义，全是为了样式的表现而存在的，所以造成HTML代码无端增多，不利于SEO优化。这也是大家所诟病的地方，也是广大前端工程师不喜欢它的最大原因。

2. 样式的定义比较复杂，可操作性繁琐，如果没有弄懂原理，会觉得特麻烦。

3. 边线框宽度只适用于较小的值，无法定义线框的大小，因为一超过1px的宽度值，就会产生比较直观的锯齿。

4. 圆角不能调节大小，如果要模拟更圆滑的效果，就需要添加更多的容器，造成结构更加复杂。

5. 不太适合对图形要求比较高的场合，因为它不够圆滑，如果将它放大会看到一些锯齿。

优点：

说了这么多缺点，也要来说说它的优点：

1. 兼容性好，这种圆角框通用于全部的浏览器，不存在兼容性问题。

2. 弹性自适应宽度高度的大小变化，特别适用于流体布局的页面中使用。

3. 可自定义边框和背景色，随心所欲地改变风格。

4. 不需要制作圆角图片，节约网络流量，并且也可以减少或降低设计人员的工作量，减少前端人员布局定位的兼容性工作。

扩展性：

如果将它的不足尽最大化地减弱，那么这将是一种不错的效果，我想这些工作就需要JS来参与了，而这样的话已超出本文标题的范围了。并且这种JS的圆角框已经有了比较成熟的作品了。

 

 

本模型在以下浏览器中完美通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

点击这儿下载完整的压缩包：Demo

 

评论: 22　查看评论　发表评论

---

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

]]>

 第二章、透明圆角化背景图片

原创：冰极峰 转载请注明出处 2009年12月1日8:33:38

 文章导航：

文章导航：

第一章：基本的圆角框

第二章：透明圆角化背景图片

第三章：圆角化图片

第四章：CSS圆角框组件 V1.0

在上面的案例中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中，我会在上面的基础上作出一些创新。就是将背景图片也圆角化，好像目前在网络上还没有这样的功能应用，我只见过用js方式来实现的，可以参看我的《超圆滑圆角框的半完美解决方案》一文中后面几种JS方案。但是纯CSS方式的实现可是我独家所创，如有雷同，只能说英雄所见略同。呵呵！

还是先看看最终的效果图，让大家有一个大概的印象。

图一

像这种小面积布局在网页设计中应用得很普遍，但目前网络流行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，然后使用三个同级的DIV或SPAN容器各自填充一张图，但是这种方法有一个最大的毛病：不能自动适应宽度的变化，一般做法都是采用固定宽度的方式，这是由于图片的宽度决定的。

当然对于一些比较有经验的人员来说，可以采用九宫格布局(可参看我的另一篇文章《九宫格基本布局》）方式或者滑动门方式来做到自适应宽度的变化，九宫格一般都需要用到八张图片，而滑动门虽然只用一张图片，但为了适应宽度的变化，这张图片一般都做得很大。

而我现在独创的这种方法可以完全做到适应不同的宽度需要，并且全部兼容所有的浏览器，而所需要的仅仅是一张很小的水平平辅的背景图片而已。

废话少说，言归正传。

基本原理：

我们都知道图片是方方正正的，不可能做出圆角效果，那么我们如何来做外圆透明的图片呢？其实道理说明了也就是一件很简单的事情，你看过下面的放大示意图后可能就会“哦”地一声，原来不过如此……

图二

是的，看到这个效果图你会一目了然，可是要想到这个方法，我却浪费了不少脑细胞。呵呵！

实现这种方法原理很简单：在每个b标签中各加载一次同样的图片，并结合背景定位background-position方式来达到效果。我们知道，同一张图片加载多少次对于性能的影响并不大，因为这张图片已经被电脑缓存到本地，和用css sprites合并图片一样的道理。

但是需要注意的是：每个b标签加载图片的定位是不一样的。

背景图片定位原理：

b1标签位于第一位，它主要用来描绘上边框线，所以它不需要加载背景图片。

b2标签位于第二位，它是第一个需要加载背景图片的，但是不需要图片负偏移，所以直接居左居顶定位就可以了。

代码

.b2{background-position:left top;}

b3标签位于第三位，它需要加载背景图片，让它的背景图片向上负偏移b2的高度值就可以，也就是1px。

代码

.b3{background-position:left -1px;}

b4位于第四位，所以它向上负偏移b2+b3高度值的和，为2px。 

代码

.b4{background-position:left -2px;}

H3标签位于第五位，所以它的背景图片需要向上负偏移b2+b3+b4高度值的各，也就是4px；

代码

h3{background-position:left -4px;}

这样，b2、b3、b4、h3的图片叠加起来和原始图片上下渐变的效果完全重合，如同一张图片，这样就达到模拟圆角图片的效果。

怎么样，原理够简单明了吧！

原理清楚后，要实现起来也就是一件水到渠成的事！

HTML结构层：

如同我们在第一章中模型所见，保持结构不变。

CSS样式层：（只写关键代码）

将上面的几句代码进行合并，如下所示：

代码

1 .sharp b.b2{background-position:left top;}
2 .sharp b.b3{background-position:left -1px;}
3 .sharp b.b4{background-position:left -2px;}
4 .sharp .content h3{background-position:left -4px;} 

和第一章中同样的道理，我们肯定要在各个不同的块框中有不同的背景图片的变化，也就是说，我们也要实现不同的换肤方案，当一个页面要多次调用同一个圆角框时，也可以让它们有些丰富的变化。实现不同的风格。OK，没问题，你只需要简单的将下面的样式中的背景图片的路径改变一下就可以了。

代码

.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}

你可以实现不同的颜色方案，就看你的设计师给你多少张不同图片了。

一种风格的定制也是一件简单的事情：

代码

 1*颜色方案一,绿色风格----------------------------------------*/
 2
 3/*边框色*/
 4.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#A0C044;}
 5.color1 .b1,.color1 .b8{background:#A0C044;}
 6.color1 h3{border-bottom:1px #679800 solid;}
 7
 8/*图片路径*/
 9.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
10
11/*文字内容背景色*/
12.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}

你只需要复制上面的代码，简单修改一下边框色，背景色，图片路径就变成你想要的风格了，是不是很简单呢？然后在你想应用样式的容器上定义这个color1类名即可。

在我的演示模型中，我定义了9种风格的变化，看看有没有适合你需要，直接复制就可以使用了，祝您用得开心！

为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。

本模型在以下浏览器中完美通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

点击这儿下载完整的压缩包：Demo

评论: 14　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

第一章、基本的圆角框

原创：冰极峰 转载请注明出处 2009年11月30日10:19:34

文章导航：

第一章：基本的圆角框

第二章：透明圆角化背景图片

第三章：圆角化图片

第四章：CSS圆角框组件 V1.0

序言：在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。

纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？ 

实现原理：

纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。

  

图一

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

1、Html结构层：

代码

1<div class="sharp color1">
2       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
3       <div class="content">文字内容</div>
4       </div>
5       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
6</div>

b1~b4构成上面的左右两个圆角结构体，而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体，将这些全部放在一个大的容器中，并给它的一个类名sharp，用来设置通用的样式。再给它叠加了一个color1类名，这个类名用来区别不同的颜色方案，因为可能会有不同颜色的圆角框。

2、CSS样式：

代码

1.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{}{height:1px; font-size:1px; overflow:hidden; display:block;}
2.b1,.b8{}{margin:0 5px;}
3.b2,.b7{}{margin:0 3px;border-right:2px solid; border-left:2px solid;}
4.b3,.b6{}{margin:0 2px;border-right:1px solid; border-left:1px solid;}
5.b4,.b5{}{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;} 

将每个b标签都设置为块状结构，并定义其高度为1像素，超出部分溢出隐藏。从上面样式中我们已经看到margin值的设置，是从大到小减少的。而b1和b8的设置是一样，已经将它们合并在一起了，同样的原理，b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样，只是顺序是相对的，所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式，但是在这儿并没有设置边框的颜色，这是为什么呢，因为这个边框颜色是我们需要适时变化，所以将它们分离出来，在下面的代码中单独定义。

接下我们设置内容区的样式： 

代码

.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

也是只设置左右边框线，但是不设置颜色值，它和上面八个b标签一起构成圆角框的外边框轮廓。

往往在一个页面中存在多个圆角框，而每个圆角框有可能其边框颜色各不相同，有没有可能针对不同的设计制作不同的换肤方案呢，答案是有的。在我的这个应用中，可以换不同的皮肤颜色，并且设置颜色方案也并不是一件很难的事情。下面看看我是如何将它们应用到不同的颜色的。

在上面的样式设计中，我已经给颜色方案留下了可以扩展的空间。我将所有的涉及到边框色的类名全部集中在一起，用群选择符给它们设置一个边框的颜色就可以了。如下所示：

代码

1.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{}{border-color:#96C2F1;}
2.color1 .b1,.color1 .b8{}{background:#96C2F1;}

注意：需要将这两句的颜色值设置为一样的，第二句中虽说是设置的background背景色，但它同样是上下边框线的颜色，这一点一定要记住。因为b1和b8并没有设置border，但它的高度值为1px，所以用它的背景色就达到了模拟上下边框的颜色了。

现在已经将一个圆角框描述出来了，但是有一个问题要注意，就是内容区的背景色，因为这儿是存载文字主体的地方。所以还需要加入下面这句话，也是群集选择符来设置圆角内的所有背景色。

代码

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}

这儿除了b1和b8外，其它的标签都包含进来了，并且包括content容器，将它们的背景色全部设置一个颜色，这样除了线框外的所有地方都成为一种颜色了。在这儿我也用到包含选择符，给它们都加了一个color1，这是颜色方案1的类名，依照这个原理可以设置不同的换肤方案。

好了，我们将上面的所有代码集中起来，就完成一个纯CSS圆角框的实例模型，在源码中，我设置了六套颜色方案，其它的颜色方案就看你的了。

下面是源码演示后的截图：

 

图二

     为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。

本模型在以下浏览器中完美通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

点击这儿下载完整的压缩包：Demo

评论: 25　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

原创：冰极峰     转载请注明出处         2009年7月27日  8:33:48

菜单高亮效果是每个网页经常采用的设计方式，它能有效地让用户知道自己当前所在的栏目。这也是我经常采用的方式，一般的网页至少都有两级菜单，第一个是顶部的总导航条菜单，另一个是左侧的分类导航菜单。一般要求在一级菜单高亮下二级菜单也能记录当前状态。

对于一个包含顶部菜单的页头区域如果固定不变的，也就是它不用每次都重新加载，这种情况下用纯CSS或JS方式可以很容易地实现，但今天我要谈的不是这种，今天说的是一级菜单和二级菜单在每个页面中都是动态加载的，也就是它们是作为用户控件的方式载入的。这种情况下要想记录菜单的高亮状态是一件比较困难的事情。

当然，你可能会说，用cookie可以记录每个页面加载时上次记录的高亮状态，是的，它确实可以记录，但是这种方式在一些复杂的包含许多子页面的应用中，会给用户造成许多困扰和麻烦。比如在cookie生存周期内，重新打开这个项目时，此时cookie的生存周期还没有完全结束，它还记录着上次保存的状态，而这时页面地址已经发生了变化，那么当前高亮的菜单所指向的就不是用户所希望看到的页面。实践证明，这个cookie的生存周期无论你设置多长都不能完美解决用户恶意刷新页面的状况。这确实是一件糟糕的事情！

那么有没有一种较好的办法来解决这种状况呢？

答案是有的。我们知道要解决这个问题，最理想的办法是在每个页面加载时，根据页面的url地址显式地设置当前菜单的高亮样式。这能完美地解决此类问题，并且这种方式无论用户如何恶意点击刷新按钮，高亮状态依旧保持不变。 知道了原理，要实现起来就容易多了。

【结构层】

一级菜单结构层：

可以看到在这个一级菜单中，其链接地址一般是没有参数值的。 二级菜单的结构层：

与一级菜单不同的是，我们将二级菜单中的链接地址加入两个参数值，pId参数指向的是顶部一级菜单的的序号，而sId则是菜单自己的顺序号。我们将这两个菜单的总容器ul都设置了两个不同中的ID，它们需要在JS中调用，所以千万不能少。

【样式层】

关于样式，其实都没有什么特别的地方，你可以随心所意地设置成你想要的样式，只是需要注意的地方是，我们需要单独设置菜单高亮的三种状态样式，以供JS动态调用。

【行为层】

因为要在行为层中控制菜单的三种状态，所以对于A链接标签，我们就不使用hover伪类来达到菜单的三种动态行为了，我们可以用onmouseover、onmouseout和onclick来模仿伪类的三种行为，这样好便于js的动态调整。并且为了达到行为、样式和结构的三层分离，我们也不用在A标签的html中去加上动态的行为控制代码，这不是一种良好的制作习惯。因此我们需要在页面的加载函数上做点文章，这就需要使用到onload函数，当页面一加载完后就动态绑定a标签的三种行为状态。

在页面一加载完成后，我们首先获取当前的页面url字符串，再根据这个字符串和一二级菜单中的A标签的href地址进行对比，如果存在相同项，则高亮此菜单项的样式。

详细的注释说明我都在下面的函数中一一标注出来，在此就不一一细述了。关键函数代码如下

Code
//根据URL地址的参数或字符串高亮当前菜单。

function hightLightMenu(firstMenuID,twoMenuID){

    var strUrl,strHref,subNavs,strLast,strParentID,strSelfID,parentID,selfID,strID;        

    var Navs=document.getElementById(firstMenuID).getElementsByTagName("a");                   

    // 如果链接没有参数，或者URL链接中不存在我们要获取的参数，则返回数组中的序号

    if(location.href.indexOf("?")==-1){

    strUrl=location.href.substring(location.href.lastIndexOf("/")+1);//取得URL页面名称        

       //一级菜单高亮                

       for (var i = 0; i < Navs.length; i++) {         

           //在IE6,IE7中strHref获得的是全路径，而在IE8和ff中获得的是页面名称，为了兼容，需要将它的字符串进行拆分

           strHref=Navs[i].getAttribute("href").substring(Navs[i].getAttribute("href").lastIndexOf('/')+1);               

           if(strUrl==strHref){

              //高亮当前菜单项                  

              addClass(Navs[i],"cur");        

           }

           else{//如果是其它项，则绑定鼠标两态事件                       

              (function(i){

                  var obj=Navs[i];              

               addEventHandler(obj,"mouseover",function(){overMe(obj)});

                  addEventHandler(obj,"mouseout",function(){outme(obj)});

              })(i)                       

           }                 

       }      

       //二级菜单高亮

       if (document.getElementById(twoMenuID) != null) {//判断是否存在二级菜单   

           //有可能二级菜单不存在，如首页只有一级菜单，所以当菜单id存在时，则         

           subNavs = document.getElementById("othermenu").getElementsByTagName('a');

           for (var n = 0; n < subNavs.length; n++) {

              hightlight(subNavs,n,0);//默认高亮第一个菜单项              

           }

       }

    }

    else{

       //如果url中带有参数的页面，则        

       strLast = location.href.substring(location.href.indexOf("?")+1);   

       strParentID=strLast.substring(0,strLast.indexOf("&"));

       strSelfID=strLast.substring(strLast.indexOf("&")+1); 

       parentID=strParentID.substring(strParentID.indexOf("=")+1);//获得第一个参数，这是一级菜单的id

       selfID=strSelfID.substring(strSelfID.indexOf("=")+1);//获得第二个参数，这是二级菜单的id   

       

       //一级菜单高亮  

       for (var i = 0; i < Navs.length; i++) {

           hightlight(Navs,i,parentID);                                                                

       }

       //二级菜单高亮

       if (document.getElementById(twoMenuID) != null) {//判断是否存在二级菜单          

           subNavs = document.getElementById(twoMenuID).getElementsByTagName('a');

           for (var n = 0; n < subNavs.length; n++) {

              strID=selfID - 1;           

              hightlight(subNavs,n,strID);              

           }

       }

    }      

}

//高亮函数

function hightlight(elementArray,inumber,curMenuIndex){

    if (inumber == curMenuIndex) {     

       addClass(elementArray[inumber],"cur");//高亮当前菜单样式

    }

    else {

       (function(inumber){

           var obj = elementArray[inumber];

           addEventHandler(obj, "mouseover", function(){overMe(obj)});//增加鼠标移上去时的事件

           addEventHandler(obj, "mouseout", function(){outme(obj)});//增加鼠标移走时的事件

       })(inumber)

    }   

}

经过如上一番设置，一个通用、兼容的高亮函数就诞生了，我们看看它的效果截图：

本案例的高亮函数在如下浏览器中测试通过：

IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Chrome,Safari4.0,opera

因为子页面较多，请下载本案例打包文件到本地测试：下载Demo

评论: 13　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

原创：冰极峰 转载请注明出处 时间：2009年7月19日 23:33:05

冰极峰教程系列之一：九宫格基本布局

冰极峰教程系列之二：牢不可破的九宫格布局

冰极峰教程系列之三：三层分离的完美九宫格

冰极峰教程系列之四：九宫格应用案例--极酷网页播放器设计

冰极峰教程系列之五：无hack并支持透明圆角框的全兼容九宫格布局

前言：在前面四篇文章中，我介绍了九宫格的原理及一个应用案例，本来已经告一段落了，但是那个布局还是有一定的局限性的。其最大的局限是不能应用四角圆角外面是透明的图片，而作为一个界面布局方式，如果不能应用透明的外圆角，那么这种布局的可扩展性就会大受影响，不能最大化限度地得以推广。本文就是要从根本上解决这个问题。

我知道这个问题的根源在于：中间的左右边框列垂直同高产生的，因为它们的父级容器是box这个总容器，而不是一个独立的容器，而底部的左右两个角容器是向上负偏移到它们的上面的，遮挡住了背景色。所以当圆角容器中的图片采用半透明或透明的图片时，其透明部分就会显示出左右两侧边框的图片背景出来。

在制作前面的《牢不可破的九宫格布局》的模型时，我就已经发现了这个问题，当时制作圆角图片也是采用的透明的圆角图片，可是后来发现这个问题后，为了减少麻烦，我又将透明的圆角片的透明部分加上一个和总容器相同的背景色，来避免了这个问题。但这个方法最终不是解决的终极办法，在我们的日常工作中，采用半透明的圆角来定制界面是很有必要的，因此在那篇文章中仅仅只是逃避了问题，而没有从根本上解决问题。在文章发布之后，终于有细心的朋友在试用之后，提出这个问题，哈哈，看看终于是无法偷懒来回避这个问题了。

知道了问题的根源后，要解决它也是一件简单的事情。

因为我这篇文章是建立在《牢不可破的九宫格布局》这篇文章的基础上的，如果还没有看过那篇文章的朋友，不妨先看了它后再来看这篇文章。这将有助于你的消化！

看来，要解决这个问题，我需要将中间部分作一些结构上的修改。因为我希望它的左右边框容器是和内容区是垂直同高的，也就是当内容区的文字内容的高度发生变化时，其左右边框的高度跟着同步调整其高度。这就是一个典型的三列同高布局。但与平时看到的三列布局有点不同的是，我希望中间的内容区的宽度填满整个中间的宽度，但它不是100%的宽度，而是100%减去左右两列边框的宽度，而这个宽度并不是一个百分比，它们都是有固定像素值的。这需要运用到我在上一篇文章中提到的方法来进行的解决。

为此我需要改变一下原来的结构：

【结构层】

我给中间的左中右三个容器增加一个父级容器，并给它定义一个类名middle，那么，现在的中间区域的结构应该是这样的：

【样式层】

我们再定义一下middle的样式，我们将原来的box的overflow:hidden;取消，将它加在middle容器上，让超出的部分截出隐藏。

这时需要特别指出的是，如果只是将middle这个容器设置为overflow:hidden的话，那么这个模型可以在IE6以上的所有浏览器中通过，但对于IE6来说，问题依然存在（你可以将此句删除，然后在IE6测试看看。）。最后加上zoom:1才能完美地解决这个问题。

基础模型的效果图如下：

此基础案例也包括在下面的下载压缩包中。你可以下载到本机进行测试。

【案例应用】

为了更直观地测试透明圆角框效果，我在body中加了一张上下渐变的水平平铺的背景图片，并且出于简化模型的需要，我将圆角框的图片的外圆角改成了透明的gif图片（PS：你也可以将它换成png-24半透明的圆角图片，当然就要注意IE6的兼容性问题，需要JS代码来支持。支持代码在下面的播放器的案例中已经应用了，你略加修改就可以使用。）。你可以参照下面的实例来设计图片，在应用你自己的设计前，你需要修改样式表中图片的宽高值。

案例模型的效果截图如下所示：

在上面的效果图中，可以看到在一个渐变背景下，其圆角框是透明的。你也以点击下面的“宽屏”、“全屏”按钮来测试当窗口放大时其透明圆角图片的完美应用。

本模型在以下浏览器中完美通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

点击这儿下载完整的压缩包：Demo

评论: 12　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

原创：冰极峰 转载请注明出处 时间：2009年6月29日 8:42:38

冰极峰教程系列之一：九宫格基本布局

冰极峰教程系列之二：牢不可破的九宫格布局

冰极峰教程系列之三：三层分离的完美九宫格

冰极峰教程系列之四：九宫格应用案例--极酷网页播放器

冰极峰教程系列之五：无hack并支持透明圆角框的全兼容九宫格布局

在前面的三篇系列文章中，我对九宫格布局作了详细的介绍。先从一个基本布局入手，将在制作过程中遇到的问题逐一进行了讲解。这三篇文章都是基本原理的讲解，没有一个有力的应用案例来证明这种原理是否正确，可能有些朋友已经有点急不可烦，也有网友要求我能提供案例。因此，在这一篇文章中，我将介绍一个九宫格案例—极酷的播放器。

在我的第三篇文章《三层分离的完美九宫格》中，我介绍了用JS封装html标签，以便于减少冗余的结构体，但这种方式也是有缺陷的，如果用户禁用了JS，将造成结构完全显示不出来，当然对于当今的上网条件来说，这应该不是一个大问题，但纵观国外的的一些网页设计，都是有这种考虑的必要的。这就需要优雅降级和功能弱化，但这样带来的结果和不应用JS封装是一样的。所以，鱼和熊掌不可兼得也。哎，这些都是题外话，还是来看看我们的一个极酷播放器是如何设计出来的吧！

先入为主，大家都想先看看结果，好，先秀出截图：

图一

一般对于这样一个有丰富色彩的播放器来说，都是要求其宽高值是可以动态调整，因此这样的图形用九宫格来做是非常适合的选择。

当然原理我也不再重述了，请参考我的系列文章中的《牢不可破的九宫格布局》，这个应用案例就是针对它来实现的。当然在制作中还是有些技巧可以帮我们更好地的完成任务。比如css sprites技术（可以查看我的另一篇文章《css sprites图片背景优化技术》），它能有利地减少图片的请求数，一般对于九宫格布局的应用来讲，其图片是比较多的，因为它至少需要八张图片分别来装饰四个角落和四条边。所以怎样减少图片数量，对于设计人员来说是一件不得不考虑的事情。

在本例中我将四角的图片合并成了一张图片，它们看起应该就是下面这个样子：

图二

在上图中我为了让大家看得仔细一点，几张图片的交界处用辅助线画了出来，我们应用图片定位原理将它们分别固定在四个角落上。它们在样式表中是如下方式来定义的：

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

图三

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

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

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

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

其结构是如下：

其样式如下：

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/ 

（本系列完）

评论: 17　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

原创：冰极峰 转载请注明出处 时间：2009年6月24日 8:40:41

冰极峰教程系列之一：九宫格基本布局

冰极峰教程系列之二：牢不可破的九宫格布局

冰极峰教程系列之三：三层分离的完美九宫格

冰极峰教程系列之四：九宫格应用案例--极酷网页播放器设计

冰极峰教程系列之五：无hack并支持透明圆角框的全兼容九宫格布局

在我的前一篇教程《牢不可破的九宫格布局》中，我介绍了一种比较完美的九宫格布局方法，它能完全弹性地调整自己的宽高，从而实现比较灵活的布局风格。

然而为了弹性功能完美地体现出来，所付出的代价还是很沉重的，从结构上看，其结构是比较臃肿的，但是每个节点又是必不可少的，无法精简，否则会导致其灵活性不够。

在实战运用中，可能好多设计师并不喜欢这种布局结构，嫌其结构冗余。

一个完美的九宫格设计应该是一种三层分离的结构，我想达到的理想的九宫格应该是这样的：

1、 只需要应用一个class样式给想应用九宫格布局的容器，就能自动创建这种布局。结构应该足够精简，只用很少的结构就能实现丰富的颜色风格。

2、 能够将这种布局样式应用于一个页面的多个容器中。

3、 三层分离的设计，能提供丰富的颜色皮肤方案，便于将不同的样式应用于多个风格迥异的盒子上。

4、 要足够健壮，能兼容大多数浏览器。

因此，在这一篇文章中，我会将这种布局尽量向着这种理想化的境界靠近，让它更宜于应用在各个方面。

对于一、二点，又想要保持其灵活性，又想要达到精简的效果，就是说想“鱼和熊掌兼得”，除了应用js封装外，并无其它的办法。你可以说这是一种“掩耳盗铃”的做法，是的，我不得不承认，这种用JS封装的办法，从本质上说并没有精简其结构，只不过将其结构都用动态的方式来创建，但对冗余的html结构确实有立竿见影的效果，一下子就将所有冗余的结构化于无形之中。

我们还是从三层分离的做法中了解如何改进我们的九宫格吧。 

【结构层】

这是我们要尽量精简的重点区域，我们用js的方式来动态创建其结构，所以现在的结构应该是如下的最最原始的结构了：

我唯一作了一点修改的是，将每一个盒子加了一个不同的ID，这为以后创建不同的颜色方式留下一个供样式表调用的钩子。通过这个ID在样式表中创建不同的图片或颜色风格。

我们应该只需要给div容器添加一个class=”box”，就会将九宫格布局成功地创建出来。这样是够简洁的了吧！ 

【样式层】

刚才在结构层中我们埋下了定制样式的突破点（那个不同的id），那么在写样式时就显得得心应手了。我们将所有的九个需要改变风格的地方的样式进行覆盖性重置，就能得到不同的风格样式。

当然你可以将不同的图片应用于background上作为其背景，我只是为了演示方便而调用了颜色值而已，具体的界面风格就看你的设计功夫了。

【行为层】

我们在结构层中已经将所有用于创建九宫格的结构全部删除了，那么在我们就要在行为层（js）中动态的创建它。

在这里我们会遇到一个问题：我们想将所有应用了class="box"的div都用循环的方式遍历出来，以便于我们只需要一个class就可以自动应用这种九宫格样式，可是在js的dom方法中并没有一个已经存在的函数，就像“getElementsByTagName”一样通过一个标签名称来获得一个对象数组的方法，我想在这儿我们最想要的是一个如同“getElementsByClassName”（从字面的意思上是指：根据一个class类名获得一个对象的数组）的方法了。

因此在我们的js中就需要写一个这样的自定义方法：为了更贴近地表达的我们的意思，我们就将它取名为“getElementsByClassName”。

这个方法就是传递一个class类名，然后获得一个应用了这个class的容器的对象数组。

获得了所有应用了这个class的div容器的对象数组后，我们就可以利用for循环遍历每个对象，然后分别给它内部装填我们刚才删除的九宫格结构。因此我们再创建一个函数，用来动态生成结构体：

然后我们利用window.onload函数在窗体一加载时就加载这个creatDiv（）方法。

window.onload=creatDiv;      

这样在整个页面加载成功后，会自动将所有应用了class=”box”的div容器加载成九宫格的结构样式。

经过上述的一番改头换面的修改后，一个更健壮，三层分离的完美九宫格就被我们打造出来了。这种布局可以应用到很多地方，并且因为其强大的自适应功能和灵活多变的风格更受广大朋友的喜爱。下面是演示效果截图：

本模型在以下浏览器中测试通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。 

（PS：因博客园屏蔽页面中的js文件，请下载下面的文件到本地观看。）

下载：演示Demo

评论: 10　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

原创：冰极峰 转载请注明出处 时间：2009年6月22日 8:40:16

冰极峰教程系列之一：九宫格基本布局

冰极峰教程系列之二：牢不可破的九宫格布局

冰极峰教程系列之三：三层分离的完美九宫格

冰极峰教程系列之四：九宫格应用案例--极酷网页播放器设计

冰极峰教程系列之五：无hack并支持透明圆角框的全兼容九宫格布局

在我的前一篇教程《九宫格基本布局》中，我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法，好像制作过程中一切都是顺理成章的事情，然而因为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的结构就可以做成如下的结构：   

然而这样定义会导致另外一个问题，这个问题在IE7以下的浏览器的都存在，因为我们定义了padding，会在下面的中间的主体层中也同时产生左右侧的内补丁，这里有点不明白的是：为什么会对IE7产生影响？

     因此其补救方法是在这儿针对IE6和IE7应用一个HACK技巧：

这句话是针对三种浏览器设置不同的偏移值，将b_l和b_r向左右偏移到指定的位置。

2、 b_l和b_r这两个容器的高度值必须相同，以使它们可以一直垂直向下平铺背景色。这样，当中间主体内容区（context）中内容的高度发生改变时，其两侧的背景色能一直和主体内容区（context）保持同一高度。也就是说它们能根据内容主体的高度而自由地拉伸自己的高度值。

我们可以采用在平时工作中经常用到的多列同高的方法来处理这个问题。这个方法就是采用内补丁和负外补丁相结合的方式来达到多列同高：

我们将m_l和m_r的下内补丁padding-bottom的值设置为一个相对比较大的值，比如我将它们设置为30000px（你可以将它设置为你想要的值），相信一般的情况下，是不会超过这个高度值了。然后将下外补丁（margin-bottom）设置为和下内补丁（padding-bottom）值相同的负值，将它拉回到原来的位置上，并将总容器（box）设置overflow:hidden;，截除多余的高度，就可以保证两列同高。

　 将上面两个难点问题解决后，余下的事情就是简单而愉快的事情了！

 【结构层】

     现在我们将结构层在前一个案例的基础上作了一下调整，因此就成了下面这样一种结构了：

     下面是主要的样式设置： 

经过上述设置后，我们的九宫格就算完成了，它是“牢不可破”的，会随着内容主体的宽高动态地向各个方向自由伸展。在此模型中，为了演示的效果，我将总容器的宽度设置了一个百分比50%，你可以根据你的实际需要调整它的大小，其内部会随着它的宽度值自动填充整个区域，不会撑破父容器。如下图所示：

你可以用八张图片来制作一个漂亮的九宫格盒子。看看它的完美表现。

本模型在以下浏览器中测试通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

评论: 18　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库

原创：冰极峰 转载请注明出处 时间：2009年6月18日 12:05:34

冰极峰教程系列之一：九宫格基本布局

冰极峰教程系列之二：牢不可破的九宫格布局

冰极峰教程系列之三：三层分离的完美九宫格

冰极峰教程系列之四：九宫格应用案例--极酷网页播放器设计

冰极峰教程系列之五：无hack并支持透明圆角框的全兼容九宫格布局

九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多，比如我们经常看到软件中的一个窗体，其实就是一个九宫格的典型应用，因为窗体需要在八个方向拉伸，所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会，这种布局逐渐被一些网页设计师运用在网页中去，用得最多的就是在圆角框布局中应用。

下图演示了九宫格的基本布局：

从上图可以看出，每一行包括三列，其中蓝色方块是顶角，这四个块是宽高固定的区域，而黄色的四个区域分别是四条边，这些都是要水平或垂直平铺的，而中间的橙色区域是装载内容的主要区域。

这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高，这种结构也是网页设计师是最想要的一种布局结构，它灵动而从容。

下面我们就来实现它：

【结构层】：

因为它要适应八个方向的伸展，所以每个方向都用一个div来实现，少一个则灵活性就不足。那么根据这个原理，我们可以得到如下的结构：

【样式层】：

根据结构，我们可以写出基本的样式。基本实现原理，是利用将总容器.box设置为相对定位并设置overflow:hidden;让超出它的地方全部被切除，并将其里面的八个方向的div设为绝对定位，并将它们的z-index设置为2，然后将四个角容器分别设置到四个角落上。

【注意】：

这里有两个地方需要注意到：

1、就是t_m和b_m这两个容器是需要水平平铺的，所以需要将它的z-index设置为比左右两角的div的z-index的值低，我们将它设置为z-index:1;这样它就置于t_l和t_r的下面了，然后，我们设置它的宽度为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>基本的九宫格(http://www.cnblogs.com/binyong)</title> <style type="text/css"> *{margin:0;padding:0;} .box{overflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#F34703;} .t_l,.t_m,.t_r{position:absolute;top:0;z-index:2;height:10px;font-size:0%;} .t_l{left:0;width:10px;background:blue;} .t_m{z-index:1;width:100%;background:orange;} .t_r{right:0;width:10px;background:blue;} .m_l,.m_r{position:absolute;z-index:2;width:10px;} .m_l{top:0px;left:0;z-index:1;background:orange;height:2000px;} .m_r{top:0px;right:0;z-index:1;background:orange;height:2000px;} .b_l,.b_m,.b_r{position:absolute;bottom:0;z-index:2;height:10px;font-size:0%;} .b_l{left:0;width:10px;background:blue;} .b_m{z-index:1;width:100%;background:orange;} .b_r{right:0;width:10px;background:blue;} .m_m{width:100%;font-size:12px;color:#fff;} h3{text-align:center;font-size:14px;line-height:26px;} .m_m p{line-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="http://www.cnblogs.com/binyong" 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的话，那么这种布局就已经基本满足你的需要了。

然而，对于一些比较追求完美的设计者来说，这是让人无法容忍的。

（后文待续...）

评论: 16　查看评论　发表评论

最新新闻：
· 美调查公司称苹果iPad配件成本最低219美元(2010-02-10 17:20)
· 摩尔庄园：儿童生意密码(2010-02-10 17:15)
· Facebook与美国在线合作 整合AIM动态功能(2010-02-10 16:41)
· NDepend 3.0已与Visual Studio集成(2010-02-10 16:17)
· Ruby in Steel 1.5发布，去除IronRuby支持(2010-02-10 16:14)

编辑推荐：Google Buzz相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库