0%

切版練習

Posted on Edited on In

前言

參考現成的網站模仿實現出一樣的 layout，此次參考的範例為FreeCodeCamp的 學習範例

預覽網頁的整體架構

以下圖片為網站的整體預覽，第一眼大致上得出下一張圖的 html 架構

最外圍用一個 div 包住內部所有的 div ，此 div 可以設定為範例中的灰色底色，標題與標題下面的文字先用一個 div 包住，在個別用 div 包住

1
2
3
4
5
6
<div id = "container">
    <div>
        <div id = "topic"><h1>Dr. Norman Borlaug</h1></div>
        <div id="subtopic"><p>The man who saved a billion lives</p></div>
    </div>
</div>

為了讓 div 置中，我預設 id 為 container div 的css屬性為 margin: 0 auto，並設定此 div 內的所有文字置中，如果後面需要不用置中的文字只要用新的 css 覆蓋即可，標題離 div 頂部有一個空隙，此處用 padding-top 達成相同的效果

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    margin: 0 auto;
    width :95%;
    background-color:#EEEEEE;
    text-align: center;
    line-height:30px;
    color:#333333;
}
#topic{
    padding-top:10px;
    font-size: 20px;
}

圖片包含下面的文字也一樣用div包住，接著使用 <img> 標籤引入圖片，下方文字使用 <p> 標籤

1
2
3
4
5
6
7
8
9
10
11
<div id = "container">
    <div>
        <div id = "topic"><h1>Dr. Norman Borlaug</h1></div>
        <div id="subtopic"><p>The man who saved a billion lives</p></div>
    </div>
    <div id ="pic">
        <img src="p1.jpg">
        <p>Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat 
            yields - part of his life-long war on hunger.</p>
    </div>
</div>

為了讓圖片置中，將包住 img 的 div 設定為 margin: 0 auto 以及 img 本身的 margin 設定為 margin: auto，因為 img 標籤預設 display: inline ，為了讓後面的文字能直接顯示在正下方，必須額外設定 img 為 display: block

1
2
3
4
5
6
7
8
9
#pic{
    background-color: #FFFFFF;
    width:95%;
    margin: 0 auto;
}
img{
    display: block;
    margin: auto;
}

接著為時間軸的標題以及時間軸的列表還有時間軸後面的引言，三者都個別使用 div 包住後，外圍在使用一個 div 包住，時間軸列表使用 <ul> <li> 標籤，年號粗體的部分可以用 strong 標籤包起來

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="content">
    <div>
        <h2>Here's a time line of Dr. Borlaug's life:</h2>
    </div>
    <div id="timeline">
        <ul>
            <li><strong>1943</strong></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="quote">
            "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><br>
            -- Indian Prime Minister Manmohan Singh
    </div>
</div>

時間軸及後面引言的部分很明顯不是文字置中，所以將 text-align 設定為 left，每個 li 之間都保有一個間距，設定一個值給 margin-bottom，引言對齊時間的部分用 margin-left 做調整

1
2
3
4
5
6
7
8
9
10
11
12
13
#timeline{
    text-align: left;
}

li{
    margin-bottom:20px;
}

#quote{
    margin-left: 22px;
    text-align: left;
    font-style: italic;
}

成果參考

連結