main是主要內容,sub是輔助內容,比如導航、相關文章等,extra是額外信息,比如廣" />

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

漸進增強式布局探討(上)

系統 2239 0

來看一個經典的三欄布局:
漸進增強式布局探討(上)
從內容出發( 漸進增強 的核心思想),一份合理的HTML結構如下:

    <div id="page">
    
<div id="hd"></div>
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
<div id="ft"></div>
</div>

main 是主要內容, sub 是輔助內容,比如導航、相關文章等, extra 是額外信息,比如廣告等,具體含義根據實際情況來定。書寫HTML文檔有個非常重要的原則是: 重要的內容放前面 。這能讓文檔更富語義,能提高可訪問性,對SEO也更友善。

寫好上面的代碼后,我們來看看如何實現三欄布局 ? 。(書寫HTML時,盡量以內容為向導,要避免一上來就考慮布局,這體現的是內容與表現的分離,同時也是 漸進增強 思想在工作流程中的體現。)

Table布局

經典得一塌糊涂的表格布局,在漸進增強面前落花流水——表格布局要求書寫HTML代碼時,首先考慮布局,而不是內容。不啰嗦,直接槍斃。

Float布局

浮動布局滿天飛:
漸進增強式布局探討(上)
優點是簡單,缺點呢?在 One True Layout 這篇文章中有詳細的探討。或者看我收集的一些 Float引發的Bugs .

考慮到IE的龐大市場,目前只好將浮動布局關禁閉了。

絕對定位布局

絕對定位非常簡單,非常精準。但面對不可預料的高度時,絕對定位就死翹翹了。可以看看 這篇文章 ,還有一個不錯的例子: Flanking Menus .

廢話不多說,也關禁閉。

負邊距布局

Ryan Brill在2004寫了一篇文章: Creating Liquid Layouts with Negative Margins . 文中的“發現”立刻讓布局世界迎來了“負來負去”的新時代。對于上面的三欄布局,需要先調整DOM結構:

    <div id="hd"></div>
    
<div id="bd">
<div class="content">
<div class="sub"></div>
<div class="main"></div>
</div>
<div class="extra"></div>
</div>
<div id="ft"></div>

最終的CSS實現請看 這里 。請仔細閱讀Ryan的原文,可以發現負邊距能解決兩欄布局中文檔結構的問題( main 可以放在 sub 前面)。但對于三欄布局,Ryan給出的解決方案需要添加額外的包裹層,對DOM結構也依舊存在依賴關系。

這個方法的最大價值是:開啟了負邊距的神奇大門,讓布局的實現思路立刻活躍了起來。

圣杯布局

2006年,Matthew Levine開始尋找布局圣杯: In Search of the Holy Grail . 這是一篇讓人贊嘆振奮的文章。Matthew靈活運用容器的內邊距、浮動元素的負邊距和相對定位,接近完美的實現了三欄布局。DOM結構也很好,無需額外標簽。但是,我們來看看多達27頁的評論吧。圣杯布局最令人頭疼的是: 在IE6下,左欄經常會神奇消失!!! (比如將IE6的窗口高度拖小點)評論中還反饋在IE7下也存在不少問題(我測試后,發現在IE7正式版下沒問題,評論中的IE7可能是beta版)。另外在Chrome下表現也有點詭異,需要小小hack. 還有那繁瑣的 padding, margin, left, right 計算,時刻需要一顆清晰的大腦,喝點小酒就徹底暈了……

這里還有篇文章專門分析了圣杯布局在IE6下的Bug:? Jump on hover in Ala’s Holy Grail layout .(萬惡的IE6啊,浪費了我們多少寶貴的時間)

2008年11月4日補充:這里有一個 改進版的圣杯布局 ,解決了所有問題,缺點是包裹層太多,唉。

總之:這是一個很美妙的布局,但在IE6尚未退出歷史舞臺的當今,圣杯布局可能并不是我們真正要找的圣杯。

偽絕對定位布局

聰明的同行們對完美布局的追求孜孜不倦。2008年我們迎來了奧運。Eric Sol 給奧運的獻禮是一個聰明的布局嘗試: Faux Absolute Positioning .

這個布局思路很簡單:先相對定位到最右邊,再用 margin-left 移過來。關于這個布局,曾經引發了淘寶UED內部的 熱烈討論 。若干月后,我和 明城 在不同的項目中采用了這一方法,結果發現在ie下,某些頁面會閃屏(頁面加載時能看見左移)。當時項目緊,沒細究,上周想重現卻怎么也重現不了(明城說頁面非常復雜的時候會閃屏,但具體原因沒找出來)。今天看原文的評論,有人指出在 IE6下,設置背景圖會導致這個布局徹底完蛋

仔細想來,這個布局最讓人擔心的是:為什么一開始要將所有 item left: 100% ? 這個太邪惡了,讓人不放心。

“借尸還魂”的Table布局

乍一看,這個布局很雷人: 基于display:table的CSS布局 。作者作了解釋:在css里使用 table-cell 之類的聲明,僅是聲明渲染方式,并不影響HTML文檔中的語義。從這個角度講,這種布局方式的確不錯,而且很容易就可以做到等高,也不用考慮清除浮動等擾人的問題。

但是,又是IE成了絆腳石。在IE中,這個布局需要IE8才支持。不過,即便所有瀏覽器都支持了,我為什么老覺得有點“借尸還魂”的感覺?

更多

布局世界精彩紛呈,下面這些文章也非常有影響力:

  • Eric的 Any-Order Columns , 對于固定寬度的三欄布局,Eric的方案非常優秀。
  • 大名鼎鼎的 One True Layout , 里面很多總結性質的研究,非常值得一讀。

小結

可以看出,有不少布局(比如圣杯布局、偽絕對定位布局、One True Layout等)都符合漸進增強的工作流程。圣杯布局和One True Layout里,都把 negative margin 發揮到了極致(讓我對浮動元素的負邊距有了徹底的了解)。偽絕對定位布局則讓人很不放心 left: 100% ,用來解決原文中的問題感覺不錯,但如果用來作為整個頁面的布局,則有點邪惡。

漸進增強式布局探討(上)


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 肃宁县| 梧州市| 九江市| 徐汇区| 措美县| 疏勒县| 隆子县| 佛坪县| 伊春市| 库尔勒市| 托克托县| 鄯善县| 金昌市| 桓台县| 临猗县| 新宁县| 宁阳县| 万全县| 始兴县| 塘沽区| 柘城县| 建平县| 陆川县| 丰台区| 浦东新区| 黔西县| 昆山市| 松阳县| 沅陵县| 大足县| 乡城县| 米脂县| 南川市| 应城市| 高州市| 元氏县| 丁青县| 石门县| 定襄县| 绥阳县| 张家口市|