简明现代魔法 -> CSS层叠样式表 -> DIV+CSS制作强大的九宫格
DIV+CSS制作强大的九宫格
2010-01-15
分析了一下某网站的九宫格做法，希望对你有帮助！ 要统一的XHTML架构下制作样式变化多端的栏目板块，唯有选择九宫格，尽管多了一些几额外的标签，令我看好的是例子中九宫格，能够在IE6中实现PNG透明图片，而样式又随内容多少而拉伸变化。
mdl父级分别包含mdl_t，mdl_c，mdl_b上中下的三块内容，而每块内容也分为左中右三块。一般板块图片会将切割成9小块，以达到无限拉伸的效果。
PNG图片在IE6里使用滤镜透明，而滤镜不支持背景重复显/图像横坐标/图像纵坐标，等属性。而这九宫格的做法则解决了这问题。
mdl_t_l，mdl_t_c，mdl_t_r，分别放置左中右的头部背景图片，其mdl_t_c可以放置标题内容，但只能放在mdl_t_c区域内，而且mdl_t_m则使用定位+z-index浮在其三个之上，配合top，left灵活调用位置。
板块的主要内容放置在mdl_c_c内，其内容也分为上中下三块。
mdl_b尾部为放置样式背景之用。
效果演示
作品欣赏
更多
1
2
3
4
5
5
6
1
2
3
4
5
6
module风格2
2
3
4
5
5
6
1
2
3
4
5
6
module风格2
更多例子，请看九宫格