[Day 15 - 小试身手] 用HTML、CSS、JS打造个人网站 (2)

在上一篇：用HTML、CSS、JS打造个人网站 (1)，讲解了开发网页的前置作业，以及 Header 跟 Section-Primary 的区块，接下来就让我们来完成剩下的三个区块 Works、About 和 Footer。

Selected-works

建构内容

一样先拆解架构，蓝区是网页显示的内容 / 红区是包裹的容器。跟 Section-Primary 一样，最外层用 <section> 和 wrapper-content 包住，内部则会分成 Title 和 WorkList 两块。

index.html

...
<section class="section-selected-works">
    <div class="secondary-content wrapper-content">
        <h2 class="secondary__title section__title">Selected works</h2>
        <div class="wrapper-selected-works">
            <div class="wrapper-work">...(作品1)</div>
            <div class="wrapper-work">...(作品2)</div>
            <div class="wrapper-work">...(作品3)</div>
        </div>
    </div>
</section>

...
<div class="wrapper-work">
    <img src="assets/images/selected-work-2.png" alt="">
    <div class="wrapper-work-text">
        <h3 class="work__title">呷虾咪</h3>
        <div class="work__position">Front-end Engineer<br>UI Designer</div>
        <div >外卖点餐平台<br>提供店家外卖以及顾客点餐的服务</div>
        <a href="" class="work__link-button link-button">View Detail</a>
        <div>or <a href="" class="work__link link-text">View all works</a></div>
    </div>
</div>
...

三个作品的架构都一样，只要修改文字内容就可以罗。

设定排版、宽高样式

观察一下设计稿，Works 和 About 区块存在一些相同的样式，可以抽离这些样式，一并设定在 secondary-content 里。

style.css

...
.secondary-content {
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrapper-selected-works {
  width: 95%;
  display: flex;
  justify-content: space-between;
}

设定外观、文字

设定每个作品的内容样式，Button 直接套上之前设定的 link-button，另外设定 work__link-button 其他属性；也抽离可重复使用的 secondary__title。

...
.secondary__title {
  font-size: 36px;
  margin-bottom: 50px;
}

.work__title {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.work__position {
  color: #777;
  height: 46px;
  margin-bottom: 10px;
}

.work__link-button {
  margin-top: 30px;
  margin-bottom: 20px;
}

.work__link {
  font-weight: bold;
  text-decoration: underline;
}

完成 Selected-works！

Section-about

建构内容

除了最外层用 <section> 和 wrapper-content 包住，在上一个区块已经设定好 secondary-content 的共同样式，就可以直接套用。内部会分成 Title、图片 和 文字介绍，不过这边要将图片和文字介绍包起来，方便之後去作排版设定。

index.html

<main>
    ...
    <section class="section-about">
        <div class="secondary-content wrapper-content">
            <h2 class="secondary__title section__title">About</h2>
            <div class="wrapper-about">
                <img class="about__img" src="assets/images/me-big.png" alt="">
                <div class="wrapper-about-text">
                    ...(右栏文字介绍)
                </div>
            </div>
        </div>
    </section>
</main>

...
<div class="wrapper-about-text">
    <p>我主要的专长是程序开发，曾经尝试过网页/APP、游戏开发。目前我则专注於网页、APP前端领域，并且持续学习更多有关UI/UX、AI人工智慧的知识。</p>
    <div class="about__title">Used Technologies</div>
    <ul class="about__skill-list">
        <li class="about__skill-item">Git/Github</li>
        <li class="about__skill-item">Vue</li>
        <li class="about__skill-item">C/C++/C#</li>
        <li class="about__skill-item">JavaScript</li>
        <li class="about__skill-item">React</li>
    </ul>
    <div class="about__title">Learning now</div>
    <ul class="about__skill-list">
        <li class="about__skill-item">Typescript</li>
        <li class="about__skill-item">Python</li>
    </ul>
    <a href="" class="about__link-button link-button">More About Me</a>
</div>
...

设定排版、宽高样式

内部的元素都会使用百分比设定宽高，它就会根据父元素去做缩放调整，会有利於之後进行的 RWD 设计。

style.css

...
.wrapper-about {
  width: 80%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.about__img {
  margin-top: 40px;
}

.wrapper-about-text {
  width: 60%;
}

设定外观、文字

Button 的部分一样可以直接套用先前的样式 link-button，再另外设定 about__link-button。

...
.about__title {
  font-weight: bold;
  margin-top: 10px;
}

.about__skill-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;
  margin: 5px 0;
}

.about__skill-item {
  margin: 2px 60px 2px 0;
}

.about__link-button {
  margin-top: 30px;
}

About 区块完成！

Footer

建构内容

终於来到最後一个区块，想必大家已经很熟悉步骤，这边就不多说要用 footer 和 wrapper-content 了。

index.html

...
<footer>
    <div class="footer-content wrapper-content">
        <div>...(左栏内容)</div>
        <nav>...(右栏内容)</nav>
    </div>
</footer>

...
<div>
    <div class="logo">PEI-YUN</div>
    <div class="footer__text">© 2021 PEIYUN,LEE</div>
</div>
...

...
<nav>
    <div class="footer-nav-list">
        <div class="footer-nav-list__title">NAVIGATION</div>
        <a href="" class="footer-nav-list__text link-text">HOME</a>
        <a href="" class="footer-nav-list__text link-text">ABOUT</a>
        <a href="" class="footer-nav-list__text link-text">WORKS</a>
    </div>
    <div class="footer-nav-list">
        <div class="footer-nav-list__title">SOCIAL</div>
        <a href="网址" class="footer-nav-list__text link-text">Github</a>
        <a href="网址" class="footer-nav-list__text link-text">Codepen</a>
        <a href="网址" class="footer-nav-list__text link-text">Medium</a>
    </div>
    <div class="footer-nav-list">
        <div class="footer-nav-list__title">CONTACT</div>
        <a href="网址" class="footer-nav-list__text link-text">Facebook</a>
        <div class="footer-nav-list__text">[email protected]</div>
    </div>
</nav>
...

设定排版、宽高样式

style.css

...
footer {
  margin-top: 100px;
}

.footer-content {
  background-color: #fff5da;
  padding: 30px;
  display: flex;
  justify-content: space-between;
}

footer nav {
  width: 600px;
  display: flex;
  justify-content: space-between;
}

.footer-nav-list {
  color: #000;    /*一并设定内元素的文字颜色*/
  display: flex;
  flex-direction: column;
}

设定外观、文字

还记得在 Header 设定过的 link-text 吗，我们设定了 letter-spacing 和 Hover 的样式，所以这边只要加上 ClassName 就能套用同样的样式罗。习惯这样拆解你的 CSS，去提升重复使用性，就能有效增进开发的效率。

...
.footer__license {
  margin-top:10px
}

.footer-nav-list__title {
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 3px;
}

.footer-nav-list__text  {
  margin-bottom: 15px;
}

完成最後的 Footer 区块！

辛苦了，我们完成所有区块罗！

小结

今天终於完成了完整的网页内容，但目前都维持宽度是 1024px，还没办法去适应萤幕的宽度，所以你会看到有空白出现。所以在下一章的内容里，就会开始进行 RWD 的部分，让网页可以在电脑、平板、手机上都正常显示喔。

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️