Day21 切版筆記- 圖文滿版區塊

2021 iThome 鐵人賽

DAY 21

自我挑戰組

文組視角的初學前端筆記系列第 21 篇

13th鐵人賽

ptsai129

2021-09-21 23:16:09

792 瀏覽

分享至

鐵人賽的前20天，把常常混淆的那些觀念重新理解過一遍之後，後面的10天打算來練習切版，希望透過實際練習來加深對HTML&CSS觀念的印象

今天來練習切這個畫面

運用到的觀念:

CSS RESET
行內元素&區塊元素特性
flexbox
background寫法
使用多個background的寫法
linear Gradient 漸層
google fonts字體引用

HTML 架構

先寫一個banner區塊
再寫一個固定寬度用的container
再寫一個banner-txt區塊來放文字內容

   <div class="banner">
       <div class="container">
           <div class="banner-txt">
               <h1>金魚練習切版
                   <small>
                      跟著AMOS影片學習
                   </small>
               </h1>
               <h2>圖文滿版區塊</h2>
               <p>
                圖文滿版的畫面很常見，金魚不會切說不過去阿
                <br>
                   身為金魚，應該要學會</p>
           </div>
       </div>
   </div>

CSS 架構

先簡單設定一個CSS reset

*{
  margin: 0;
  padding: 0;
  list-style: none;
}

將banner區塊內容做成視窗滿版高度
可以設定background-color檢查有沒有設定成功

.banner{
  width: 100%; 
  height:100vh; 
}

設定container高度寬度並且置中

.container{
height:100%;
width:1200px; 
margin:0 auto;
}

將banner-txt內的文字內容改成並排
且排列方向設定為由上到下排列
再設定置中於畫面

.banner-txt{
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

設定h1文字大小

.banner-txt h1{
  font-size: 80px;
}

為了將small元素內的文字改成換行的樣式，把原本是行內元素的small標籤，改成會占滿版面的區塊元素

.banner-txt h1 small{
  display: block;
  font-size: 53px;
}

未設定display:block; 之前

設定後

7. 設定分隔線
會發現這條線竟然變成滿版了，因為設定成從上到下排列(主軸/資料流向)，預設狀態下(交錯軸/與資料流垂直)會整個填滿(align-items:stretch;)，因此設定的border底線就變成了滿版了 (相關資料:玩轉 CSS FLEX | CSS教學 | 網頁教學 | 網頁設計

.banner-txt h1{
  font-size: 80px;
  border-bottom:1px solid #333; 
}

瀏覽器上看到的畫面

交錯軸對齊方式改成對齊起點align-items: flex-start; 就能改變本來樣式是滿版的分隔底線

.banner-txt{
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

瀏覽器上看到的畫面

設定其他文字樣式

.banner-txt h2{
  font-size: 50px;
}

.banner-txt p{
  font-size: 20px;
}

設定背景
使用linear-gradient搭配背景圖尺寸(參考資料:深入理解 CSS 漸層 ( CSS Gradient )
在斜線 / 之前是背景位置，後方是背景尺寸
使用假圖產生器
background可以設定多個背景用,分開

.banner{
  width: 100%; 
  height:100vh; 
  background:linear-gradient(115deg, #7bf 50%, transparent 50%) center center /100% 100%,    url("https://picsum.photos/1200/600?random=10") right center/ auto 100%; 
}

瀏覽器上看到的畫面

設定字體
到google fonts 搜尋NotoSansTC字體

將要使用的字體連結新增到html head標籤內

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鐵人賽Day21</title>
    <link rel="stylesheet" href="./styles/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;700;900&display=swap" rel="stylesheet">
</head>

並設定所有內容都使用該字體

*{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}

設定font-weight

.banner-txt h1{
  font-size: 80px;
  border-bottom:1px solid #333; 
  font-weight: 900;
}

.banner-txt h1 small{
  display: block;
  font-size: 53px;
  font-weight: 700;
}

.banner-txt h2{
  font-size: 50px;
  font-weight: 700;
}

.banner-txt p{
  font-size: 20px;
  font-weight: 300;
}

瀏覽器上看到的畫面

因為背景圖片是使用假圖產生器，所以如果有更新圖片就會改變

參考資料:金魚都能懂的這個網頁畫面怎麼切 : 圖文滿版區塊, 如何使用Google Fonts網頁字型？, 深入理解 CSS 漸層 ( CSS Gradient )-搭配背景圖尺寸，用漸層做特別的圖案, Background - 金魚都能懂的CSS必學屬性

以上為個人學習筆記整理
若有錯誤，歡迎指正