CSS——布局

標籤：pre   滾動   js庫   nav   width   工作量   code   containe   相容   

CSS的布局方式有：雙飛翼、多欄、彈性、流式、瀑布流、響應式布局 

這裡主要說三種常用的布局方式：

（1）瀑布流布局
視覺表現為參差不齊的多欄布局，隨著頁面捲軸向下滾動，不斷載入資料區塊並附加至當前尾部。
優點
a、有效降低了介面複雜度，節省了空間，不需要臃腫複雜的頁碼導航連結或按鈕。
b、對觸屏裝置來說，互動方式更符合直覺：在行動裝置 App的互動環境當中，通過向上滑動進行滾屏的操作已經成為最基本的使用者習慣，而且所需要的操作精準程度遠遠低於點選連結或按鈕。
c、更高的參與度：以上兩點所帶來的互動便捷性可以使使用者將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。
缺點
a、有限的用例：
無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。
b、額外的複雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定製化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和裝置相容性等方面的表現也參差不齊，測試與調整工作需要操作。
c、考慮哪種方式更利於SEO，集中在一頁當中動態載入資料，與一頁一頁的輸出相比。

(2)、流式布局 
固定式配置和流式布局在網頁設計中最常用的兩種布局方式。固定式配置能呈現網頁的原始設計效果，流式布局則不受視窗寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據用戶端解析度的大小來進行合理的顯示。

(3)、響應式布局
一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。
響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕行動裝置的普及，隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
優點
a、面對不同解析度裝置靈活性強
b、能夠快捷解決多裝置顯示適應問題
缺點
a、相容各種裝置工作量大，效率低下
b、代碼累贅，會出現隱藏無用的元素，載入時間加長
c、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
d、一定程度上改變了網站原有的布局結構，會出現使用者混淆的情況

 

布局代碼例子：

（1）兩列等比例布局

css

 1 #content{ 2   float:left; 3   width:500px; 4   width:66%;     5 } 6  7 #side{ 8   float:right; 9   width:500px;10   width:33%;    11 }

html

<div id="content"></div><div id="side"></div>

(2)1-3-1中列和側列寬度固定的變寬布局

即中列和左側是固定的，右側是變寬的

CSS

.header, .footer, .container {    margin: 0 auto;    width: 85%;}.navi {    flaot: left;    width: 150px;}.content {    float: left;    width: 250px;}.sideWrap {    float: right;    width: 100%;    margin-right: -400px;}.side {    margin-right: 400px;}.footer {    clear: both;}

html

<div class="header">header</div><div class="container">container   <div class="navi">navi</div>    <div class="content">content</div>    <div class="sideWrap">sideWrap         <div class="side">side</div>     </div></div><div class="footer">footer</div>

 

CSS——布局