萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS網頁布局入門教程2：一列自適應寬度
CSS網頁布局入門教程2：一列自適應寬度
自適應布局是網頁設計中常見的布局形式，自適應的布局能夠根據浏覽器窗口的大小，自動改變其寬度和高度值，是一種非常靈活的布局形式，良好的自適應布局網站對不同分辨率的顯示器都能提供最好的顯示效果。實際上div默認狀態的占據整行的空間，便是寬度為100%的自適應布局的表現形式，一列自適應布局需要我們做的工作也非常簡單，只需要將寬度由固定值改為百分比值的形式即可
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 80%;
}
CSS在大部分用數值作為參數的樣式屬性都提供了百分比，width寬度屬性也不例外，在這裡我們將寬度由一列固定寬度的300px，改為80%，從下邊的預覽效果中可以看到，div的寬度已經變為了浏覽器寬度的80%的值。自適應的優勢就是當擴大或縮小浏覽器窗口大小時，其寬度還將維持在與浏覽器當前寬度的比例。
具體操作步驟請參考：CSS網頁布局入門教程1：一列固定寬度
只用在設置寬度時由原來的300px，改為80%即可。
DivCSS教程排行
相關文章
copyright © 萬盛學電腦網 all rights reserved