html5+css3

作者：绝朢╭ァ发布日期:2025-09-04 浏览:88

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 + CSS3 示例</title>
    <style>
        /* 使用CSS3的新特性 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            padding: 1em;
            text-align: center;
        }

        section {
            padding: 2em;
            background-color: white;
            margin: 1em;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        /* 使用CSS3的动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        section {
            animation: fadeIn 2s;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5 + CSS3 示例页面</h1>
    </header>

    <section>
        <h2>欢迎来到HTML5和CSS3的世界</h2>
        <p>这里展示了一些HTML5和CSS3的新特性。</p>
    </section>

    <footer>
        <p>&copy; 2023 HTML5 + CSS3 示例</p>
    </footer>
</body>
</html>

解释说明：

HTML5:
- 使用了<header>、<section>和<footer>等语义化标签，使页面结构更加清晰。
- <meta name="viewport">确保页面在移动设备上能够正确缩放。
CSS3:
- 使用了border-radius和box-shadow来美化元素的外观。
- 使用了@keyframes定义了一个淡入动画，并通过animation属性应用到section元素上。
- 使用了rgba()颜色值来设置半透明阴影效果。

上一篇：html table 合并单元格

下一篇：html video标签属性