Day21 切版笔记- 图文满版区块

铁人赛的前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必学属性

以上为个人学习笔记整理
若有错误，欢迎指正

<<: D20: 工程师太师了: 第10.5话

>>: [Day 6]中秋时在做什麽，有没有空，可以帮想标题吗(前端篇)