Day 03：側邊欄導覽與主控台骨架

javascript css

rong824 2026-09-24 19:57:13 ‧ 101 瀏覽

分享至

在前兩天，我們確立了「大學生記帳與消費分析網站」的完整藍圖，也把開發環境跟專案根目錄都安頓好了。不過老實說，打開昨天的畫面，真的看起來也太廢廢了吧，所以我們今天會幫它們穿上好看的衣服，做出一個有質感、兼具「側邊欄導覽」與「個人化小金庫儀表板」的精緻網頁骨架，讓整個專案整個升級！

今天主要完成：

規劃與實作現代化的側邊欄導覽選單（總覽、月曆、預算、統計）

打造個人化金庫命名區塊（預留「某某的小金庫」互動空間）
設置周預算與月預算目標設定區塊
建立美觀的數據總覽卡片（今日支出、本週與本月花費對比）
實作日曆檢視與快速記帳的雙欄排版介面

一、打造現代化側邊欄與整體版面配置 (Flexbox 佈局)

為了讓網頁看起來像一個真正的單頁式應用程式，我們使用 CSS 的 Flexbox 將畫面拆成左右兩塊：左側是固定寬度的側邊欄，右側則是主內容區塊。

<!-- 左側選單欄 -->
<div class="sidebar">
    <h2> 我的小金庫</h2>
    <a href="#" class="active"> 總覽</a>
    <a href="#"> 月曆</a>
    <a href="#"> 預算</a>
    <a href="#"> 統計</a>
</div>

二、設計個人化儀表板與預算目標設定

接下來在右側主畫面頂部，加入稱呼的輸入框與標題，並規劃了預算設定區塊：

<!-- 個人化歡迎與金庫命名 -->
<div class="header-section">
    <div>
        <h1 style="margin: 0; font-size: 24px;">我的小金庫</h1>
    </div>
    <div>
        <input type="text" placeholder="輸入你的名字">
        <button>打造我的小金庫</button>
    </div>
</div>

<!-- 預算與額度設定 -->
<div class="section-box">
    <h3>預算</h3>
    <label>周預算：</label><input type="number" placeholder="例如: 2000">
    <label>月預算：</label><input type="number" placeholder="例如: 8000">
    <button>儲存預算</button>
</div>

這裡的設計理念是讓使用者可以自訂自己的週/月預算，作為後續計算是否超支的重要基準。

三、實作雙欄排版：日曆檢視與快速記帳表單

在網頁的中下段，我們利用 CSS Grid 實作了雙欄排版：

左側（檢視區塊）：用來條列顯示每一天的消費明細。
右側（快速記帳）：提供日期、消費名稱、金額與類別下拉選單，讓使用者能直覺地新增支出。

<!-- 雙欄排版：左側日曆消費紀錄，右側快速記帳 -->
<div class="grid-layout">
    
    <!-- 左側：日曆與每日支出顯示 -->
    <div class="section-box">
        <h3>日曆</h3>
        <div class="calendar-mock">
            <div class="day-item">
                <strong>2026-06-07 (今天)</strong>
                <div style="font-size: 14px; color: #555; margin-top: 5px;">
                    • 早餐: $60 (食物)<br>
                    • 捷運: $35 (交通)
                </div>
            </div>
        </div>
    </div>

    <!-- 右側：快速記帳表單 -->
    <div class="section-box">
        <h3>快速記帳</h3>
        <div style="display: flex; flex-direction: column; gap: 10px;">
            <input type="date">
            <input type="text" placeholder="消費名稱">
            <input type="number" placeholder="金額">
            <select>
                <option>食物</option>
                <option>交通</option>
                <option>娛樂</option>
            </select>
            <button style="background-color: #2ecc71;">新增支出</button>
        </div>
    </div>
</div>