coding小白盜版學校官網ㄉ30天挑戰日記第一天就很坎坷的css篇章

2025 iThome 鐵人賽

DAY 5

自我挑戰組

coding小白盜版學校官網ㄉ30天挑戰日記系列第 5 篇

17th鐵人賽

怪盜積德

2025-09-19 23:43:55

22 瀏覽

分享至

各位觀眾晚安...歡迎來到coding小白盜版學校官網的第五天...
今天是打工日，上班真是使人心力交瘁...

這個計畫的內容是我這個coding超新手會在這30天裡，把複刻學校官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度。

昨天開心地把學校官網截圖用figma描過一遍之後，
今天的行程毫無疑問就是開始寫css了~

套用字型

第一步是設定字型，因為看不出來原版是什麼，
所以我選擇了相似的無襯線字體 Noto sans TC。

根據chatgpt學長指導，套用的方法很簡單，
我們可以上 google fonts網站找到 Noto sans TC 字體的頁面，
依照右側的按鈕 get font → get embed code → web → link

直接把代碼複製到 html 的 head 就完成啦

但是...

原本以為上周剛開學獨自完成一份入門作業的我已經可以輕鬆解決這一回合
...殊不知才剛開始就遇到超無解的挫折...為什麼字會大到滿出來啦！！

比較三個版本：原版、figma、coding，css都是按照figma裡的尺寸寫，結果卻明顯大了很多

而且神秘的是如果把整個網頁縮小成 90% 就能很接近原版...？

雖然進度肉眼可見的少，但時間已經很晚了再不發文就要來不及了இдஇ
今天的文章只能先這樣了，正在努力尋找破解辦法，祝我順利吧！明天見！

同樣作為紀錄，附上截至目前的進度

html

<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <title>國立台北教育大學</title>
</head>
<body>
    <header class="header">
        <img class="img01" src="img\logo.png" alt="橫式logo">
        <div class="font01 nav01">
            <div></div>
            <p>校慶專區</p>
            <p>網站導覽</p>
            <p>International student</p>
            <p>新生</p>
            <p>在校生</p>
            <p>校友</p>
            <p>教職員工</p>
            <p>English</p>
            <img class="img02" src="img\icon_search.png" alt="搜尋">
        </div>
    </header>
    <nav class="font02 nav02-1">
        <ul class="nav02-2" type="none">
            <li>關於北教大</li>
            <li>學術單位</li>
            <li>行政單位</li>
            <li>高中生專區</li>
            <li>招生資訊/榜單</li>
            <li>AI@NTUE</li>
            <li>圖書館</li>
            <li>北師美術館</li>
            <li>捐款專區</li>
            <li>職涯百工圖</li>
        </ul>
    </nav>
    <article>
        <img class="img03" src="img\banner_01.jpg" alt="大橫幅">
        <section>
            <section class="article-lt">
                <div class="title01">
                    <img class="img04" src="img\icon_news.png" alt="新聞ICON">
                    <h2 class="font03">校園新聞</h2>
                </div>
                <div>
                    <img src="img\news_01.png" alt="新聞校長">
                    <div>
                        <p>2023-09-18</p>
                        <p>本校創新轉型發展有成，獲風傳媒兩則專訪報導</p>
                    </div>
                </div>
                <div>
                    <img src="img\news_02.png" alt="新聞芝山">
                    <div>
                        <p>2023-09-09</p>
                        <p>國北教大芝山親善大使團「智慧啟航‧夢想起飛」社團博覽會魅力登場</p>
                    </div>
                </div>
                <p>更多校園新聞</p>
            </section>
            <section>
                <div>
                    <img src="img\icon_video.png" alt="影片ICON">
                    <h2>影中有你</h2>
                </div>
                <div>
                    <img src="img\icon_arrowl.png" alt="向左箭頭">
                    <div>
                        <iframe src="https://www.youtube.com/embed/AZORgk8XbxY?si=H9S13TJnzsV9Accd" 
                        title="國北校園介紹影片" frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        <p>國立台北教育大學-學校簡介中文版(2024)</p>
                    </div>
                    <img src="img\icon_arrowr.png" alt="向右箭頭">
                </div>
                <p>更多影中有你</p>
            </section>
        </section>
        <section>
            <nav>
                <ul type="none">
                    <li>一般</li>
                    <li>招生</li>
                    <li>緊急</li>
                    <li>徵才</li>
                    <li>研討會</li>
                    <li>活動訊息</li>
                </ul>
            </nav>
            <div>
                <div>
                    <div>
                        <p>2024-05-02</p><p>/</p>
                        <p>本校 「校務發展績效報告」 敬請參閱</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-09-04</p><p>/</p>
                        <p>第4次公告標租本校經管「臺北市大安區復興南路二段303號」大樓共7戶房地</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-08-13</p><p>/</p>
                        <p>【公告】本校114學年度大學分發入學不另寄發錄取通知，錄取生請至本校網頁「新生專區」查閱註冊須知</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-08-21</p><p>/</p>
                        <p>「有關社群平台疑似有學生霸凌情事」澄清公告</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-09-16</p><p>/</p>
                        <p>【轉知】大陸委員會邀請貴校師生參訪</p>
                        <div class="line01"></div>
                    </div>
                    <div>
                        <p>2024-09-16</p><p>/</p>
                        <p>【通知】本校114年9月24日於行政大樓及圖書館舉行國家防災日地震演練活動，請配合相關事項</p>
                        <div class="line01"></div>
                    </div>
                    <p>更多一般訊息</p>
                </div>
            </div>
        </section>
        <section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>公開校務</h2>
                <div class="line02"></div>
                <div>
                    <p>iNTUE校務整合資訊系統</p>
                    <p>高校深耕計畫網站</p>
                    <p>資訊公開專區</p>
                    <p>學雜費專區(含獎助學金資訊)</p>
                    <p>學生兼任助理專區</p>
                    <p>勞資會議專區</p>
                    <p>校慶專區</p>
                </div>
                <p>更多公開校務</p>
            </section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>生活學習與資訊</h2>
                <div class="line02"></div>
                <div>
                    <p>Moodle教學平台</p>
                    <p>住宿資訊</p>
                    <p>愛活動演講公告平台</p>
                    <p>活動報名系統</p>
                    <p>學生獎助資源專區(含經濟不利學生)</p>
                    <p>智慧財產權專區</p>
                    <p>系所職涯就業資訊</p>
                </div>
                <p>更多生活學習</p>
            </section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>常見詢問</h2>
                <div class="line02"></div>
                <div>
                    <p>校園入口網</p>
                    <p>場地借用系統</p>
                    <p>全校分機一覽表</p>
                    <p>行事曆</p>
                    <p>各單位法令規章</p>
                    <p>防疫專區</p>
                    <p>用電資料</p>
                </div>
                <p>更多常見詢問</p>
            </section>
            <section>
                <img src="img\icon_link.png" alt="連結ICON">
                <h2>校外資訊</h2>
                <div class="line02"></div>
                <div>
                    <p>全民資安素養自我評量</p>
                    <p>2024總統盃黑克松</p>
                    <p>教育部詐騙防治專區</p>
                    <p>CIRN平台</p>
                    <p>教師資格檢定考試網站</p>
                    <p>綠色生活資訊網</p>
                    <p>防治學生藥物濫用資訊網</p>
                </div>
                <p>更多校外資訊</p>
            </section>
        </section>
        <section>
            <div>
                <img src="img\icon_fb.png" alt="FBicon">
                <p>Facebook</p>
            </div>
            <div>
                <img src="img\icon_yt.png" alt="YTicon">
                <p>Youtube</p>
            </div>
            <div>
                <img src="img\icon_ig.png" alt="IGicon">
                <p>Instagram</p>
            </div>
            <div>
                <img src="img\footlogo.png" alt="校徽">
                <p>《北教大校訊》</p>
            </div>
        </section>
    </article>
    <footer>
        <img src="img\footlogo.png" alt="校徽">
        <p>電話：+886-2-2732-1104 +886-2-6639-6688</p>
        <p>網址： https://www.ntue.edu.tw</p>
        <p>地址：106320 臺北市大安區和平東路2段134號</p>
        <p>網站維護：計網中心</p>
        <p>本網站著作權屬於 國立臺北教育大學</p>
        <p>訪問人數：5782337</p>
        <img src="img\800039144.png" alt="無障礙標章">
    </footer>

</body>
</html>

css

/*以下設定全域*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans TC", "Noto Sans", sans-serif;
}
p{
    margin: 0px;
}

/*以下設定版面*/
.header{/*header底色*/
    width: 100%;
    height: 110px;
    background-color: #897149;
    display: flex;
    align-items: center;
}
.nav01{/*右上nav*/
    display: flex;
    gap: 14px;
    margin-right: 52px;
}
.nav02-1{/*主要nav底色*/
    display: flex;
    width: 100%;
    height: 64px;
    justify-content: center;
    align-items: center;
    background-color: #DDA657;
}
.nav02-2{/*主要nav文字*/
    display: flex;
    gap: 43px;
}
.article-lt{
    display: flex;
    flex-direction: column;
    width: 744px;
}
.title01{
    display: flex;
    justify-content: center;
    gap: 16px;
}

/*以下設定線條*/
.line01{/*淺冷灰長橫線*/
    border-top: 1px solid #E2E2E2;
    height: 0px;
    width: 1326px;
}
.line02{/*淺款灰中橫線*/
    border-top: 1px solid #D2CEC7;
    height: 0px;
    width: 322px;
}

/*以下設定圖片*/
.img01{/*左上校徽*/
    width: 220px;
    height: 90px;
    margin: auto auto auto 52px;
}
.img02{/*搜尋*/
    width: 36px;
    height: 36px;
}
.img03{/*banner*/
    width: 100%;
    height: 450px;
}
.img04{/*小標icon*/
    width: 36px;
    height: 36px;
}
/*以下設定文字*/
.font01{
    font-size: 16px;
    color: #FFFFFF;
}
.font02{
    font-size: 20px;
    font-weight: 500;
}
.font03{
    font-size: 22px;
    font-weight: 600;
}
.font04{
    font-size: 18px;
    letter-spacing: 4%;
}

/*以下設定色塊*/