自适应宽度和高度的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部分了。