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

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

CSS在大部分用數值作為參數的樣式屬性都提供了百分比,width寬度屬性也不例外,在這裡我們將寬度由一列固定寬度的300px,改為80%,從下邊的預覽效果中可以看到,div的寬度已經變為了瀏覽器寬度的80%的值。自適應的優勢就是當擴大或縮小瀏覽器視窗大小時,其寬度還將維持在與瀏覽器當前寬度的比例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>AA25.CN_一列自適應寬度</title> <style type="text/css"> <!-- #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 80%; } --> </style> </head> <body> 一列自適應寬度(AA25.CN) </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
只用在設定寬度時由原來的300px,改為80%即可。
  • 相關文章

    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.