今日進度

HTML5‧CSS3 最強圖解實戰講座的Lesson10

學習筆記

今日新知

1. 固定式vs流動式

• 固定式版面
  • 以px為單位設定，版面大小不會隨螢幕改變
• 流動式版面
  • 以%為單位設定，版面大小會隨螢幕改變
    • 液態版面:依視窗大小自動伸縮
    • 彈性版面(比較多人用):設定最小跟最大值，在一定大小內伸縮
    • 流動式隔線版面:隨視窗大小改變會改變格數，格子本身大小不會改變

2. 分欄數

• 單欄式版面
  • 從上到下只有一欄，常用在手機(適合看條狀)
• 多欄式版面
  • 螢幕寬適合看多欄
  • 普遍以float做設定

3. 格線vs無格線

• 格線式版面
  • 將頁面分成方形一格一格的，排列整齊
  • 用float做配置
• 無格線式版面
  • 各種形狀自由擺放，不限於隔線
  • 用float做配置

4. 複合式

• 響應式版面
  • 依畫面寬度自動調整欄數、圖片大小
  • 目前最為普及，可在電腦跟手機上自動調整大小
  • 必須使用到CSS3的Media Queries功能
• 響應式固定版面
  • 先設定好各種寬度範圍，然後固定各範圍內的伸縮變化

心得

Lesson9在說表單(目前用不到)，所以先跳過了。
終於來到接近設計的地方，各種排版法看得好開心

初學者學習日誌，文章內容若有打錯歡迎直接糾正我，謝謝大家><