在上一篇：用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">may1092200258@gmail.com</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 的部分，讓網頁可以在電腦、平板、手機上都正常顯示喔。

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️