範例 9 - 首頁橫幅排版

霈霈 已發佈 2019-7-1

基本樣式範例練習網址: https://codepen.io/peiqun/pen/YoeMPY
完整範例網址: https://codepen.io/peiqun/pen/NeGJoa

HTML 結構

<div class="all">
  <div class="banner">
    <img src="path/to/img" width="150" alt="">
    <p>今天是個吃甜點的好日子。</p>
  </div>
  <div class="menu">
    <img src="path/to/img" width="200" alt="">
    <ul>
      <li>回首頁</li>
      <li>關於我們</li>
      <li>產品介紹</li>
      <li>聯絡我們</li>
    </ul>
  </div>
</div>

步驟解析

  1. 基本樣式設定
    flex-example
    • body.all 上設定高度 100%
    • .banner 上設定背景顏色、字體顏色及文字粗體
    • 調整 menu.menu li 內距

  2. .all 上設定 display: flex
    flex-example

  1. 透過 flex-direction.all 內容調整為垂直排列
    flex-example

  1. .banner 上設定 flex: 1,將自身高度撐大
    flex-example

  1. .banner 上設定 display: flex;,並透過 align-itemsjustify-content 將內容垂直水平置中
    flex-example

  1. body 上設定 display: flex,並透過 align-itemsjustify-content 將內容調整為垂直水平置中
    flex-example

  1. menu 上設定 display: flex,並透過 justify-content: space-between 將內容貼齊主軸線最前端與最末端
    flex-example

  1. .menu ul 上設定 display: flex
    flex-example

  1. .menu 上設定 flex: 0 0 80px 調整大小,並透過 align-items 將交錯軸內容置中
    flex-example

關於筆者

暱稱:霈霈

介紹:六角學院前端工程師,目前就讀高雄師範大學的軟體工程學系研究所