0%

tribute-page 切版練習

在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個,你會幾個