99久久精品免费观看国产_久久无码人妻一区二区三区_50岁熟妇的呻吟声对白_毛很浓密超多黑毛的少妇

現(xian)實中(zhong)，設計(ji)師通(tong)常(chang)混合使(shi)用固(gu)定寬度(du)、流(liu)式布(bu)局(ju)或者彈性布(bu)局(ju)元素，為用戶(hu)提供(gong)每種方(fang)式的優點，并且將缺點降(jiang)低到最小。

例(li)如，內(nei)容區域(yu)通(tong)常會(hui)使(shi)用em 單位（以此來確保每(mei)行的適當長度以及在IE6 下的字(zi)體縮放）。側(ce)邊欄通(tong)常使(shi)用固定單位（因(yin)為側(ce)邊欄通(tong)常會(hui)包(bao)含固定寬度的Ba

nner，這樣(yang)固定寬度(du)才比較(jiao)可行）。另(ling)外一(yi)個(ge)相關(guan)的技術是(shi)為流式內(nei)容指定“最(zui)小寬度(du)”和“最(zui)大寬度(du)”屬性(xing)。使用(yong)CSS 屬性(xing)而(er)不(bu)是(shi)彈性(xing)元素(su)，讓用(yong)戶可以(yi)根據個(ge)人喜好調整每行的長(chang)度(du)。

Jello-liquid 布局雖然不(bu)是很(hen)(hen)流行(xing)，但卻比(bi)較(jiao)有(you)趣(qu)（“Jello ：A Different LiquidLayout”，uwmike.com）。為了(le)保持內(nei)容(rong)區的(de)(de)可讀性，他努力(li)降低布局增長時比(bi)例(li)增長的(de)(de)速度。所以，一個自適(shi)應布局在1024×768（960÷1024=0.9375）視(shi)口中(zhong)(zhong)具有(you)960 像(xiang)素(su)寬度，在窗口增長到(dao)1440×900（1440÷1350=0.9375）時會得到(dao)一個比(bi)1350 像(xiang)素(su)小的(de)(de)寬度。為了(le)實現這(zhe)種效果，布局中(zhong)(zhong)很(hen)(hen)大一部分元(yuan)(yuan)素(su)都使(shi)用了(le)固定的(de)(de)像(xiang)素(su)值，剩下的(de)(de)元(yuan)(yuan)素(su)使(shi)用了(le)與(yu)窗口寬度相關的(de)(de)相對值。

固定部分占(zhan)布(bu)局的比(bi)例越小(xiao)，布(bu)局隨著窗(chuang)口拉伸(shen)時(shi)所獲得效果就越好。很簡單、也很智(zhi)能。

另(ling)外一(yi)個有趣(qu)的(de)方法是結合了流(liu)式和(he)彈(dan)性(xing)元素的(de)流(liu)式彈(dan)性(xing)布(bu)(bu)局(ju)（fluid elasticlayout）。這種(zhong)布(bu)(bu)局(ju)基于em 單位，但是使(shi)用(yong)相(xiang)對值(zhi)設置了“最(zui)小(xiao)寬(kuan)度(du)(du)”和(he)“最(zui)大(da)寬(kuan)度(du)(du)”（考慮(lv)了窗(chuang)口(kou)(kou)的(de)寬(kuan)度(du)(du)，賦予用(yong)戶將布(bu)(bu)局(ju)限制在一(yi)定(ding)縮(suo)放范圍內(nei)的(de)能力）。通過(guo)設置最(zui)大(da)和(he)最(zui)小(xiao)寬(kuan)度(du)(du)，文本(ben)縮(suo)放到一(yi)定(ding)程度(du)(du)的(de)時候會停止變化(hua)。布(bu)(bu)局(ju)隨著窗(chuang)口(kou)(kou)的(de)變化(hua)而自(zi)動(dong)調整保留了適應(ying)性(xing)，同時也是彈(dan)性(xing)的(de)。在窗(chuang)口(kou)(kou)尺寸(cun)或者字體尺寸(cun)發生(sheng)變化(hua)時，各列的(de)寬(kuan)度(du)(du)在自(zi)動(dong)變化(hua)。

在下面(mian)的例子中，為(wei)容器和每(mei)一列設置了“max-width”屬性。這樣(yang)布局就(jiu)會限(xian)制在整個視口的寬(kuan)度。同(tong)樣(yang)，在較老版本(ben)的IE 中并(bing)不支持“max-width”，所(suo)

以我們需要為IE 做一(yi)些特殊的(de)處理，代碼(ma)如(ru)下所示(shi)（在下一(yi)個例子中將不再(zai)列(lie)出）。2.7 哪種布局(ju)最適合您的(de)網站(zhan)？

固定(ding)寬度(du)的方法通常(chang)在帶(dai)有大(da)量(liang)圖片的高級視覺布(bu)(bu)局(ju)中表(biao)現良(liang)好(hao)（例如娛樂(le)、促銷或(huo)者基于Flash 的網站(zhan)，還(huan)有一些作品集頁面(mian)），這(zhe)樣圖片能夠通過精確的定(ding)位實(shi)現更(geng)加準確、較少錯誤的設計。實(shi)現這(zhe)種布(bu)(bu)局(ju)，設計師需要考慮(lv)用(yong)戶的平(ping)均情(qing)況(kuang)，確保設計的布(bu)(bu)局(ju)對大(da)部分用(yong)戶不會(hui)顯(xian)得太窄或(huo)者太寬，在不同瀏覽(lan)器(qi)間保持(chi)良(liang)好(hao)的可(ke)用(yong)性。編寫固定(ding)布(bu)(bu)局(ju)同樣比較規則和直接(jie)，開發人(ren)員不需要為(wei)各(ge)種元素之間的關系和平(ping)衡耗費太多心(xin)思。

對于哪種布局最合(he)適不會得到標準答案。限于使用(yong)環境、時間限制以(yi)及設計師的技能(neng)，每(mei)種布局都(dou)有(you)特定的應(ying)用(yong)情況。

如(ru)果這(zhe)正是(shi)(shi)你(ni)的(de)想法，也(ye)許(xu)你(ni)會考慮在(zai)設計中使(shi)用(yong)流(liu)式(shi)布局(ju)(ju)(ju)。這(zhe)種布局(ju)(ju)(ju)制作非常耗時，也(ye)不(bu)是(shi)(shi)很容易開發，并且在(zai)一些不(bu)可預知的(de)環境中存在(zai)一定風險，但(dan)是(shi)(shi)提(ti)供(gong)了用(yong)戶根據喜好調整布局(ju)(ju)(ju)的(de)特性(xing)。流(liu)式(shi)布局(ju)(ju)(ju)具(ju)有(you)(you)較高的(de)生產(chan)成本，但(dan)是(shi)(shi)顯著降(jiang)低(di)了維護成本，同時為(wei)靈活性(xing)和跨分辨率(lv)的(de)網站(zhan)提(ti)供(gong)堅(jian)實的(de)基礎。設計師只需要確認內容區具(ju)有(you)(you)合適的(de)行寬，并且在(zai)必要的(de)情況下使(shi)用(yong)“minwidth”和“Max-width”。

是(shi)否仍然(ran)猶(you)豫(yu)不決？彈性(xing)(xing)或者部(bu)分彈性(xing)(xing)的(de)設計是(shi)另外一個選(xuan)擇(ze)。在(zai)正確使用(yong)的(de)前提下，彈性(xing)(xing)布(bu)局在(zai)帶來了(le)(le)更多可(ke)預測性(xing)(xing)的(de)同時(shi)保持(chi)了(le)(le)布(bu)局的(de)靈活(huo)性(xing)(xing)。因為(wei)彈性(xing)(xing)布(bu)

局(ju)(ju)依(yi)賴于字體大(da)小(xiao)（而(er)不是瀏覽器(qi)的(de)(de)窗口尺(chi)寸），彈性布局(ju)(ju)允(yun)許設計(ji)師“凍結”布局(ju)(ju)中(zhong)區塊(kuai)間的(de)(de)比(bi)例(li)，確保(bao)元素之間的(de)(de)平衡和(he)良(liang)好的(de)(de)可(ke)讀性。特別是在文本較多(duo)的(de)(de)網(wang)(wang)站中(zhong)，保(bao)持(chi)良(liang)好的(de)(de)可(ke)讀性的(de)(de)要求非常嚴格(ge)（固定布局(ju)(ju)中(zhong)也一(yi)樣重(zhong)要）。彈性布局(ju)(ju)更(geng)多(duo)的(de)(de)是用在雜志、在線(xian)商店、博客或者類似的(de)(de)網(wang)(wang)站上。聰明的(de)(de)流式網(wang)(wang)格(ge)使(shi)用者可(ke)以創建既忠實(shi)于原(yuan)(yuan)始設計(ji)比(bi)例(li)和(he)經(jing)典圖(tu)片設計(ji)原(yuan)(yuan)則，又保(bao)持(chi)適應性的(de)(de)布局(ju)(ju)。

一(yi)些設計師希望在不同瀏覽器之(zhi)間獲得完美的一(yi)致，流式設計的支持者們卻認為布局并不需要在不同平臺和分(fen)辨(bian)率下保持一(yi)致。

實際工作中，設計師(shi)經常(chang)為(wei)字體(ti)和(he)(he)容器使(shi)用em 單位，而其(qi)他元素(su)則靈活地使(shi)用像素(su)和(he)(he)相對(dui)值(zhi)來建立一個(ge)彈性(xing)的(de)布局。這(zhe)些或者相似(si)的(de)混合布局在實際情況(kuang)中最常(chang)見，反(fan)映了設計師(shi)希望(wang)為(wei)每種情況(kuang)找到最佳解決方案的(de)努力。

在總結之前，有(you)必(bi)要(yao)提一下智能手機(ji)、上網本和(he)游戲終端，這(zhe)(zhe)些(xie)(xie)設備現(xian)在都可以進行(xing)網頁(ye)瀏覽，所(suo)以更(geng)低（或(huo)者更(geng)高）的(de)分辨(bian)率變(bian)得越來越重要(yao)，而且應當進行(xing)認(ren)真考慮。對于(yu)(yu)這(zhe)(zhe)類(lei)平臺，動態的(de)分辨(bian)率切換(huan)技術將會(hui)非常有(you)用，而且在將來擴展你的(de)布局(ju)類(lei)型時會(hui)是(shi)不二的(de)選擇。雖然構建自適應性的(de)布局(ju)需要(yao)耗費很多(duo)時間，但是(shi)由于(yu)(yu)能夠處理(li)或(huo)小或(huo)大的(de)各種類(lei)型的(de)分辨(bian)率，會(hui)幫助(zhu)設計師為用戶(hu)呈現(xian)最合(he)適的(de)效(xiao)果。隨著屏(ping)幕寬度的(de)不斷增加，使用所(suo)有(you)這(zhe)(zhe)些(xie)(xie)技巧只是(shi)個時間問題。