在HTML 和CSS 中，編排佈局和重置網頁的CSS 設定是設計現代網站的重要部分。

1.CSS
(1)使用Flexbox進行佈局
Flexbox 是一個強大的 CSS 模組，用於簡單的排列、佈局和佈局空間。

範例：兩欄式佈局

<div class="container">
  <div class="sidebar">側邊欄</div>
  <div class="main">主內容區</div>
</div>

.container {
    display: flex;  
}

.sidebar {
    width: 30%;    
    background-color: lightgray;
}

.main {
    width: 70%;      
    background-color: lightblue;
}

(2)使用CSS Grid進行佈局
CSS 網格

範例：三欄式佈局

<div class="grid-container">
  <div class="header">頁首</div>
  <div class="menu">選單</div>
  <div class="main">主內容</div>
  <div class="footer">頁尾</div>
</div>

CSS：

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "menu main main"
        "footer footer footer";
    grid-gap: 10px; 
}

.header {
    grid-area: header;
    background-color: lightblue;
}

.menu {
    grid-area: menu;
    background-color: lightgray;
}

.main {
    grid-area: main;
    background-color: lightgreen;
}

.footer {
    grid-area: footer;
    background-color: lightcoral;
}

使用浮動(Float)進行佈局
使用 Flexbox 和 Grid

範例：左側欄與主要內容

<div class="container">
  <div class="sidebar">側邊欄</div>
  <div class="main">主內容區</div>
</div>

CSS：

.sidebar {
    float: left;    
    width: 30%;
    background-color: lightgray;
}

.main {
    margin-left: 30%;
    background-color: lightblue;
}