# HTML、CSS的版面製作

這篇我真的想超久到底要給多少篇幅，因為HTML跟CSS的語法較為零散，要細講的話可能要十幾篇，所以我最後決定講大致上的版面規劃就好，而且是盡可能適用各種解析度的版面配置

## 網頁版面概述

這邊直接上示意圖


這邊一一介紹，上方的nav是放通往其他頁面的連結的地方，更精確地說是放在ul(unordered list)裡；再來是body，裡面裝各個div，div裡面放內容，我的div都是用flex-box寫的(其實nav也是)，能動態調整內部排列，不讓內容撞在一起；最後是footer，是裝我的GitHub、Facebook...的帳號，這個則是用grid寫，是個非常神奇的語法，也是確保內容不會相撞且會自動換行

div {
    display: flex;
    justify-content: space-around; /* 平均分配空白空間 */
    align-items: center; /* 置中對齊 */
    flex-direction: row; /* 橫向排列 */
    flex-wrap: wrap; /* 自動換行 */
}

footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); 
    /* 會先將寬度平均分給各元素，若平均寬度小於7rem就把一個換到下一行 */
    gap: 0.5rem; /* 各元素間隔 */
}

其實最麻煩的就是這些東西，頭過身就過

另一個重要的小語法是clamp，clamp的語法是clamp(最小值, 變動值, 最大值)，當變動值小於最小值，則取最小值，當變動值大於最大值，取最大值，在中間就能隨意跑，也可寫成max(最小值, min(變動值, 最大值))，這樣就能動態調整大小

img {
    height: clamp(15rem, 40vw + 5rem, 40rem);
}

## 要結論了

總感覺寫得不夠多，但若要繼續寫卻又有點太過雜亂，所以就先介紹幾個排版的重點，接下來講JavaScript，就有非常非常多可以講了

---

<ul style ="display: flex; flex-direction: row; width: 100%; justify-content: space-between;margin: 0; padding: 0;">
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/BkOAjYsAt" >上一篇</a></li>
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/rJBpwRsut">主頁</a></li>
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/BkCAZwj_Y">下一篇</a></li>
</ul>