coding小白盜版學校官網ㄉ30天挑戰日記相對長度rem&em

2025 iThome 鐵人賽

DAY 9

自我挑戰組

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

17th鐵人賽

怪盜積德

2025-09-23 17:22:19

32 瀏覽

分享至

各位帥哥美女下午好，歡迎來到coding小白盜版學校官網的第九天～

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

昨天把官網首頁的介面大致刻完了，開開心心(σﾟ∀ﾟ)σ..:*☆

今天開始試著認識一下所謂的RWD響應式網站設計。雖然好像聽說過這是什麼東西，但為了確認理解沒有錯所以還是找了一些資料來看，讓我印象最深的是這部犬哥網站的【RWD 響應式設計是什麼？手機、平板排版好看的必備觀念（完整教學）】

這部影片從響應式網站是什麼到會用到的一些基本程式寫法都有介紹，白話好理解，
雖然不是那種可以說一步做一步的跟練式教學影片，但感覺剛入門用來釐清觀念還是很夠看的

一時之間接受到太多資訊有點難以下手，猶豫了很久最後決定從改長度單位開始改

之前為了剛學不想分心在太多地方眉角，我長度都是用最熟悉直白的px寫，但看完很多介紹後才知道，原來rem&em才是現在最多人在用的呀

除了看影片、問chatgpt，我也找了一些文字資料
這篇Medium文章專門在介紹相對單位【CSS 小技巧分享：em 單位的強大用途】是我覺得最白話又詳細的，分享給大家～

::::::::::୨୧::::::::::୨୧::::::::::୨୧:::::::::::୨୧:::::::::::

總結筆記

長度單位可以區分為：「絕對長度單位」和「相對長度單位」兩種。
絕對長度單位：其表示的值為一固定值，反映了真實世界的物理尺寸。
例如：cm、mm、*px等。（px 較特殊，是 CSS 像素的絕對單位，但會因為裝置不同而有所差異）
相對長度單位：其表示的值是相對另一長度屬性值所計算出來的。
例如：em、rem、vw、vh等。

em：相對於父元素的字體大小的單位，父元素沒得看就看根元素。1em = 父元素的 font-size
rem：相對於根元素(html)的字體大小的單位。一般來說會幫html設定統一的字體大小16px，之後在寫長寬和字級時1rem =16px、2rem=32px、0.5rem=8px

::::::::::୨୧::::::::::୨୧::::::::::୨୧:::::::::::୨୧:::::::::::

理論學完當然就是馬上開始實作
實踐起來其實沒有太難，按一下計算機的事，當然對不對又是另一回事了
至少畫面改完跟改前沒什麼區別...那應該就是沒問題的意思(吧...?)

不知不覺三個小時就過去了，今天先這樣子，明天再來試試看傳說中的@media
大家ㄅㄅ～

交作業區↓↓↓↓
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 class="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 class="article-top">
            <section class="article-lt">
                <div class="title01">
                    <img class="img04" src="img\icon_news.png" alt="新聞ICON">
                    <h2 class="font03">校園新聞</h2>
                </div>
                <div class="news-box04">
                    <div class="news-box02">
                        <img class="img05" src="img\news_01.png" alt="新聞校長">
                        <div class="news-box01">
                            <p class="font05">2023-09-18</p>
                            <p class="font04">本校創新轉型發展有成，獲風傳媒兩則專訪報導</p>
                        </div>
                    </div>
                    <div class="news-box02">
                        <img class="img05" src="img\news_02.png" alt="新聞芝山">
                        <div class="news-box01">
                            <p class="font05">2023-09-09</p>
                            <p class="font04">國北教大芝山親善大使團「智慧啟航‧夢想起飛」社團博覽會魅力登場</p>
                        </div>
                    </div>
                </div>
                
                <p class="font06">更多校園新聞</p>
            </section>
            <section class="article-rt">
                <div class="title01">
                    <img src="img\icon_video.png" alt="影片ICON">
                    <h2 class="font03">影中有你</h2>
                </div>
                <div class="video-box">
                    <img class="img07" src="img\icon_arrowl.png" alt="向左箭頭">
                    <div>
                        <iframe class="youtube" 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 class="font07">國立台北教育大學-學校簡介中文版(2024)</p>
                    </div>
                    <img class="img07" src="img\icon_arrowr.png" alt="向右箭頭">
                </div>
                <p class="font06">更多影中有你</p>
            </section>
        </section>
        <section class="article-middle">
            <nav>
                <ul class="font03 nav03" type="none">
                    <li class="line03">一般</li>
                    <li class="line03">招生</li>
                    <li class="line03">緊急</li>
                    <li class="line03">徵才</li>
                    <li class="line03">研討會</li>
                    <li class="line03">活動訊息</li>
                </ul>
            </nav>
            <div class="article-m01">
                <div class="font04 information02">
                    <div class="information01">
                        <p class="font08">2024-05-02</p><p>/</p>
                        <p>本校 「校務發展績效報告」 敬請參閱</p>
                    </div>
                    <div class="line01"></div>
                    <div class="information01">
                        <p class="font08">2024-09-04</p><p>/</p>
                        <p>第4次公告標租本校經管「臺北市大安區復興南路二段303號」大樓共7戶房地</p>
                    </div>
                    <div class="line01"></div>
                    <div class="information01">
                        <p class="font08">2024-08-13</p><p>/</p>
                        <p>【公告】本校114學年度大學分發入學不另寄發錄取通知，錄取生請至本校網頁「新生專區」查閱註冊須知</p>
                    </div>
                    <div class="line01"></div>
                    <div class="information01">
                        <p class="font08">2024-08-21</p><p>/</p>
                        <p>「有關社群平台疑似有學生霸凌情事」澄清公告</p>
                    </div>
                    <div class="line01"></div>
                    <div class="information01">
                        <p class="font08">2024-09-16</p><p>/</p>
                        <p>【轉知】大陸委員會邀請貴校師生參訪</p>
                    </div>
                    <div class="line01"></div>
                    <div class="information01">
                        <p class="font08">2024-09-16</p><p>/</p>
                        <p>【通知】本校114年9月24日於行政大樓及圖書館舉行國家防災日地震演練活動，請配合相關事項</p>
                    </div>
                    <div class="line01"></div>
                </div>
            </div>
            <p class="font06">更多一般訊息</p>
        </section>
        <section class="article-bottom font04">
            <section class="article-b02">
                <div class="title02">
                    <img src="img\icon_link.png" alt="連結ICON">
                    <h2>公開校務</h2>
                </div>
                <div class="line02"></div>
                <div class="article-b01">
                    <p>iNTUE校務整合資訊系統</p>
                    <p>高校深耕計畫網站</p>
                    <p>資訊公開專區</p>
                    <p>學雜費專區(含獎助學金資訊)</p>
                    <p>學生兼任助理專區</p>
                    <p>勞資會議專區</p>
                    <p>校慶專區</p>
                </div>
                <p class="font09">更多公開校務</p>
            </section>
            <section class="article-b02">
                <div class="title02">
                    <img src="img\icon_link.png" alt="連結ICON">
                    <h2>生活學習與資訊</h2>
                </div>
                <div class="line02"></div>
                <div class="article-b01">
                    <p>Moodle教學平台</p>
                    <p>住宿資訊</p>
                    <p>愛活動演講公告平台</p>
                    <p>活動報名系統</p>
                    <p>學生獎助資源專區(含經濟不利學生)</p>
                    <p>智慧財產權專區</p>
                    <p>系所職涯就業資訊</p>
                </div>
                <p class="font09">更多生活學習</p>
            </section>
            <section class="article-b02">
                <div class="title02">
                    <img src="img\icon_link.png" alt="連結ICON">
                    <h2>常見詢問</h2>
                </div>
                <div class="line02"></div>
                <div class="article-b01">
                    <p>校園入口網</p>
                    <p>場地借用系統</p>
                    <p>全校分機一覽表</p>
                    <p>行事曆</p>
                    <p>各單位法令規章</p>
                    <p>防疫專區</p>
                    <p>用電資料</p>
                </div>
                <p class="font09">更多常見詢問</p>
            </section>
            <section class="article-b02">
                <div class="title02">
                    <img src="img\icon_link.png" alt="連結ICON">
                    <h2>校外資訊</h2>
                </div>
                <div class="line02"></div>
                <div class="article-b01">
                    <p>全民資安素養自我評量</p>
                    <p>2024總統盃黑克松</p>
                    <p>教育部詐騙防治專區</p>
                    <p>CIRN平台</p>
                    <p>教師資格檢定考試網站</p>
                    <p>綠色生活資訊網</p>
                    <p>防治學生藥物濫用資訊網</p>
                </div>
                <p class="font09">更多校外資訊</p>
            </section>
        </section>
        <section class="link02">
            <div class="link01">
                <img class="img08" src="img\icon_fb.png" alt="FBicon">
                <p>Facebook</p>
            </div>
            <div class="link01">
                <img class="img08" src="img\icon_yt.png" alt="YTicon">
                <p>Youtube</p>
            </div>
            <div class="link01">
                <img class="img08" src="img\icon_ig.png" alt="IGicon">
                <p>Instagram</p>
            </div>
            <div class="link01">
                <img class="img08" src="img\footlogo.png" alt="校徽">
                <p>《北教大校訊》</p>
            </div>
        </section>
    </article>
    <footer class="footer font10">
        <div class="footer-all">
            <img class="img09" src="img\footlogo.png" alt="校徽">
            <div class="footer-grid">
                <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></p>
                <p>訪問人數：5782337</p>
            </div>
        <img class="img10" src="img\800039144.png" alt="無障礙標章">
        </div>
    </footer>
</body>
</html>

css

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

/*以下設定版面*/
.body{
    display: flex;
    flex-direction: column;
}
.header{/*header底色*/
    width: 100%;
    height: 6.9rem;
    background-color: #897149;
    display: flex;
    align-items: center;
}
.nav01{/*右上nav*/
    display: flex;
    gap: 14px;
    margin-right: 3.25rem;
    align-items: center;
}
.nav02-1{/*主要nav底色*/
    display: flex;
    width: 100%;
    height: 4rem;
    justify-content: center;
    align-items: center;
    background-color: #DDA657;
}
.nav02-2{/*主要nav文字*/
    display: flex;
    gap: 2.75rem;
}
.nav03{
    display: flex;
    gap: 0.5rem;
    margin-top: 9rem;
    justify-content: flex-start;
    align-items: center;

}
.article-top{/*校園新聞與影中有你*/
    display: flex;
    width: 81rem;
    gap: 3.5%;
    margin: 0 auto;
    justify-content: center;
}
.article-middle{/*訊息列表*/
    display: flex;
    flex-direction: column;
    width: 81rem;
    margin: 0 auto;
}
.article-bottom{
    width: 100%;
    height: 28.5rem;
    background-color: #F3F0EB;
    display: flex;
    margin-top: 4.6rem;
    padding: 4.18rem 3.75rem;
    gap: 1%;
    justify-content: center;
}
.article-lt{
    display: flex;
    flex-direction: column;
    width: 46.5rem;
}
.article-rt{
    display: flex;
    flex-direction: column;
    width: 31.75rem;
}
.article-m01{
    display: flex;
    justify-content: center;
    width: 100%;
}
.article-b01{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.article-b02{
    display: flex;
    flex-direction: column;
}
.footer{
    width: 100%;
    height: 12.5rem;
    background-color: #897149;
    display: flex;
    padding: 60px 81px;
}

.footer-grid{
    display: grid;
    grid-template-columns: 350px 350px 350px;
    grid-template-rows: 20px 20px 20px;
    grid-auto-flow: column;
    gap: 12px 40px;
    margin: 0px;
}
.footer-all{
    display: flex;
    margin: 0 auto;
}
.title01{
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 16px;
    margin: 22px;
}
.title02{
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    gap: 16px;
}
.link01{
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    gap: 8px;
    font-size: 18px;
}
.link02{
    display: flex;
    gap: 200px;
    margin: 20px auto;
    justify-content: center;
}
.news-box01{
    width: 468px;
    height: 170px;
    border: 1px solid #D2CEC7;
    padding: 28px 26px;
}
.news-box02{
    display: flex;
}
.news-box03{
    display: flex;
}
.news-box04{
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.video-box{
    display: flex;
    width: 508px;
    height: 362px;
    border: 1px solid #D2CEC7;
    padding: 29px 26px;
    justify-content: center;
    align-items: center;
}
.information01{
    display: flex;
    gap: 13px;
    align-items: center;
    white-space: nowrap;
}
.information02{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
}

/*以下設定線條*/
.line01{/*淺冷灰長橫線*/
    border-top: 1px solid #E2E2E2;
    height: 0px;
    width: 1326px;
}
.line02{/*淺款灰中橫線*/
    border-top: 1px solid #D2CEC7;
    height: 0px;
    width: 322px;
    margin-top: 8px;
    margin-bottom: 18px;
}
.line03{
    border-bottom: 2px solid #DDA657;
    width: fit-content;
    padding: 12px;
}

/*以下設定圖片*/
.youtube{
    width: 451px;
    height: 281px;
}
.img01{/*左上校徽*/
    width: 220px;
    height: 90px;
    margin: auto auto auto 52px;
}
.img02{/*搜尋*/
    width: 36px;
    height: 36px;
    vertical-align: middle;
    flex-shrink: 0;
}
.img03{/*banner*/
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.img04{/*小標icon*/
    width: 36px;
    height: 36px;
}
.img05{/*校園新聞照片*/
    width: 306px;
    height: 170px;
    object-fit: cover;
    flex-shrink: 0;
}
.img07{/*影中有你箭頭*/
    width: 23px;
    height: 36px;
    object-fit: cover;
}
.img08{
    width: 42px;
    height: auto;
}
.img09{
    width: 76px;
    height: 70px;
    margin-right: 36px;
}
.img10{
    width: 100px;
    height: 35px;
    margin-left: -100px;
}
/*以下設定文字*/
.font01{
    font-size: 1rem;
    color: #FFFFFF;
}
.font02{/*小粗體字*/
    font-size: 1.25rem;
    font-weight: 500;
}
.font03{/*大粗體字*/
    font-size: 1.375rem;
    font-weight: 600;
}
.font04{
    font-size: 1.125rem;
    letter-spacing: 4%;
}
.font05{
    font-size: 1.125rem;
    letter-spacing: 4%;
    color: #897149;
    margin-bottom: 4px;
}
.font06{
    display: flex;
    font-size: 1rem;
    margin-top: 12px;
    justify-content: flex-end;
    align-items: flex-end;
}
.font07{
    margin-top: 16px;
}
.font08{
    font-size: 1.125rem;
    color: #FFFFFF;
    letter-spacing: 4%;
    background-color: #586A88;
    display: inline;
    padding: 3px 15px;
    border-radius: 16px;
}
.font09{
    display: flex;
    font-size: 1rem;
    margin-top: 44px;
    justify-content: flex-end;
    align-items: flex-end;
}
.font10{
    font-size: 1rem;
    color: #FFFFFF;
    letter-spacing: 4%;
}
/*以下設定色塊*/