WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-8. 網格分配的圖文排版

RWD 網格系統,參考: Bootstrap(中) w3schools(英) RUNOOB(中)

  Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

網格分配的圖文排版

<div class="container">
  <h1>新名錶新消息</h1>

  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>

  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>

  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>

  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>

</div>

調整 CSS 樣式

設計 h2 標題文字的樣式 (字體、大小、外部留白距離 margin 前50px後15px)。

設計 p 段落文字靠左齊右的對齊。

設計 每組.row 的 margin 下方距離 50px

設計桌機版時表現的樣式:圖文上下微錯位、底板區塊左右錯位[規劃說明]

[下一步]

[下一步]

[下一步]

[下一步]

[下一步]

[下一步]

最後,觀察考量並設計好有關重疊的前後順序問題 (z-index)!

 

 

go TOP