[2021 IT鐵人賽] Day 07：專案01 - 超簡單個人履歷06 | 實作

圖源：https://unsplash.com/photos/7iSEHWsxPLw

我們先回顧一下個人履歷的成品，學完HTML和CSS後，是否能順利做出來呢?

Reset CSS

其實Chrome瀏覽器內建就有一些CSS的樣式，像超連結是藍字底線等等。然而對追求質感的網頁來說，那並不好看，所以需要將預設的CSS覆蓋掉，我們用Eric A. and Kathryn S. Meyer在2011年整理出的Reset CSS，雖然隔了10年，但還是可以work! 用法也很簡單，將CSS整段複製，貼在你的CSS上方就好了。

架構說明

網站的基本架構如下：

以下就一個個區塊介紹，順便帶一下程式碼。

這個版型大家可以拿去做成自己的個人履歷，只要將上面的資料改成自己的資料就可以使用了，使用前不需要先告知我。

container

基於閱讀時通常會將注意力放在中間，所以container我讓它寬度為70%並置中。

.container {
    width: 70%;
    margin: 50px auto;
}

main

放頭像、姓名和個人資訊的地方，因為我希望是區塊並列的，所以我在main使用Flex容器，但我為了讓avatar和name可以靠得比較近，所以用另外用個Flex容器name-container包住avatar和name。

<div class="main">
    <div class="name-container">
        <div class="avatar">
            <img src="avatar.jpg" alt="">
        </div>
        <div class="name">
            <h1>Bob Wang</h1>
            <p>Student</p>
        </div>
    </div>
    <div class="info">
        <ul>
            <li>
                <i class="bi bi-envelope-fill"></i>
                bobwang@gmail.com
            </li>
            <li>
                <i class="bi bi-telephone-fill"></i>
                09-12345678
            </li>
            <li>
                <i class="bi bi-geo-alt-fill"></i>
                Taipei, Taiwan
            </li>
        </ul>
    </div>
</div>

CSS：

.main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.name-container {
    display: flex;
    align-items: center;
}

avatar

我希望頭像是圓形的，所以必須找一張正方型的圖片，然後將圖片的border-radius設為50%。

.avatar img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 0px;
    margin-right: 30px;
}

info

因為個人資訊是條列式的，所以我使用無序清單。圖示的部分是使用Bootstrap Icons，我使用CDN的方式，基本上網站上就有教學了，跟著做就好。

main的成果：

hr

我希望區塊間使用分隔線隔開，所以我使用的<hr>，並美化了一下。

hr {
    background-color: rgb(230, 138, 0);
    border: 2px solid rgb(230, 138, 0);
    margin: 50px 0px;
}

加了分隔線後：

content

底下內容排版都長得一樣，使用Flex容器並列title和text兩個容器，然後title的寬度設為70%，text的寬度設為30%。

<div class="profile content">
    <div class="title">
        <h2>關於我</h2>
        <h3>About me</h3>
    </div>
    <div class="text">
        <p>
            喵喵喵喵喵喵喵喵喵...
        </p>
    </div>
</div>

.content {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
}
.title {
    width: 30%;
}
.text {
    width: 70%;
    line-height: 1.3em;
    text-align: justify;
}

title

中文字比較大，使用<h2>，英文字比較小，使用<h3>。

h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
}

h3 {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 10px;
    color: rgb(230, 138, 0);
}

text

大部分都一樣，只講其中比較特別的幾個。

quote

我希望換個座右銘的字體和大小。

.quote q {
    font-family: serif;
    font-size: 28px;
}

education

學歷部分適合用條列式表示，年份使用span改變顏色，底下的工作經驗和技能也是一樣的做法。

<ul>
    <li>123大學 資訊工程學系 | <span>2020 - 2023</span></li>
    <li>ABC高中 普通科 | <span>2018 - 2020</li>
</ul>

.content span {
    color: rgb(230, 138, 0);
}

content部分成果為：

footer

簡單放上幾個社群媒體的連結，圖示部分一樣使用Bootstrap Icons，連結部份加上自己要得連結就可以了。

因為篇幅有限，我不可能講完所有的細節，剩餘的細節部分就到我的GitHub上直接看原始碼吧!

GitHub Page

最後的成品如果想公布在網路上，可以使用GitHub Page完成，像我的作品範例就是用GitHub Page公布的哦! 但要教這個的話就要教到Git，已經超出主題的範圍了(而且時間也不夠)，這部分就留給大家自己上網查吧!

小結

今天我們運用前幾天所學的HTML和CSS，成功做出第一個專案 - 超簡單個人履歷，相信大家做完後應該對HTML和CSS已經有基本的認識了，但在開始爬蟲之前，我們還有一個很重要的東西還沒學，是什麼呢…

…沒錯! 就是Python!

我們從明天開始就會介紹Python的基礎語法了，請大家拭目以待以待 (X。

---

如果喜歡這系列文章麻煩幫我按Like加訂閱，你的支持是我創作最大的動力~

本系列文章以及範例程式碼都同步更新在GitHub上，後續會持續的更新，如果喜歡也麻煩幫我按個星星吧~

有任何問題或建議，都歡迎在底下留言區提出，還請大家多多指教。