wordpress_blog

This is a dynamic to static website.

聯絡我

Introduction to Responsive Web Design – HTML & CSS Tutorial

gee.hsu

資源：Youtube Channel – freeCodeCamp.org
教師：Kevin Powell, Thank you
影片時間：04:11:03

Course content

Intro

1. Starting to think responsively

Building websites used to be simple. We had a single design, we made the site look exactly like that design, and we were done.

Now we must make a design and have it work on every device, from a watch screen to a 80″ TV.

Now that we have the fundamentals down, it’s time to get into the responsive frame of mind.

We’ll work our way up from getting a design to simply work on a single screen size to being able to get it to work on any device.

Thinking responsively isn’t easy, especially at first.

We’ll work our way up, exploring the do’s and don’ts and how to plan things out to make your life easier in the long run.

This is just an intro thinking responsively.

We won’t be covering everything, but this is to set the stage for everything that comes after it.

What we’ll be covering in this module:

  • How to approach a layout
  • CSS units (absolute, relative, and percentages)
  • Flexbox basics (our layout tool)
  • Media query basics (adapting to different screen sizes)

2. CSS Units

CSS Units

Starting to think responsively

There are different types of units that we can use

CSS units come in a few different flavors:

  • Absolute units
  • Relative units
  • Percentage

CSS Units

Absolute units are the easiest to understand.

  • Pixels (px)
  • pt, cm, mm, in, etc

CSS Units – Percentage

Percentages are mainly used for widths, and are pretty easy to understand.

  • Relative to their parent (except on height, where things get weird).

CSS Units – Relative units

There are two types of relative units.

  • Relative to font-size
  • Relative to the viewport

Even though it sounds complicated, once you play around with them a little it isn’t too bad!

CSS Units – Relative units

  • Relative to font-size:
    • em and rem (and many other less common ones)
  • Relative to the viewport (we’ll get to this later)
    • vw, vh, vmin, vmax

3. CSS Units – Percentage

Percentages

  • 寬度 – 960px
  • 左邊 – 960 * 0.7 = 672px
  • And then there is the other side
  • And what about the padding?
  • And that’s for a fixed width!
  • We need to think responsively
程式碼範例 – .container

width: 620px; → width: 50%;

.container {
  width: 50%;
  margin: 0 auto;
}

4. Controlling the width of images

程式碼範例 – img
img {
  width: 100%;
}

width: 50%; → width: 90%;

.container {
  width: 90%;
  margin: 0 auto;
}

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>程序員那麼可愛</h1>
    </div>
  </header>

  <section class="section-one">
    <div class="container">
      <h2>關於愛情</h2>
      <img src="images/banner.jpg" alt="banner jpg">
      <ul>
        <li>EP1.暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</li>
        <li>EP2.喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</li>
        <li>EP3.和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</li>
        <li>EP4.每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</li>
        <li>EP5.COMPUTERS NEVER LIE，人的內心也同計算機一樣不會說謊，只是人們常常忽略了，心底最真實的想法。</li>
      </ul>
    </div>
  </section>

  <section class="section-two">
    <div class="container">
      <h2>劇情介紹</h2>
      <p>陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      <a href="#" class="btn btn-official">連結到官方微博</a>
      <a href="#" class="btn btn-white">更多花絮</a>
    </div>
  </section>
</body>
</html>

CSS

body{
  margin: 0;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  color: #2e354f;
}

img{
  width: 100%;
}

h1,
h2,
strong{
  font-weight: 900;
}

/* Typography */

h1{
  font-size: 36px;
  margin: 0;
}

h2{
  font-size: 24px;
  color: #ef5839;
}

a{
  color: #ef5839;
}

a:hover,
a:focus{
  color: #d4b44c;
}

/* buttons */

.btn{
  display: inline-block;
  padding: 10px 25px;
  text-decoration: none;
}

.btn-official{
  background: #ef5839;
  color: #fff;
}

.btn-official:hover{
  color: #2e354f;
  background: #d4b44c;
}

.btn-white{
  background: #fff;
  color: #2e35ff;
}

.btn-white:hover{
  color: #2e354f;
  background: #999;
}

/* Layout */

header{
  background: #2e354f;
  padding: 45px 0;
  color: #fff;
}

section{
  padding: 45px 0
}

.container{
  width: 90%;
  margin: 0 auto;
}

.section-two{
  background: #2e354f;
  color: #fff;
}

5. min-width and max-width

.container {
  width: 90%;
  max-width: 620px;
  border: 2px solid magenta;
  margin: 0 auto;
}

6. CSS Units – The em unit

The “em” unit

Starting to think responsively

CSS Units – Relative units

Relative units are always relative either to a font-size, or the size of the viewport.

For those which are relative to a font-size, which font-size they are relative to depends on a few things, which complicates matters.

CSS Units – Relative units

The em and rem are considered relative, because they are relative to the font-size of other elements

  • em are relative to their parent’s font-size
  • Font-size is an inherited property, so if you don’t declare it anywhere, it’s getting it from the body (or the default, which is normally 16px)
  • Let’s see how they work
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>程序員那麼可愛</h1>
    </div>
  </header>

  <section class="section-one">
    <div class="container">
      <h2>關於愛情</h2>
      <img src="images/banner.jpg" alt="banner jpg">
      <ul>
        <li>EP1.暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</li>
        <li>EP2.喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</li>
        <li>EP3.和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</li>
        <li>EP4.每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</li>
        <li>EP5.COMPUTERS NEVER LIE，人的內心也同計算機一樣不會說謊，只是人們常常忽略了，心底最真實的想法。</li>
      </ul>
    </div>
  </section>

  <section class="section-two">
    <div class="container">
      <h2>劇情介紹</h2>
      <p>陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      <a href="#" class="btn btn-official">連結到官方微博</a>
      <a href="#" class="btn btn-white">更多花絮</a>
    </div>
  </section>
</body>
</html>

CSS

body{
  margin: 0;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  color: #2e354f;
}

.section-one{
  /* font-size: 20px; */
}

ul{
  /* 1.5em = 150% */
  font-size: 1.5em;
}

img{
  width: 100%;
}

h1,
h2,
strong{
  font-weight: 900;
}

/* Typography */

h1{
  font-size: 3em;
  margin: 0;
}

h2{
  font-size: 2em;
  color: #ef5839;
}

a{
  color: #ef5839;
}

a:hover,
a:focus{
  color: #d4b44c;
}

/* buttons */

.btn{
  display: inline-block;
  padding: 10px 25px;
  text-decoration: none;
}

.btn-official{
  background: #ef5839;
  color: #fff;
}

.btn-official:hover{
  color: #2e354f;
  background: #d4b44c;
}

.btn-white{
  background: #fff;
  color: #2e35ff;
}

.btn-white:hover{
  color: #2e354f;
  background: #999;
}

/* Layout */

header{
  background: #2e354f;
  padding: 45px 0;
  color: #fff;
}

section{
  padding: 45px 0
}

.container{
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  border: 2px solid magenta;
}

.section-two{
  background: #2e354f;
  color: #fff;
}

7. The problem with ems

CSS Units – The problem with em

em units are very convenient for some things, but…

When we use them for the font-size of an element though, it can create a cascading effect.

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>程序員那麼可愛</h1>
    </div>
  </header>

  <section class="section-one">
    <div class="container">
      <h2>關於愛情</h2>
      <img src="images/banner.jpg" alt="banner jpg">
      <ul>
        <li>EP1.暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</li>
        <li>EP2.喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</li>
        <li>EP3.和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</li>
        <li>EP4.每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</li>
        <li>EP5.COMPUTERS NEVER LIE，人的內心也同計算機一樣不會說謊，只是人們常常忽略了，心底最真實的想法。</li>
      </ul>
    </div>
  </section>

  <section class="section-two">
    <div class="container">
      <h2>劇情介紹</h2>
      <p>陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      <a href="#" class="btn btn-official">連結到官方微博</a>
      <a href="#" class="btn btn-white">更多花絮</a>
    </div>
  </section>
</body>
</html>

CSS

body{
  margin: 0;
  font-size: 10px;
  font-family: 'Lato', sans-serif;
  color: #2e354f;
}

.section-one{
  font-size: 2em;
}

ul{
  /* 1.5em = 150% */
  font-size: 1.5em;
}

li{
  font-size: 1.5em;
}

img{
  width: 100%;
}

h1,
h2,
strong{
  font-weight: 900;
}

/* Typography */

h1{
  font-size: 3em;
  margin: 0;
}

h2{
  font-size: 2em;
  color: #ef5839;
}

a{
  color: #ef5839;
}

a:hover,
a:focus{
  color: #d4b44c;
}

/* buttons */

.btn{
  display: inline-block;
  padding: 10px 25px;
  text-decoration: none;
}

.btn-official{
  background: #ef5839;
  color: #fff;
}

.btn-official:hover{
  color: #2e354f;
  background: #d4b44c;
}

.btn-white{
  background: #fff;
  color: #2e35ff;
}

.btn-white:hover{
  color: #2e354f;
  background: #999;
}

/* Layout */

header{
  background: #2e354f;
  padding: 45px 0;
  color: #fff;
}

section{
  padding: 45px 0
}

.container{
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  border: 2px solid magenta;
}

.section-two{
  background: #2e354f;
  color: #fff;
}

8. The Solution: Rems

The solution: rems

Starting to think responsively

CSS Units – The problem with em

The rem unit is short for Root Em.

That means it’s always relative to the “root” of our document.

The root of an HTML page is always the html element.

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <header>
    <div class="container">
      <h1>程序員那麼可愛</h1>
    </div>
  </header>

  <section class="section-one">
    <div class="container">
      <h2>關於愛情</h2>
      <img src="images/banner.jpg" alt="banner jpg">
      <ul>
        <li>EP1.暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</li>
        <li>EP2.喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</li>
        <li>EP3.和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</li>
        <li>EP4.每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</li>
        <li>EP5.COMPUTERS NEVER LIE，人的內心也同計算機一樣不會說謊，只是人們常常忽略了，心底最真實的想法。</li>
      </ul>
    </div>
  </section>

  <section class="section-two">
    <div class="container">
      <h2>劇情介紹</h2>
      <p>陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      <a href="#" class="btn btn-official">連結到官方微博</a>
      <a href="#" class="btn btn-white">更多花絮</a>
    </div>
  </section>
</body>
</html>

CSS – 62.5% → 625% (10px → 100px)

因為開發常用的Chrome瀏覽器，支援的最小字體是12px，所以要改為625%

html{
  font-size: 625%;
}

body{
  margin: 0;
  font-size: 0.1rem;
  font-family: 'Lato', sans-serif;
  color: #2e354f;
}

.section-one{
  font-size: 0.2rem;
}

ul{
  font-size: 0.15rem;
}

img{
  width: 100%;
}

h1,
h2,
strong{
  font-weight: 900;
}

/* Typography */

h1{
  font-size: 0.3rem;
  margin: 0;
}

h2{
  font-size: 0.2rem;
  color: #ef5839;
}

a{
  color: #ef5839;
}

a:hover,
a:focus{
  color: #d4b44c;
}

/* buttons */

.btn{
  display: inline-block;
  padding: 10px 25px;
  text-decoration: none;
}

.btn-official{
  background: #ef5839;
  color: #fff;
}

.btn-official:hover{
  color: #2e354f;
  background: #d4b44c;
}

.btn-white{
  background: #fff;
  color: #2e35ff;
}

.btn-white:hover{
  color: #2e354f;
  background: #999;
}

/* Layout */

header{
  background: #2e354f;
  padding: 45px 0;
  color: #fff;
}

section{
  padding: 45px 0
}

.container{
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  border: 2px solid magenta;
}

.section-two{
  background: #2e354f;
  color: #fff;
}

9. Picking which unit to use

How to decide which unit to use

Starting to think responsively

How to decide which unit to use

Pixels used to cause a lot of problems, as they were a fixed unit (one dot on the screen).

Now, it follows the reference pixel.

How to decide which unit to use

That also makes my answer a little less concrete than I use to have.

But there are advantages to using rem and em.

How to decide which unit to use

So I’m going to stick with those.

My general rule of thumb:

  • Font-size = rem
  • Padding and margin = rem
  • Widths = em or percentage
  • Those are a “rule of thumb”, not hard and fast rules
  • Let’s see how they work

10. ems and rems – an example

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <div class="card">
    <h1><span class="accent-color">程序員</span>那麼可愛</h1>
    <p>EP1.暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
    <p>EP2.喜歡你這件事，不會有任何<a>BUG</a>，所以不需要<strong>DEBUG</strong>。</p>
    <p>EP3.和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
    <p class="links">
      <a class="button btn-big" href="#">連結到官方微博</a>
      <a class="button" href="#">回首頁</a>
      <a href="#" class="button btn-small">更多資訊</a>
    </p>
  </div>

</body>
</html>

CSS

.card{
  background: #000;
  color: #fff;
  width: 560px;
  margin: 0 auto;
  padding: 45px;
}

h1, p{
  margin-top: 0;
}

h1{
  font-size: 3rem;
  margin-bottom: 2em;
}

p{
  font-size: 18px;
}

a{
  color: #000;
}

.button{
  display: inline-block;
  background: #ffe600;
  color: #000;
  padding: 0.5em 1.25em;
  /* em is relative to the font-size of this element */
  text-align: center;
  text-decoration: none;
  margin-bottom: 50px;
}

.button:hover{
  background: orange;
}

.btn-big{
  font-size: 1.5rem;
}

.btn-small{
  font-size: 0.75rem;
}

.accent-color{
  color: #ffe600;
}

.links{
  margin-top: 0;
  margin-bottom: 0;
}

11. Flexbox refresher and setting up some HTML

Responsive layout basics

Starting to think responsively

The basics of flexbox

Elements normally have a display: block or a display: inline as a default from the browser.

投影片範例

CSS

.parent {
  display: flex;
}

The basics of flexbox

Block elements stack on the top of the each other

  • div, header, footer, main, etc
  • h1 → h6
  • p

The basics of flexbox

Inline elements stay within the flow of what’s around them

  • a
  • strong
  • em
  • span

The basics of flexbox

We can change this behavior by setting the display property to flex on the parent element.

網站結構
  • .container
    • .columns
      • .col
      • .col
      • .col
    • .columns
      • .col
      • .col
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼可愛</h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col">
        <h2>關於愛情</h2>
        <p></p>
      </div>
      <div class="col">
        <h2></h2>
        <p></p>
        <p></p>
      </div>
      <div class="col">
        <h2></h2>
        <p></p>
      </div>
    </div>

    <div class="columns">
      <div class="col">
        <h2></h2>
        <p></p>
      </div>
      <div class="col">
        <p></p>
      </div>
    </div>
  </div>

</body>
</html>

12. Basic Styles and setting up the columns

Colors
  • #312614
  • #B7832F
  • #707070
  • #FFF
Font-sizes
  • h1: 3rem
  • h2: 1.5rem
  • body: 1.125rem
Layout
  • max-width: 980px
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼<span>可愛</span></h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col">
        <h2>關於愛情 EP01</h2>
        <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
      </div>
      <div class="col">
        <h2>關於愛情 EP02、EP03</h2>
        <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>
        <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      </div>
      <div class="col">
        <p>劇情簡介：陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      </div>
    </div>

    <div class="columns">
      <div class="col">
        <h2>關於愛情 EP04</h2>
        <p>每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
      </div>
      <div class="col">
        <p>導語：為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}
/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
}

13. Adding the background color

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼<span>可愛</span></h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col">
        <h2>關於愛情 EP01</h2>
        <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
      </div>
      <div class="col">
        <h2>關於愛情 EP02、EP03</h2>
        <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>
        <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      </div>
      <div class="col col-bg">
        <p>劇情簡介：陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      </div>
    </div>

    <div class="columns">
      <div class="col">
        <h2>關於愛情 EP04</h2>
        <p>每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
      </div>
      <div class="col col-bg">
        <p>導語：為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
}


/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  margin: 1em 0;
}

.col-bg{
  background: #212614;
  color: #fff;
  padding: 1em;
}

14. Setting the column widths

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼<span>可愛</span></h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col col-1">
        <h2>關於愛情 EP01</h2>
        <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
      </div>
      <div class="col col-2">
        <h2>關於愛情 EP02、EP03</h2>
        <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>
        <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>劇情簡介：陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      </div>
    </div>

    <div class="columns">
      <div class="col col-3">
        <h2>關於愛情 EP04</h2>
        <p>每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>導語：為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
}


/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  margin: 1em 0;
}

.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-bg {
  background: #212614;
  color: #fff;
  padding: 1em;
}

15. Spacing out the columns

justify-content

Starting to think responsively

投影片範例

CSS

.parent {
  display: flex;
  justify-content: space-between;
}
  • justify-content: space-between;
  • justify-content: space-around;
  • justify-content: space-evenly;
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼<span>可愛</span></h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col col-1">
        <h2>關於愛情 EP01</h2>
        <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
      </div>
      <div class="col col-2">
        <h2>關於愛情 EP02、EP03</h2>
        <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>
        <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>劇情簡介：陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      </div>
    </div>

    <div class="columns">
      <div class="col col-3">
        <h2>關於愛情 EP04</h2>
        <p>每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>導語：為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
}


/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  justify-content: space-between;
  margin: 1em 0;
}

.col-1 {
  width: 20%;
}

.col-2 {
  width: 45%;
}

.col-3 {
  width: 70%;
}

.col-bg {
  background: #212614;
  color: #fff;
  padding: 1em;
}

16. Controlling the vertical position of flex items

algin-items

Starting to think responsively

投影片範例

CSS

.parent {
  display: flex;
  align-items: flex-start;
}
  • align-items: flex-start;
  • align-items: center;
  • align-items: flex-end;
  • align-items: stretch;
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼<span>可愛</span></h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col col-1">
        <h2>關於愛情 EP01</h2>
        <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
      </div>
      <div class="col col-2">
        <h2>關於愛情 EP02、EP03</h2>
        <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>
        <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>劇情簡介：陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      </div>
    </div>

    <div class="columns">
      <div class="col col-3">
        <h2>關於愛情 EP04</h2>
        <p>每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>導語：為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
}


/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 1em 0;
}

.col-1 {
  width: 20%;
}

.col-2 {
  width: 45%;
}

.col-3 {
  width: 70%;
}

.col-bg {
  background: #212614;
  color: #fff;
  padding: 1em;
}

17. Media Query basics

Media queries – the basics

Starting to think responsively

  • Media queries let us add new styles that target only specific conditions

Media queries – basic syntax

@media () { … }

Media queries – basic syntax

@media media-type () { … }

Media queries – basic syntax

@media media-type and (media-features) { … }

Media queries – media type

The media type let’s us target different types of media

  • Screen @media screen { … }
  • Print @media print { … }
  • Speech @media speech { … }

Media queries – media condition

The media condition let’s us target specific conditions within that media type

  • Widths @media (min-width: 600px) { … }
  • Orientation @media (orientation: landscape) { … }
  • Specific features @media (hover) { … }

Media queries

Both media types and conditions are optional.

We do need to either have a type or condition though.

Media queries

For example, we can target only screens.

@media screen { … }

Media queries

Or we can choose only a condition, such as the width of the viewport.

@media (min-width: 960px) { … }

Media queries

You can combine a type with a condition by using and.

@media screen and (min-width: 960px) { … }

@media screen and (orientation: portrait) { … }

  • For now, we’re focused on min-width and max-width
  • Let’s start with a simple example
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼<span>可愛</span></h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col col-1">
        <h2>關於愛情 EP01</h2>
        <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
      </div>
      <div class="col col-2">
        <h2>關於愛情 EP02、EP03</h2>
        <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>
        <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>劇情簡介：陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      </div>
    </div>

    <div class="columns">
      <div class="col col-3">
        <h2>關於愛情 EP04</h2>
        <p>每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>導語：為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
  background: pink;
}

/* from a minimun width of 650px and bigger */
@media (min-width: 650px) {
  body {
    background: orange;
  }
}

/* from a minimun width of 400px up to a width of 649px */
@media (min-width: 400px) and (max-width: 649px) {
  body {
    background: purple;
  }
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
}


/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 1em 0;
}

.col-1 {
  width: 20%;
}

.col-2 {
  width: 45%;
}

.col-3 {
  width: 70%;
}

.col-bg {
  background: #212614;
  color: #fff;
  padding: 1em;
}

18. Making out layout responsive with flex-direction

Making our layout fully responsive

Starting to think responsively

Flexbox – changing the axis around

投影片範例
display: flex /* creates columns */
flex-direction: row; /* default behavior */

Flexbox – changing the axis around

display: flex /* creates columns */
flex-direction: column; /* switches the axis */
.parent {
  display: flex;
  flex-direction: column;
}
  • Let’s give it a try
程式碼範例 – 方式一

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <div class="container">
    <h1>程序員那麼<span>可愛</span></h1>
    <img src="images/banner.jpg" alt="banner jpg">

    <div class="columns">
      <div class="col col-1">
        <h2>關於愛情 EP01</h2>
        <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，直到它成功運行。</p>
      </div>
      <div class="col col-2">
        <h2>關於愛情 EP02、EP03</h2>
        <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>
        <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>劇情簡介：陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>
      </div>
    </div>

    <div class="columns">
      <div class="col col-3">
        <h2>關於愛情 EP04</h2>
        <p>每個人都有屬於自己的秘密，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
      </div>
      <div class="col col-1 col-bg">
        <p>導語：為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      </div>
    </div>
  </div>

</body>
</html>

CSS – 方式一

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
}


/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 1em 0;
}

@media (max-width: 600px) {
  .columns {
    flex-direction: column;
  }
}

.col-1 {
  width: 20%;
}

.col-2 {
  width: 45%;
}

.col-3 {
  width: 70%;
}

@media (max-width: 600px) {
  .col-1,
  .col-2,
  .col-3 {
    width: 100%;
  }
}

.col-bg {
  background: #212614;
  color: #fff;
  padding: 1em;
}

CSS – 方式二

body {
  font-size: 1.125rem;
  color: #707070;
  margin: 0;
}

/* Typography */

h1 {
  font-size: 3rem;
  color: #212614;
  text-align: center;
}

h1 span{
  color: #b7832f;
}

h2 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
}


/* Layout */

img {
  max-width: 100%;
}

.container {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 1em 0;
}

.col-1 {
  width: 20%;
}

.col-2 {
  width: 45%;
}

.col-3 {
  width: 70%;
}

.col-bg {
  background: #212614;
  color: #fff;
  padding: 1em;
}

@media (max-width: 600px) {
  .columns {
    flex-direction: column;
  }

  .col-1,
  .col-2,
  .col-3 {
    width: 100%;
  }
}

19. flex-direction explained

Flex-direction explained

Starting to think responsively

Flexbox – changing the axis around

display: flex; /* creates columns */
flex-direction: row; /* default behavior */

Flexbox – changing the axis around

display: flex; /* creates columns */
flex-direction: column; /* switches the axis */
投影片範例
.parent {
  display: flex;
  flex-direction: column;
}
  • We are switching the main axis
投影片範例
.parent {
  display: flex;
  justify-content: space-between;
}
投影片範例
.parent {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
  • justify-content will now work vertically
    align-items will now work horizontally
投影片範例
.parent {
  display: flex;
  align-items: flex-start;
}
.parent {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
投影片範例
.parent {
  display: flex;
  align-items: center;
}
.parent {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

20. Creating a navigation

Creating a navigation

Starting to think responsively

Creating a navigation

All this flex stuff really comes into play when styling a responsive navigation for a site.

Creating a navigation

Navigations are traditionally marked up using an unordered list, which is placed inside a <nav> element.

Creating a navigation

<nav>
  <ul>
    <li><a href="index.html">home</a></li>
    <li><a href="about.html">about me</a></li>
    <li><a href="recent-posts.html">recent posts</a></li>
  <ul>
</nav>
Colors
  • #f8f8f8
  • #707070
  • #1792d2
  • #143774
font-sizes
  • Title: Lora – 3.375rem
  • Subtitle: Ubuntu bold – 1rem
  • Navigation: Ubuntu bold – 1rem
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="site-title">
      <h1>程序員那麼可愛</h1>
      <p class="subtitle">Cute Programmer</p>
    </div>
    <nav>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於愛情</a></li>
        <li><a href="#">劇情介紹</a></li>
      </ul>
    </nav>
  </header>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

21. Using flexbox to start styling our navigation

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="site-title">
      <h1>程序員那麼可愛</h1>
      <p class="subtitle">Cute Programmer</p>
    </div>
    <nav>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於愛情</a></li>
        <li><a href="#">劇情介紹</a></li>
      </ul>
    </nav>
  </header>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

header {
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin: 0 1em;
}

nav a {

}

nav a:hover {

}

22. Making out navigation look good

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="site-title">
      <h1>程序員那麼可愛</h1>
      <p class="subtitle">Cute Programmer</p>
    </div>
    <nav>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於愛情</a></li>
        <li><a href="#">劇情介紹</a></li>
      </ul>
    </nav>
  </header>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

header {
  text-align: center;
  background: #f8f8f8;
  padding: 2em 0;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin: 0 1em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

23. Adding the underline

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="site-title">
      <h1>程序員那麼可愛</h1>
      <p class="subtitle">Cute Programmer</p>
    </div>
    <nav>
      <ul>
        <li><a href="#" class="current-page">首頁</a></li>
        <li><a href="#">關於愛情</a></li>
        <li><a href="#">劇情介紹</a></li>
      </ul>
    </nav>
  </header>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

/* =================
   Layout
   ================= */

header {
  text-align: center;
  background: #f8f8f8;
  padding: 2em 0;
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin: 0 1em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

24. A more complicated navigation

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-nav">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

25. Making the navigation responsive

Adding a media query to our nav

Starting to think responsively

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-nav">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

@media (max-width: 675px) {
  .container-nav {
    flex-direction: column;
  }

  header {
    text-align: center;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

26. Taking a look at the rest of the project

投影片範例 – 5 Screens
  • simple life – mobile with navigation – 1
  • simple life – mobile with navigation
  • Simple life – with navigation
  • Simple life about – with navigation
  • Simple life recent posts – with navigation
資源
  • Adobe XD 設計稿 – 連結
  • Github repository – 連結
Adobe XD 設計稿文件講解

27. Setting up the structure

投影片講解 – HOME
structure
  • Adobe XD 設計稿 – 連結
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-nav">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container">
    <main role="main"></main>
    <aside class="sidebar"></aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

@media (max-width: 675px) {
  .container-nav {
    flex-direction: column;
  }

  header {
    text-align: center;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

28. Featured article structure

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-nav">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title"></h2>
        <img src="" alt="" class="article-image">
        <p class="article-info"></p>
        <p class="article-body"></p>
        <a href="#" class="article-read-more"></a>
      </article>
      
      <article class="article-recent"></article>
      <article class="article-recent"></article>
      <article class="article-recent"></article>
    </main>
    <aside class="sidebar"></aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

@media (max-width: 675px) {
  .container-nav {
    flex-direction: column;
  }

  header {
    text-align: center;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

29. The home page – HTML for the recent articles

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-nav">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title"></h2>
        <img src="" alt="" class="article-image">
        <p class="article-info"></p>
        <p class="article-body"></p>
        <a href="#" class="article-read-more"></a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title"></h2>
          <p class="article-body"></p>
          <a href="#" class="article-read-more"></a>
        </div>
        <div class="article-recent-secondary">
          <img src="" alt="" class="article-image">
          <p class="article-info"></p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title"></h2>
          <p class="article-body"></p>
          <a href="#" class="article-read-more"></a>
        </div>
        <div class="article-recent-secondary">
          <img src="" alt="" class="article-image">
          <p class="article-info"></p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title"></h2>
          <p class="article-body"></p>
          <a href="#" class="article-read-more"></a>
        </div>
        <div class="article-recent-secondary">
          <img src="" alt="" class="article-image">
          <p class="article-info"></p>
        </div>
      </article>
    </main>
    <aside class="sidebar"></aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

@media (max-width: 675px) {
  .container-nav {
    flex-direction: column;
  }

  header {
    text-align: center;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

30. Home Page – HTML for the aside

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-nav">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title"></h2>
        <img src="" alt="" class="article-image">
        <p class="article-info"></p>
        <p class="article-body"></p>
        <a href="#" class="article-read-more"></a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title"></h2>
          <p class="article-body"></p>
          <a href="#" class="article-read-more"></a>
        </div>
        <div class="article-recent-secondary">
          <img src="" alt="" class="article-image">
          <p class="article-info"></p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title"></h2>
          <p class="article-body"></p>
          <a href="#" class="article-read-more"></a>
        </div>
        <div class="article-recent-secondary">
          <img src="" alt="" class="article-image">
          <p class="article-info"></p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title"></h2>
          <p class="article-body"></p>
          <a href="#" class="article-read-more"></a>
        </div>
        <div class="article-recent-secondary">
          <img src="" alt="" class="article-image">
          <p class="article-info"></p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title"></h2>
        <img src="" alt="" class="widget-image">
        <p class="widget-body"></p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title"></h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title"></h3>
          <img src="" alt="" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title"></h3>
          <img src="" alt="" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title"></h3>
          <img src="" alt="" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

/* =================
   Typography
   ================= */

h1 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  margin: 0;
}

.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

@media (max-width: 675px) {
  .container-nav {
    flex-direction: column;
  }

  header {
    text-align: center;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

31. Starting the CSS for our page

  • Adobe XD 設計稿 – 連結
Colors
  • #707070
  • #1792d2
  • #143774
Font-sizes
  • Lora 2rem – Living the simple life、#143774
  • Lora 1.5rem – Heading 2 (blog post titles)、#143774
  • Ubuntu bold 0.75rem – SUBHEADING、#1792d2
  • Ubuntu light 1.125rem – body text、#707070
  • Ubuntu bold 0.875rem – CONTINUE READING、#1792d2
  • Ubuntu light 0.875rem – Dates、#707070
程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-nav">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/cute-programmer.jpg" alt="cute-programmer jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}



/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

@media (max-width: 675px) {
  .container-nav {
    flex-direction: column;
  }

  header {
    text-align: center;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

32. Starting the layout – looking at the big picture

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/cute-programmer.jpg" alt="cute-programmer jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}



/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
}

@media (max-width: 675px) {
  .container-flex {
    flex-direction: column;
  }

  header {
    text-align: center;
  }
}

main {
  width: 75%;
}

aside {
  width: 20%;
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

33. Starting to think mobile first

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}



/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 75%;
  }

  aside {
    width: 20%;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

34. Styling the featured article

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 75%;
  }

  aside {
    width: 20%;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

35. Changing the visual order width flex box

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 75%;
  }

  aside {
    width: 20%;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

36. Playing with the title’s position, and the downsides of negative margins

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 75%;
  }

  aside {
    width: 20%;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 550px) {
  .article-recent-main {
    margin-top: -2.5em;
  }

  .article-info {
    text-align: right;
  }
}

37. Changing the visual order with flex box

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 75%;
  }

  aside {
    width: 20%;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 675px) {
  .article-recent {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-recent-main {
    width: 68%;
  }
  .article-recent-secondary {
    width: 30%;
  }

  .article-image {
    width: 100%;
    min-height: 250px;
    object-fit: cover;
    /* object-position: left; */
  }

}
自我補充：object-fit – MDN Web Docs

38. Styling recent articles for large screens

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
  margin-bottom: 3em;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 75%;
  }

  aside {
    width: 20%;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 675px) {
  .article-recent {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-recent-main {
    width: 68%;
  }

  .article-recent-secondary {
    width: 30%;
  }

  .article-featured {
    display: flex;
    flex-direction: column;
  }

  .article-image {
    order: -2;
  }
  .article-info {
    order: -1;
  }
}

39. Setting up the widgets and talking breakpoints

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p></p>
    <p></p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
  margin-bottom: 3em;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 70%;
  }

  aside {
    width: 25%;
    min-width: 200px;
    margin-left: 1em;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 675px) {
  .article-recent {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-recent-main {
    width: 68%;
  }

  .article-recent-secondary {
    width: 30%;
  }

  .article-featured {
    display: flex;
    flex-direction: column;
  }

  .article-image {
    order: -2;
    min-height: 250px;
    object-fit: cover;
    /* object-position: left; */
  }
  .article-info {
    order: -1;
  }
}

/* widgets */

.sidebar-widget {
  border: 20px solid #ebebeb;
  margin-bottom: 2em;
  padding: 1em;
}

40. Using a new pseudo-class to wrap-up the homepage

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="#" class="current-page">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="#">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}

.widget-title,
.widget-recent-post-title {
  font-size: 1rem;
}

.widget-title {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
  margin-bottom: 3em;
}

footer {
  background: #143774;
  color: #fff;
  text-align: center;
  padding: 3em 0;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 70%;
  }

  aside {
    width: 25%;
    min-width: 200px;
    margin-left: 1em;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 675px) {
  .article-recent {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-recent-main {
    width: 68%;
  }

  .article-recent-secondary {
    width: 30%;
  }

  .article-featured {
    display: flex;
    flex-direction: column;
  }

  .article-image {
    order: -2;
    min-height: 250px;
    object-fit: cover;
    /* object-position: left; */
  }
  .article-info {
    order: -1;
  }
}

/* widgets */

.sidebar-widget {
  border: 20px solid #ebebeb;
  margin-bottom: 2em;
  padding: 1em;
}

.widget-recent-post {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #707070;
  margin-bottom: 1em;
}

.widget-recent-post:last-child {
  border: 0;
  margin: 0;
}

.widget-image {
  order: -1;
}

41. Creating the recent posts page

程式碼範例

HTML – index.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

HTML – recent-posts.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="#">關於愛情</a></li>
          <li><a href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">劇情介紹</h2>
          <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/banner.jpg" alt="banner jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/aboutme.jpg" alt="aboutme jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}

.widget-title,
.widget-recent-post-title {
  font-size: 1rem;
}

.widget-title {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
  margin-bottom: 3em;
}

footer {
  background: #143774;
  color: #fff;
  text-align: center;
  padding: 3em 0;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 70%;
  }

  aside {
    width: 25%;
    min-width: 200px;
    margin-left: 1em;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 675px) {
  .article-recent {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-recent-main {
    width: 68%;
  }

  .article-recent-secondary {
    width: 30%;
  }

  .article-featured {
    display: flex;
    flex-direction: column;
  }

  .article-image {
    order: -2;
    min-height: 250px;
    object-fit: cover;
    /* object-position: left; */
  }
  .article-info {
    order: -1;
  }
}

/* widgets */

.sidebar-widget {
  border: 20px solid #ebebeb;
  margin-bottom: 2em;
  padding: 1em;
}

.widget-recent-post {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #707070;
  margin-bottom: 1em;
}

.widget-recent-post:last-child {
  border: 0;
  margin: 0;
}

.widget-image {
  order: -1;
}

42. Setting up the About Me page

程式碼範例

HTML – index.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="shortcut icon" href="images/cute-programmer.jpg" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="about-love.html">關於愛情</a></li>
          <li><a href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/about-love.jpg" alt="about-love jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

HTML – about-love.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="shortcut icon" href="images/cute-programmer.jpg" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="about-love.html">關於愛情</a></li>
          <li><a href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">
      
      <img src="images/about-love.jpg" class="image-full" alt="about-love jpg">
      <h2>關於愛情</h2>
      
      <p><strong>為了自己的暗戀事業和人生目標</strong>，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      <p>陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>

      <h3>EP01 & EP02</h3>
      <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，<strong>直到它成功運行</strong>。</p>
      <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>

      <h3>EP03 & EP04</h3>
      <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      <p><strong>每個人都有屬於自己的秘密</strong>，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
    </main>
    <aside class="sidebar">

      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

HTML – recent-posts.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="shortcut icon" href="images/cute-programmer.jpg" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="about-love.html">關於愛情</a></li>
          <li><a href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">劇情介紹</h2>
          <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/banner.jpg" alt="banner jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/about-love.jpg" alt="about-love jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}

.widget-title,
.widget-recent-post-title {
  font-size: 1rem;
}

.widget-title {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
  margin-bottom: 3em;
}

footer {
  background: #143774;
  color: #fff;
  text-align: center;
  padding: 3em 0;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 70%;
  }

  aside {
    width: 25%;
    min-width: 200px;
    margin-left: 1em;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 675px) {
  .article-recent {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-recent-main {
    width: 68%;
  }

  .article-recent-secondary {
    width: 30%;
  }

  .article-featured {
    display: flex;
    flex-direction: column;
  }

  .article-image {
    order: -2;
    min-height: 250px;
    object-fit: cover;
    /* object-position: left; */
  }
  .article-info {
    order: -1;
  }
}

/* widgets */

.sidebar-widget {
  border: 20px solid #ebebeb;
  margin-bottom: 2em;
  padding: 1em;
}

.widget-recent-post {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #707070;
  margin-bottom: 1em;
}

.widget-recent-post:last-child {
  border: 0;
  margin: 0;
}

.widget-image {
  order: -1;
}

43. Fixing up some loose ends

程式碼範例

HTML – index.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="shortcut icon" href="images/cute-programmer.jpg" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a class="current-page" href="index.html">首頁</a></li>
          <li><a href="about-love.html">關於愛情</a></li>
          <li><a href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">

      <article class="article-featured">
        <h2 class="article-title">劇情介紹</h2>
        <img src="images/banner.jpg" alt="banner jpg" class="article-image">
        <p class="article-info">Sep 22, 2021 | 3 comments</p>
        <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
        <a href="#" class="article-read-more">繼續閱讀</a>
      </article>
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/about-love.jpg" alt="about-love jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

HTML – about-love.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="shortcut icon" href="images/cute-programmer.jpg" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a class="current-page" href="about-love.html">關於愛情</a></li>
          <li><a href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">
      
      <img src="images/about-love.jpg" class="image-full" alt="about-love jpg">
      <h2>關於愛情</h2>
      
      <p><strong>為了自己的暗戀事業和人生目標</strong>，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……</p>
      <p>陸漓（祝緒丹飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（邢昭林飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，是否會意外觸發心動的代碼？</p>

      <h3>EP01 & EP02</h3>
      <p>暗戀就像是等待測試的程序，不確定運行結果，也不確定運行時間，但只要需求沒變，就要努力優化程序，<strong>直到它成功運行</strong>。</p>
      <p>喜歡你這件事，不會有任何BUG，所以不需要DEBUG。</p>

      <h3>EP03 & EP04</h3>
      <p>和暗戀的人在一起時，記得敲一遍高精度，這樣對他的喜歡，就不會溢出，被對方發現了。</p>
      <p><strong>每個人都有屬於自己的秘密</strong>，雖然可以通過技術手段進行加密，但卻不知道系統何時會被黑客入侵，將我們保守的秘密公之於眾。</p>
    </main>
    <aside class="sidebar">

      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

HTML – recent-posts.html

<!DOCTYPE html>
<html lang="en">
<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>intro to rwd</title>
  <link rel="shortcut icon" href="images/cute-programmer.jpg" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/all.css">
</head>
<body>

  <header>
    <div class="container container-flex">
      <div class="site-title">
        <h1>程序員那麼可愛</h1>
        <p class="subtitle">Cute Programmer</p>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="about-love.html">關於愛情</a></li>
          <li><a class="current-page" href="recent-posts.html">劇情介紹</a></li>
        </ul>
      </nav>
    </div> <!-- / .container -->
  </header>

  <div class="container container-flex">
    <main role="main">
      
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">劇情介紹</h2>
          <p class="article-body">陸漓（<a href="#">祝緒丹</a>飾）是女程式設計師。為了追求理想而投身編程領域，她憑藉自身經歷及過人的智慧搞定學長姜逸城（<a href="#">邢昭林</a>飾），擺平他無數次的相親後，成功進入異承公司，勇闖IT世界。倆人因程序代碼結緣，後在機緣巧合下成為同居的室友。性格迥異的他們在同居相處中鬥智鬥勇情況下，<strong>是否會意外觸發心動的代碼？</strong></p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/banner.jpg" alt="banner jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">姜逸城 (邢昭林飾)</h2>
          <p class="article-body">28歲，陸漓的學長。性格傲嬌又自戀的霸道總裁。聰明的他是個名副其實的毒舌。喜歡在完全不講道理的情況下講道理。雖然懶散，但他是信奉效率和結果至上主義者，對員工要求極高。後在機緣巧合下成為陸漓的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/01.jpg" alt="01 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">陸漓 (祝緒丹飾)</h2>
          <p class="article-body">22歲，可愛學霸。暗戀姜逸城，是他同科系的學妹，曾幫他擺平無數次的相親。為了接近他而決定當個女程式設計師，經歷過無數關卡，甚至還女扮男裝，努力進入不接受收女程式設計師的異承公司。後在機緣巧合下成為姜逸城的同居室友。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/02.jpg" alt="02 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
      <article class="article-recent">
        <div class="article-recent-main">
          <h2 class="article-title">顧筱柒 (關芯飾)</h2>
          <p class="article-body">別名小七。陸漓的頭號閨蜜，二次元服裝網店的老闆。熱情活潑、精力充沛。遇到帥哥時，立馬化身為撩漢魔女，但每次戀愛總莫名無疾而終。性格馬虎，常常鬧出笑話來。與顧默是青梅竹馬，乾親至交。</p>
          <a href="#" class="article-read-more">繼續閱讀</a>
        </div>
        <div class="article-recent-secondary">
          <img src="images/03.jpg" alt="03 jpg" class="article-image">
          <p class="article-info">Sep 22, 2021 | 3 comments</p>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="sidebar-widget">
        <h2 class="widget-title">導語</h2>
        <img src="images/about-love.jpg" alt="about-love jpg" class="widget-image">
        <p class="widget-body">
          為了自己的暗戀事業和人生目標，陸漓拼盡一切抓住機會，終於和姜逸城達成一年的“契約夫婦”。兩人在同居中展開甜蜜互動，姜逸城對陸漓漸漸動心而不自知……
        </p>
      </div>
      <div class="sidebar-widget">
        <h2 class="widget-title">最近文章</h2>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">姜逸城 (邢昭林飾)</h3>
          <img src="images/01.jpg" alt="01 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">陸漓 (祝緒丹飾)</h3>
          <img src="images/02.jpg" alt="02 jpg" class="widget-image">
        </div>
        <div class="widget-recent-post">
          <h3 class="widget-recent-post-title">顧筱柒 (關芯飾)</h3>
          <img src="images/03.jpg" alt="03 jpg" class="widget-image">
        </div>
      </div>
    </aside>
  </div>


  <footer>
    <p><strong>非正式官網，網站僅供練習使用。</strong></p>
    <p>程序員那麼可愛</p>
  </footer>

</body>
</html>

CSS

/* Fonts
   -----
   font-family: 'Lora', serif;
   font-family: 'Ubuntu', sans-serif;
*/

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
}

img {
  max-width: 100%;
  display: block;
}

.image-full {
  max-height: 300px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 2em;
}

/* =================
   Typography
   ================= */

h1,
h2,
h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: #143774;
  margin-top: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h3 {
  color: #1792d2;
}

a {
  color: #1792d2;
}

a:hover,
a:focus {
  color: #143774;
}

strong {
  font-weight: 700;
}

/* h1 subtitle */
.subtitle {
  font-weight: 700;
  color: #1792d2;
  font-size: 0.75rem;
  margin: 0;
}

.article-title {
  font-size: 1.5rem;
}

.article-read-more,
.article-info {
  font-size: 0.875rem;
}

.article-read-more {
  color: #1792d2;
  text-decoration: none;
  font-weight: 700;
}

.article-read-more:hover,
.article-read-more:focus {
  color: #143774;
  text-decoration: underline;
}

.article-info {
  margin: 2em 0;
}

.widget-title,
.widget-recent-post-title {
  font-size: 1rem;
}

.widget-title {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}

.widget-recent-post-title {
  color: #143774;
}


/* =================
   Layout
   ================= */

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  background: #f8f8f8;
  padding: 2em 0;
  text-align: center;
  margin-bottom: 3em;
}

footer {
  background: #143774;
  color: #fff;
  text-align: center;
  padding: 3em 0;
}

@media (min-width: 675px) {
  .container-flex {
    flex-direction: row;
  }

  main {
    width: 70%;
  }

  aside {
    width: 25%;
    min-width: 200px;
    margin-left: 1em;
  }
}

/* navigation */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin-left: 2em;
}

nav a {
  text-decoration: none;
  color: #707070;
  font-weight: 700;
  padding: 0.25em 0;
}

nav a:hover,
nav a:focus {
  color: #1792d2;
}

.current-page {
  border-bottom: 1px solid #707070;
}

.current-page:hover {
  color: #707070;
}

@media (max-width: 675px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 0.5em 0;
  }
}

/* articles */

.article-featured {
  border-bottom: 1px solid #707070;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-recent {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

.article-recent-main {
  order: 2;
}

.article-recent-secondary {
  order: 1;
}

@media (min-width: 675px) {
  .article-recent {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-recent-main {
    width: 68%;
  }

  .article-recent-secondary {
    width: 30%;
  }

  .article-featured {
    display: flex;
    flex-direction: column;
  }

  .article-image {
    order: -2;
    min-height: 250px;
    object-fit: cover;
    /* object-position: left; */
  }
  .article-info {
    order: -1;
  }
}

/* widgets */

.sidebar-widget {
  border: 20px solid #ebebeb;
  margin-bottom: 2em;
  padding: 1em;
}

.widget-recent-post {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #707070;
  margin-bottom: 1em;
}

.widget-recent-post:last-child {
  border: 0;
  margin: 0;
}

.widget-image {
  order: -1;
}

44. Important Note. The viewport meta tag

The viewport meta

Starting to think responsively

The viewport meta tag

One thing that I don’t include the lessons in this module is the viewport meta tag.

When we take a browser window on our desktop and play with the width, it works well, but it doesn’t fully simulate how a phone will render a page.

The viewport meta tag

To prevent problems form rendering pages that are not optimized for mobile devices and small screens, phones and tablets will actually render a zoomed out version of the page and then shrink it down to fit their viewport.

The viewport meta tag

To prevent it from doing this on our pages, which we’ve optimized for small screens with media queries, we need to add a meta tag to the head of our document.

The viewport meta tag

There are a lot of different attributes that we can add, but the basic meta that you’ll use looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

It can be added anywhere in the <head> of your document.

The viewport meta tag

This will ensure that your page actually loads properly on a mobile device, which after all the hard work we did, we really want to do!

So once you’ve graduated from Scrimba and you’re working on your own pages and testing them in different devices, remember to include this in your <head>!

程式碼範例

HTML

<!DOCTYPE html>
<html lang="en">
<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>The viewport meta tag</title>
</head>
<body>
  
</body>
</html>

45. Module wrap up

  • You did it!
  • Flexbox
  • Jusitfy-content & align-items
  • flex-direction (switching the main axis)
  • Meida queries
  • How to build (and style) a navigation
  • Pat yourself on the back
  • Take a break 
  • Maybe build the site again!
  • Relax and breath a little
  • Then it’s time to step up your style!

Outro