ASP.NET 頁面佈局新手指南：從 <br/> &nbsp; 到 CSS 佈局

新手常見困惑

剛接觸 ASP.NET，頁面排版只會用 <br/> 換行、  空格，看到大公司登入頁原始碼卻沒這些標籤，不知如何實現精美佈局。

演進路徑

階段 1：Table 佈局（入門專案、畢業設計足夠）

<table>
  <tr><td>用戶名:</td><td><input /></td></tr>
  <tr><td>密碼:</td><td><input type="password" /></td></tr>
</table>

• 優點：直觀、相容性極好、無需 CSS 基礎。
• 缺點：語義不清、程式碼冗長、響應式困難。

階段 2：Div + CSS 佈局（企業級標準）

<div class="form-group">
  <label>用戶名</label>
  <input class="form-control" />
</div>
<style>
.form-group { display: flex; align-items: center; margin-bottom: 15px; }
.form-group label { width: 80px; }
.form-control { flex: 1; padding: 8px; border: 1px solid #ddd; }
</style>

• 核心：語義化 HTML + Flexbox/Grid 彈性佈局。
• 大公司頁面多由美工設計 CSS，開發者專注結構與綁定。

階段 3：UI 框架（Bootstrap、Ant Design、Element UI）

引入成熟框架，直接使用 class="form-control" 等類別，快速構建專業介面，保證跨瀏覽器一致性。

建議學習路線

1. 先掌握 HTML 基本標籤與盒模型。
2. 學習 CSS 選擇器、Flexbox、Grid 佈局。
3. 嘗試 Bootstrap 5 實戰專案。
4. 理解 ASP.NET (WebForms/MVC/Core) 如何輸出/綁定前端結構。

佈局本質是 CSS 功夫，ASP.NET 只是伺服端渲染引擎，前端技術通用。