学习HTML+css

以下是进一步美化的网页代码，增加了更复杂的设计元素和交互效果，同时保持页面的现代感和美观性：

进一步美化后的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客主页</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
        }

        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: #fff;
            padding: 80px 0;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 10%, transparent 10.01%);
            background-size: 20px 20px;
            animation: moveBackground 10s linear infinite;
            opacity: 0.5;
        }

        @keyframes moveBackground {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(20px, 20px);
            }
        }

        header h1 {
            margin: 0;
            font-size: 3rem;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 1;
        }

        /* 容器样式 */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 40px auto;
            background-color: #fff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        /* 标题样式 */
        h2 {
            color: #2575fc;
            font-size: 2.2rem;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
        }

        h2::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 50%;
            height: 3px;
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            border-radius: 2px;
        }

        /* 列表样式 */
        ul {
            list-style-type: none;
            padding: 0;
        }

        ul li {
            background-color: #f4f4f4;
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        ul li:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #2575fc;
            color: #fff;
            font-weight: 600;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        /* 表单样式 */
        form {
            display: flex;
            flex-direction: column;
        }

        form label {
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        form input, form textarea {
            margin-bottom: 15px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        form input:focus, form textarea:focus {
            border-color: #2575fc;
            box-shadow: 0 0 8px rgba(37, 117, 252, 0.3);
            outline: none;
        }

        form button {
            padding: 12px;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        form button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(37, 117, 252, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2rem;
            }

            .container {
                padding: 20px;
            }

            h2 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>

    <header>
        <h1>欢迎来到我的博客</h1>
    </header>

    <div class="container">
        <!-- 关于我模块 -->
        <section id="about-me">
            <h2>关于我</h2>
            <p>你好！我是一名热爱编程和学习的开发者。我喜欢探索新技术，并且热衷于分享我的知识和经验。</p>
        </section>

        <!-- 我的技能模块 -->
        <section id="my-skills">
            <h2>我的技能</h2>
            <ul>
                <li>HTML/CSS</li>
                <li>JavaScript</li>
                <li>Python</li>
                <li>Java</li>
                <li>数据库管理</li>
            </ul>
        </section>

        <!-- 我的时间表模块 -->
        <section id="my-schedule">
            <h2>我的学习时间表</h2>
            <table>
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>活动</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>09:00 - 10:00</td>
                        <td>阅读技术文章</td>
                    </tr>
                    <tr>
                        <td>10:00 - 12:00</td>
                        <td>编程练习</td>
                    </tr>
                    <tr>
                        <td>12:00 - 13:00</td>
                        <td>午餐</td>
                    </tr>
                    <tr>
                        <td>13:00 - 15:00</td>
                        <td>项目开发</td>
                    </tr>
                    <tr>
                        <td>15:00 - 16:00</td>
                        <td>休息</td>
                    </tr>
                    <tr>
                        <td>16:00 - 18:00</td>
                        <td>学习新技能</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <!-- 联系我模块 -->
        <section id="contact-me">
            <h2>联系我</h2>
            <form action="#" method="post">
                <label for="name">名称:</label>
                <input type="text" id="name" name="name" required>

                <label for="email">电子邮件:</label>
                <input type="email" id="email" name="email" required>

                <label for="message">消息:</label>
                <textarea id="message" name="message" rows="5" required></textarea>

                <button type="submit">提交</button>
            </form>
        </section>
    </div>

</body>
</html>

新增的美化技术和设计元素：

动态背景 (header::before 和 @keyframes)：
- 使用 radial-gradient 创建了一个动态背景，通过 @keyframes 实现背景的移动效果，增加了页面的活力。
标题下划线渐变 (h2::after)：
- 使用伪元素 ::after 为标题添加了一个渐变下划线，提升了标题的视觉效果。
卡片悬停效果 (ul li:hover)：
- 列表项在悬停时会向上移动并增加阴影，增强了交互感。
按钮渐变背景和悬停效果 (form button)：
- 按钮使用了渐变背景，并在悬停时增加了微小的位移和阴影，使其更具吸引力。
输入框聚焦效果 (form input:focus, form textarea:focus)：
- 输入框在聚焦时会显示渐变阴影，提升了用户体验。
响应式设计优化 (@media)：
- 在小屏幕设备上调整了字体大小和容器内边距，确保页面在不同设备上都能良好显示。
字体和排版优化：
- 使用了 Poppins 字体，使页面更具现代感。

美化后的效果：

页面整体更加动态和现代。
动态背景和渐变效果增加了视觉吸引力。
交互效果（如悬停和聚焦）更加丰富和细腻。
响应式设计确保页面在不同设备上都能良好显示。

posted @ 2025-03-05 21:07 花朝—— 阅读(72) 评论(0) 收藏举报

刷新页面返回顶部

zhaoyaxuan2024

学习HTML+css

进一步美化后的代码：

新增的美化技术和设计元素：

美化后的效果：

公告