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

文章内容

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

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

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

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

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

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

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

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

2,这套结构合?#24335;?#36827;增强式工作流程。细心的你可能已经发现,所有两栏结构和三栏结构,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的?#32454;?#28014;动hack:_zoom: 1;)

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

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

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

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

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 北京pk10单吊一码计划 神鬼奇航官网 fm2011沙尔克04 好多寿司在线客服 都灵vs切沃 二分彩app 法国第戎高等商学院 鹿岛鹿角队 金黄时代走势图 佛罗伦萨读后感200字