iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

從HTML到Python爬蟲的30天之旅系列 第 7

Day 07:專案01 - 超簡單個人履歷06 | 實作

我們先回顧一下個人履歷的成品,學完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容器,但我為了讓avatarname可以靠得比較近,所以用另外用個Flex容器name-container包住avatarname

<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容器並列titletext兩個容器,然後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上,後續會持續的更新,如果喜歡也麻煩幫我按個星星吧~

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


上一篇
Day 06:專案01 - 超簡單個人履歷05 | CSS版面佈局、Flex
下一篇
Day 08:Python基本介紹01 | 環境架設、Hello Python!
系列文
從HTML到Python爬蟲的30天之旅30

尚未有邦友留言

立即登入留言