html5 css3网页实例：HTML5与CSS3的完美融合，打造现代网页实例

来源：网络作者：日期：2025-11-02 13:14:47

在现代网页开发中，HTML5和CSS3已经成为不可或缺的技术组合，它们不仅提供了更丰富的语义化标签和强大的功能，还通过CSS3的创新特性极大地提升了网页的视觉体验和交互性，本文将通过一个完整的记账应用实例，展示HTML5和CSS3如何协同工作,创造出既美观又实用的现代网页。

实例：响应式记账应用

下面是一个结合HTML5和CSS3的记账应用实例，该应用具有响应式设计、本地存储功能和动态图表展示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">记账应用</title>
    <style>
        /* CSS3部分 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            text-align: center;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        .form-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .chart-container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        canvas {
            width: 100%;
            height: 300px;
        }
        .transaction-list {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .transaction-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .transaction-item:last-child {
            border-bottom: none;
        }
        .delete-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        /* 媒体查询实现响应式设计 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            .form-container, .chart-container, .transaction-list {
                padding: 15px;
            }
            .transaction-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .transaction-item .amount {
                margin-top: 5px;
                align-self: flex-end;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>记账应用</h1>
            <p>记录您的每一笔收支</p>
        </header>
        <div class="form-container">
            <h2>添加新记录</h2>
            <form id="transaction-form">
                <div class="form-group">
                    <label for="type">类型</label>
                    <select id="type" required>
                        <option value="收入">收入</option>
                        <option value="支出">支出</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="category">分类</label>
                    <select id="category" required>
                        <option value="工资">工资</option>
                        <option value="奖金">奖金</option>
                        <option value="购物">购物</option>
                        <option value="餐饮">餐饮</option>
                        <option value="交通">交通</option>
                        <option value="娱乐">娱乐</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="amount">金额</label>
                    <input type="number" id="amount" step="0.01" min="0.01" required>
                </div>
                <div class="form-group">
                    <label for="date">日期</label>
                    <input type="date" id="date" required>
                </div>
                <button type="submit">添加记录</button>
            </form>
        </div>
        <div class="chart-container">
            <h2>收支图表</h2>
            <canvas id="chart"></canvas>
        </div>
        <div class="transaction-list">
            <h2>交易记录</h2>
            <div id="transactions-container">
                <!-- 交易记录将通过JavaScript动态添加 -->
            </div>
        </div>
    </div>
    <script>
        // HTML5部分：使用localStorage进行本地存储
        // 获取当前日期并设置为默认值
        document.getElementById('date').valueAsDate = new Date();
        // 获取交易记录并显示
        function loadTransactions() {
            let transactions = JSON.parse(localStorage.getItem('transactions')) || [];
            const container = document.getElementById('transactions-container');
            container.innerHTML = '';
            if (transactions.length === 0) {
                container.innerHTML = '<p>暂无交易记录</p>';
                return;
            }
            // 按日期排序
            transactions.sort((a, b) => new Date(b.date) - new Date(a.date));
            transactions.forEach(transaction => {
                const item = document.createElement('div');
                item.className = 'transaction-item';
                item.innerHTML = `
                    <div>
                        <strong>${transaction.type === '收入' ? '收入' : '支出'}: ${transaction.category}</strong>
                        <p>${new Date(transaction.date).toLocaleDateString()}</p>
                    </div>
                    <div class="amount">${transaction.type === '收入' ? '+' : '-'}¥${transaction.amount.toFixed(2)}</div>
                    <button class="delete-btn" data-id="${transaction.id}">删除</button>
                `;
                container.appendChild(item);
            });
            // 添加删除事件监听
            document.querySelectorAll('.delete-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    deleteTransaction(id);
                });
            });
        }
        // 添加交易记录
        document.getElementById('transaction-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const type = document.getElementById('type').value;
            const category = document.getElementById('category').value;
            const amount = parseFloat(document.getElementById('amount').value);
            const date = document.getElementById('date').value;
            const transaction = {
                id: Date.now(), // 使用时间戳作为唯一ID
                type,
                category,
                amount,
                date
            };
            let transactions = JSON.parse(localStorage.getItem('transactions')) || [];
            transactions.push(transaction);
            localStorage.setItem('transactions', JSON.stringify(transactions));
            loadTransactions();
            this.reset();
            document.getElementById('date').valueAsDate = new Date();
        });
        // 删除交易记录
        function deleteTransaction(id) {
            let transactions = JSON.parse(localStorage.getItem('transactions')) || [];
            transactions = transactions.filter(transaction => transaction.id !== id);
            localStorage.setItem('transactions', JSON.stringify(transactions));
            loadTransactions();
        }
        // 绘制图表
        function drawChart() {
            const ctx = document.getElementById('chart').getContext('2d');
            const width = document.getElementById('chart').width;
            const height = document.getElementById('chart').height;
            // 清空画布
            ctx.clearRect(0, 0, width, height);
            // 获取交易数据
            const transactions = JSON.parse(localStorage.getItem('transactions')) || [];
            const income = transactions.filter(t => t.type === '收入').reduce((sum, t) => sum + t.amount, 0);
            const expenses = transactions.filter(t => t.type === '支出').reduce((sum, t) => sum + t.amount, 0);
            // 计算图表尺寸
            const barWidth = 50;
            const spacing = 20;
            const totalWidth = barWidth * 2 + spacing;
            const x = (width - totalWidth) / 2;
            // 绘制标题
            ctx.font = '16px Arial';
            ctx.fillStyle = '#333';
            ctx.textAlign = 'center';
            ctx.fillText('月度收支情况', width / 2, 30);
            // 绘制柱状图
            ctx.fillStyle = '#3498db'; // 收入颜色
            ctx.fillRect(x, height - 30 - (income * 20 / 1000), barWidth, income * 20 / 1000);
            ctx.fillStyle = '#e74c3c'; // 支出颜色
            ctx.fillRect(x + barWidth + spacing, height - 30 - (expenses * 20 / 1000), barWidth, expenses * 20 / 1000);
            // 绘制图例
            ctx.fillStyle = '#3498db';
            ctx.fillRect(x, 10, 10, 10);
            ctx.fillStyle = '#333';
            ctx.font = '12px Arial';
            ctx.fillText('收入', x + 20, 20);
            ctx.fillStyle = '#e74c3c';
            ctx.fillRect(x + barWidth + spacing + 10, 10, 10, 10);
            ctx.fillStyle = '#333';
            ctx.fillText('支出', x + barWidth + spacing + 30, 20);
            // 绘制数值
            ctx.fillStyle = '#333';
            ctx.font = '14px Arial';
            ctx.fillText(`收入: ¥${income.toFixed(2)}`, x + barWidth / 2, height - 10);
            ctx.fillText(`支出: ¥${expenses.toFixed(2)}`, x + barWidth + spacing + barWidth / 2, height - 10);
        }
        // 页面加载时初始化
        window.addEventListener('load', function() {
            loadTransactions();
            drawChart();
        });
        // 当交易记录变化时重新绘制图表
        window.addEventListener('storage', function() {
            drawChart();
        });
    </script>
</body>
</html>