网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

射雕双飞翼布局的几个补充布局

日期:2013-11-29  来源:攀枝花惠康网络公司

前段时刻一向在开发css框架,同事提醒我看射雕的双飞翼结构,很是不错的一个结构,引用射雕自己的话:

1.实现了内容与结构的分手,即Eric提到的Any-Order Columns.
2.main部媒崆自顺应宽度的,很轻易在定宽结构和流体结构中切换。
3.任何一栏都可所以最高栏,不会出问题。
5.在浏览器上的兼容性很是好,IE5.5以上都撑持。

那么事实什么是双飞翼结构呢?巨匠可以看看;

渐进增强式结构切磋(上) 渐进增强式结构切磋(下) 网页栅格系统研究(4):手艺实现

其实近似这种结构国外有人很早也做了,统一个html文档经由过程css样式能做出40种分歧的结构揭示,当然甚至可以更多,搜罗我也曾经关注过,不外小我认为抉择网页结构的应该是信息架构,而不纯粹的依靠html文档流和css样式。

1,如不美观做像Blueprint一样的框架,就是950,24列的各类形式都要有的话,那么这个双飞翼栅格结构框架的代码不是一般的多,因为他转变太多,太矫捷了,这一点很是主要。射雕也在网页栅格系统研究(4):手艺实现中写到:

2,这套结构合适渐进增强式工作流程。细心的你可能已经发现,所有两栏结构和三栏结构,HTML中的DOM结构是完全一样的,只有最外层div的class分歧。如不美观要交流摆布栏,只要很是简单的改削下class就可以;

今天细心的研究了射雕的双飞翼,自己在射雕demo的基本上,在3栏模式下做了一点扩展,这些结构在他的Grids Layout Demo中没有看到,所以今天做了几个填补结构:http://www.css88.com/demo/Grids%20Layout/cssA/to.html

射雕还专门做了个栅格化的双飞翼demo:Grids Layout Demo

回到CSS框架,双飞翼结构能做框架吗,毫无疑问他是可以的,可是会有以下几个问题:


4.需要的hack很是少(就一个针对ie6的断根浮动hack:_zoom: 1;)

这套栅格系统并不能实现所有结构。这和YUI Grids近似,只能实现预定的一些结构。好比三栏结构,今朝只插手了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情形,…对于统一个站点来说,太多分歧的三栏比例不是好事

3,经由过程两栏结构和三栏结构可以组合出多种结构。

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。

客服热线:tel(谢先生)  客服QQ:1323605005  
服务邮箱:yewubu@huikon.com(售前咨询)  jishubu@huikon.com(技术部)  shouhou@huikon.com(售后服务)
公司地址:四川省攀枝花市
邮编:617200