[Day 9] 练练CSS，「Amos - 金鱼都能懂的网页切版」实作练习

前言

相信很多刚开始接触CSS或想对切版有所认识，都知道Amos老师吧！！非常非常感谢老师的系列教学影片，给我这新手莫大帮助啊！
我是从金鱼都能懂的网页切版开始学习，并从老师提供的其他影片去加深观念～～

规划学习目标：
金鱼切版系列共有30集，而我当时设定的目标是每个影片至少都要看过，并跟着实作，一周至少完成2个。
如何投入：

平日上午、中午的时间，我会直接点开老师的影片先看过，了解是怎麽构思页面版型、如何设定样式。
下班後，时间会比较充裕，约有1-2小时，会先将上午看的部分，尝试实作，如果没办法，就会改成边观看影片 > 暂停 > 自己练习。将一个影片拆成好几段落来练习。
假日的话，会先将完成好的任务，制作笔记顺便复习一次，也会针对不熟的地方，再凭着印象在实作看看。

范例说明 Amos金鱼系列- 图文满版区块

观察老师的制作方式

首先，会先了解div的放置、使用什麽标签，顺便熟悉一下HTML。

用一个取名为banner的区块
里面放一个container的容器，作为来设定装下里面文字的容器
此container中，再放一个class="banner-txt"，用来放置文字区块

<body>
  <div class="banner">
    <div class="container">
      <!-- 设定固定宽度的容器 -->
      <div class="banner-txt">
        <h1>金鱼都能懂的
          <small>这个网页画面怎麽切</small>
        </h1>
        <h2>图文满版区块</h2>
        <p>这画面实在常见，在各种样版网站可说是设计常客
          金鱼切不出来实在说不过去阿</p>

      </div>
    </div>
  </div>

</body>

接下来，CSS的简单解析

在banner的地方会去设定填满整个视窗。
container用来设定所放入文字的容器，他的宽与高，并让他置中。
banner-txt的地方，将高度设定和container一样，并设定flex让内容文字能够依照想要的方式来进行排列。

会将几个制作的大方向纪录下来，换自己实作时可以提醒自己下一步可以从哪边下手。

根据影片所提及的重点延伸

CSS Reset
金鱼都能懂网页设计入门 : CSS Reset
meyerweb.com
计网页时重要的起手式，主要是为了让各家浏览器的网页外观维持一致。
不同浏览器，在一开始，会有预设的部分，会导致在做css时和预想的设置会有差异，所以要记得reset。
flex 的使用
玩转CSS
多重背景

整个版面是将此背景图放在banner区块
用线性方式

/* 多重背景的使用 */
      background: linear-gradient(115deg, darksalmon 50%, transparent 50%)center center /100% 100%, url(https://picsum.photos/seed/picsum/1200/600)right center /auto 100%;

参考资料
金鱼都能懂的网页设计-杂记

以上～说明我是如何规划练习时间、而在看教学影片时，会如何学习、实作的方式。

<<: D8: 工程师太师了: 第4.5话

>>: 9.移转 Aras PLM大小事-BOM的差异