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容器，但我为了让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>
                [email protected]
            </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上，後续会持续的更新，如果喜欢也麻烦帮我按个星星吧~

有任何问题或建议，都欢迎在底下留言区提出，还请大家多多指教。