简明现代魔法 -> 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

更多例子,请看九宫格

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们