自适应宽度和高度的Panel（html、css篇）
近期的项目过程中，涉及到要做一系列自适应高度和宽度的Panel（注意，是html。不是Flex里的Panel组件，呵呵）。
演示地址：http://www.myliwu.com/xzwBlog/panel/Panel.html
就实现效果本身来说并不难，只是如何选择一套比较简洁清晰的结构以及良好的CSS代码而已。经过几套结构的修改，最终成型的HTML结构如下：
<div class="exHead">
<div class="hTxt">
<div class="hTxtContent"><h2>展会直播</h2></div>
</div>
<div class="hLeft"></div>
<div class="hRight"></div>
</div>
<div class="exBody">
<div class="content">内容区域</div>
</div>
<div class="exFoot">
<div class="fLeft"></div>
<div class="fRight"></div>
</div>
</div>
经过多次测试，我觉得这套结构相对来说非常适合做有圆角的自适应。当然，如果万恶的“哀抑X”浏览器都支持border-radius的时候，就不用这么麻烦了。由上代码可以看出，还是有些不足，就是为了达到实现圆角自适应宽度，分别放置了
<div class="hRight"></div>
<div class="fLeft"></div>
<div class="fRight"></div>
这四个空DIV来装圆角背景图片
这套结构的原理其实就是《JS+CSS实现左中右3栏布局先显示中栏内容》里面介绍的。只不过在这里，左右侧的菜单栏变成了放置圆角图片的空白层而已。
接着看CSS代码。整套Panel样式由两部分组成，基础骨架样式+风格样式。基础骨架样式负责整体骨架结构，就相当于造船的龙骨结构。然后风格样式部分就相当于给模型包上外壳，具体是用木头包小木筏，还是塑料包玩具船，或是用钢材包航空母舰，就随你玩咯。首先来看基础骨架：
2 #exhibition{width:800px; margin:20px auto}
3 #exhibition .mg10{margin:10px}
4 .exhibiton {}
5 .exHead, .exHead .hLeft, .exHead .hRight{background:url(img/h.gif) no-repeat}
6 .exFoot, .exFoot .fLeft, .exFoot .fRight{background:url(img/f.gif) no-repeat}
7 .exHead{height:40px; width:100%}
8 .hTxt{float:left; height:40px; width:100%}
9 .hTxtContent{margin:0 10px}
10 .hTxtContent h2 {font-size:14px; line-height:40px}
11 .hLeft, .hRight{width:10px; height:40px; float:left; overflow:hidden}
12 .hLeft{margin-left:-100%}
13 .hRight{margin-left:-10px}
14 .exFoot{height:10px; width:100%}
15 .fLeft, .fRight{height:10px; width:10px; overflow:hidden}
16 .fLeft{float:left}
17 .fRight{float:right}
18 .exBody{min-height:50px;_height:50px}
19 .exBody .content{ line-height:1.5; font-size:12px; padding:10px}
接着看具体风格样式代码：
2 .ex01 .hLeft{background-position:0 -480px;}
3 .ex01 .hRight{background-position:0 -560px;}
4 .ex01 .exFoot{background-position:0 -130px; background-repeat:repeat-x}
5 .ex01 .fLeft {background-position:0 -120px;}
6 .ex01 .fRight{background-position:0 -140px;}
7 .ex01 .exBody{border:3px solid #FFD52F; border-top:none; border-bottom:none}
8
9 .ex02 .exHead{background-position:0 -280px; background-repeat:repeat-x}
10 .ex02 .hLeft{background-position:0 -240px;}
11 .ex02 .hRight{background-position:0 -320px;}
12 .ex02 .exFoot{background-position:0 -40px; background-repeat:repeat-x}
13 .ex02 .fLeft {background-position:0 -30px;}
14 .ex02 .fRight{background-position:0 -50px;}
15 .ex02 .exBody{border:1px solid #DADADA; background:#F7F7F8; border-top:none; border-bottom:none}
16
17 .ex03 .exHead{background-position:0 -400px; background-repeat:repeat-x}
18 .ex03 .hLeft{background-position:0 -360px;}
19 .ex03 .hRight{background-position:0 -440px;}
20 .ex03 .exFoot{background-position:0 -70px; background-repeat:repeat-x}
21 .ex03 .fLeft {background-position:0 -60px;}
22 .ex03 .fRight{background-position:0 -80px;}
23 .ex03 .exBody{border:1px solid #DADADA; border-top:none; border-bottom:none}
24
因为有了完善的龙骨结构代码在前，风格样式代码也就随之简洁流畅，只要将不同部位的背景图片定位准确就OK了，没有太多的冗余代码，结构一目了然。
当这个模型案例做完后，我当时想如果就这么放个静态页面展示，估计效果不好。虽然很多达人们知道借助firebug能动态测试自适应的效果，但毕竟不直观。而且在“哀抑x”下就没那么方便了，只能贴代码手工测试。万一某些看官工作有比较忙，又怕遇到的是一个枪手文章（我就经常搜到T_T）说得天马行空，溜一圈就不行了。所以我就加个了JS测试代码，有空再贴上来备忘（已完成，地址在这里），这里就只说html+CSS部分了。
