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-7 col-lg-8"> 文 </div>
    <div class="col-12 col-md-5 col-lg-4"> 圖 </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-7 col-lg-8"> 文 </div>
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
  </div>

</div>

調整 CSS 樣式

設計 h2 標題文字的樣式。

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

設計在手機版時,表現的順序:標題文字 > 說明文字 > 圖片。

設計在桌機版時,圖文表現的樣式。[規劃說明]

[下一步]

[下一步]

[下一步]

[下一步]

[下一步]

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

 

 

go TOP