Let's Coding
0%

tribute-page 切版練習

Posted on Edited on In

在freeCodeCamp上，可以免費學習到程式語言的課程，除了提供基礎的介紹外，也有一些實作範本可以練習，此次，主要練習css切版的基礎，製作一個一頁的頁面

頁面分析

先試著自己動手做

我區分的：

1
2
3
4
<div class="header">
    <h1>Dr. Norman Borlaug</h1>
    <p>The man who saved a billion lives</p>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
   <img src="https://picsum.photos/500/400?random=1" alt="">
   <p>Dr. Norman Borease wheat yields - part of his
     life-long war on hunger.</p>
     </div>
   <div class="list">
     <h2>Here's a time line of Dr. Borlaug's life:</h2>
     <ul>
      li*16--
     </ul>
     <p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering
       intellect,
       persistence and scientific vision can make to human peace and progress."
       <br>
       -- Indian Prime Minister Manmohan Singh</p>
     <h3><strong>If you have time, you should read more about this incredible human being on his a
         <a href="https://en.wikipedia.org/wiki/Norman_Borlaug">Wikipedia entry</a> .</strong></h3>


   </div>

自己切的時候，遇到的問題

  • img 在網頁縮放時，沒有好好的跟著容器變化大小，會凸出去。
    • 一開始，是設定固定寬度、高度去調整
    • 解決：使用max-width
    • 另外img的display也要調整為block或inline-block，比較好調整置中
      • 在中間很多列表的表頭，上下空間與置中一直沒有調整好
      • 發現區段沒有設置h3，讓他形成一個區塊
      • 解決：使用開發者工作，去看margin、padding產生空間

解法：

1.在最上面的區塊，使用main去包

1
2
3
4
<main id="main">
 <h1>..</h1>
    <p>Ts</p>
  </main>

style的部分要注意置中\字的大小

  • margin,padding 做了些調整
    1
    2
    3
    4
    5
    6
    7
    8
    h1 {
       font-size: 2.5em;
     }
      #main {
       margin: 30px 8px;
       padding: 15px;

     }

2.圖片區塊

使用<figure>用來引用任何內容像是文字段落、圖片、圖表或程式碼片段。<figure> 中還可以有一個 <figcaption> 標籤用來說明該 figure 區塊的標題。

1
2
3
4
5
6
<figure id="img-div"><img src="/img/tribute-cover.jpg" alt="">

    <figcaption id="imd-cap">
      ar on hunger.
    </figcaption>
  </figure>

style的部分

  • img要記得設最大寬度，讓他置中
  • #img-div，是包含照片的容器，注意原本版面左右是有留白,以及灰色，所以設定padding:10px
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    img {
       max-width: 100%;
       display: inline-block;
       height: auto;
       margin: 0 auto;
     }
    #img-div {
       background: white;
       padding: 10px;
       margin: 0;
     }

    3.u1資訊的部分

  • 以section做區塊
  • 使用blockquote，用來引用段落文字，如果引用的內容來自於網路，還可以用 cite 屬性指定引用來源 (URL)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section id="tribute-info">
<h3 id="headline">

</h3>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<blockquote>
  <p></p>
  <cite></cite>
</blockquote>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#headline {
    margin: 50px 0;
    text-align: center;
  }

  ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
  }

  li {
    margin: 16px 0;
  }

4.最下面一段

  • 以h3作為最後一段文字的區塊
1
2
3
<h3>
<a></a>
</h3>
1
2
3
4
5
6
7
8
9
10
11
12
13
 a {
    color: #477ca7;
  }

  a:visited {
    color: #74638f;
  }
blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
  }

完成的網址

我製作的網頁
codpen的解法

參考資料：

假圖
金魚都能懂的網頁設計-雜記
CSS垂直置中技巧，我只會23個，你會幾個