網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

射雕雙飛翼布局的幾個補充布局

日期: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  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图