页签及盒子的web标准实现

页签及盒子示例下载

页签及盒子是html界面最常见不过的组件。本博文给出它们的一个示例，并作简要分析。本示例的界面效果如下图所示：

（您还可以通过上面的链接下载示例，查看实际效果）

 

下面给出本示例的特性及代码。以下文字描述不多，但相信您很容易就可以从界面效果图以及实现代码中分析出以下所列每个特性的具体含义。

一、页签

本页签具有以下特性：
1、为每个页签自定义背景图；
2、当前页签突出显示，当前页签的底部是没有横线的；
3、所有页签的背景图合成一张图（css sprite）以提高性能（减少了对图片的http请求次数）；
4、兼容各主流浏览器。

实现页签的html代码如下：

        <div class="hd">

            <ul class="tab_ctrl clearfix">

                <li class="tab_family"><span class="current"><a href="javascript:void 0;" hidefocus="true">我和我家</a></span></li>

                <li class="tab_relatives"><span><a href="javascript:void 0;" hidefocus="true">我的亲戚</a></span></li>

                <li class="tab_friends"><span><a href="javascript:void 0;" hidefocus="true">我的朋友</a></span></li>

            </ul>

        </div>

实现页签的css代码如下：

/*tab*/

.tab_ctrl{margin-left:8px;}

.tab_ctrl li{float:left;margin-right:12px;}

.tab_ctrl span{display:block;}

.tab_ctrl span a{outline: none;}

.tab_ctrl .tab_family a,.tab_ctrl .tab_relatives a,.tab_ctrl .tab_friends a

{display:block;position:relative;top:3px;width:175px;height:43px;text-indent:-9999px;overflow:hidden;}

.tab_ctrl .tab_family a{background-position:0 -50px;}

.tab_ctrl .tab_relatives a{background-position:-182px -50px;}

.tab_ctrl .tab_friends a{background-position:-363px -50px;}

.tab_ctrl .tab_family .current a{position:relative;top:1px;height:46px;background-position:0 0;}

.tab_ctrl .tab_relatives .current a{position:relative;top:1px;height:46px;background-position:-182px 0;}

.tab_ctrl .tab_friends .current a{position:relative;top:1px;height:46px;background-position:-363px 0;}

二、盒子

本盒子具有以下特性：
1、支持任意样式的盒角，比如椭圆、内凹弧、折角等；
2、支持任意样式的边框，比如颜色渐变、阴影；
3、高度按内容多少自适应；
4、实现方式简单，一目了然；
5、兼容各主流浏览器。

实现盒子的html代码如下：

        <div class="bg_left"><div class="bg_right"><div class="bg_top"><div class="bg_bottom">

        <ul class="bd">

            <li class="bd_family current">

                我和我家

            </li>

            <li class="bd_relatives">

                我的亲戚

            </li>

            <li class="bd_friends">

                我的朋友

            </li>

        </ul>

        </div></div></div></div>

实现盒子的css代码如下：

/*box*/

.icomm_box{margin-bottom:10px;}

.icomm_box .hd{position:relative;padding-right:15px;}

.icomm_box .bg_left{background:url("box_left.png") repeat-y;}

.icomm_box .bg_right{background:url("box_right.png") repeat-y;background-position:right;}

.icomm_box .bg_top{background:url("box_top.png") no-repeat;}

.icomm_box .bg_bottom{background:url("box_bottom.png") no-repeat;background-position:bottom;}

.icomm_box .bd{zoom:1;padding:20px;}

三、扩展阅读

关于盒角的实现，早有很多人做过研究，实现方式多种多样，各有利弊，您可以访问这里获取更多信息。要特别指出的是，兼容IE6的圆角实现也可以不用图片哦，不过这种实现的圆角从视觉上会带锯齿（只有使用颜色渐变才能消除锯齿感）。

看到这么多的实现方式，您可能会晕头转向。到底哪一种实现方式最好呢？之前三年我做C#程序员，感觉轻松自如。如今做web前端，常常会为确定一种最佳的实现方案而折腾得够呛。不过，相信随着经验的积累，会越来越轻松的。

其实，每种实现方式都有利有弊，怎么选择？我一般会从以下几个方面考虑，然后再根据实际需求进行抉择：
1、对界面设计的还原度。
2、实现的复杂度（代码量和代码结构）。
3、性能高低。
4、扩展性(应对变化的能力)。

在对界面设计的还原度上，我建议给IE8及先前版本低优先级（“优雅降级”）。不要再让过时的浏览器折腾我们，让我们紧跟web前进的步伐，让我们为埋葬过时的浏览器贡献力量——就连微软也在搬石头砸自己的脚噻！: )

CSS是一门描述性的语言，我们通过它设置我们要达到的效果，而不是通过编写逻辑实现功能。要很好的驾驽它，仅凭我们的逻辑思维是不够的，往往更需要的是足够的经验+宽广的想象力+吃苦折腾的精神（在天朝IE6的大背景之下别无选择） 。