CSS網頁布局入門教程2:一列自適應寬度

來源:互聯網
上載者:User

調適型配置是網頁設計中常見的布局形式,自適應的布局能夠根據瀏覽器視窗的大小,自動改變其寬度和高度值,是一種非常靈活的布局形式,良好的調適型配置網站對不同解析度的顯示器都能提供最好的顯示效果。實際上div預設狀態的佔據整行的空間,便是寬度為100%的調適型配置的表現形式,一列調適型配置需要我們做的工作也非常簡單,只需要將寬度由固定值改為百分比值的形式即可。 複製代碼 代碼如下:#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 80%;
}

CSS在大部分用數值作為參數的樣式屬性都提供了百分比,width寬度屬性也不例外,在這裡我們將寬度由一列固定寬度的300px,改為80%,從下邊的預覽效果中可以看到,div的寬度已經變為了瀏覽器寬度的80%的值。自適應的優勢就是當擴大或縮小瀏覽器視窗大小時,其寬度還將維持在與瀏覽器當前寬度的比例。 xmlns="http://www.w3.org/1999/xhtml">


一列自適應寬度(AA25.CN)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.