仿照Div.IO做的一個網頁


  1. 總結

  Div.IO是一個響應式的網頁,對布局要求特別高,其中用到的是(1、左邊固定右邊自動隨瀏覽器大小縮放,2、中間固定兩邊縮放,3、所有塊隨瀏覽器自動縮放),有些布局我平時很少用上,在這次做的過程中,布局是非常重要的,我總結了一下,一般常用的有一下布局

  • 左自動+右固定
  • 右自動+左固定
  • 中自動+兩邊固定

     這三種,關鍵詞:{自動:block+margin,固定:float},這是我的方案。大家也可以寫出自己的方案。

  • 兩邊自動+中固定

    關鍵詞:block+margin

  • 所有都自動

   關鍵詞:float+width+%

  • 包圍固定高寬

    關鍵詞:float:(固定高寬)+block

    通過這種做的過程,我用上了這幾種布局,大家也可以寫寫。

 

    響應式分布,@media screen 這個東西少不了,使用起來挺簡單的。

   

    最后附加這幾天的成果的圖

    

 

這是最大寬度的圖

 

 

這是瀏覽器縮放到800的圖

 

 

這是瀏覽器縮到最小的圖

 

這幾天我做了三個頁面,不一一截圖了,需要源代碼,可以私聊我。

這里純屬個人觀點,如有出錯,望大家見解。

 

     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM