HTML实战课堂之简单的拜年程序

duluo码农部

于 2025-01-10 20:39:29 发布

阅读量1.6k

点赞数 35

分类专栏： HTML实战演练文章标签： html

本文链接：https://blog.youkuaiyun.com/2301_79368222/article/details/145064862

版权

HTML实战演练专栏收录该内容

5 篇文章

订阅专栏

一、目录：

一、目录：

二、祝福

三：代码讲解

（1）详细解释：

1.HTML部分

2. CSS部分

三、运行效果（随机截图）：

四、完整代码：

二、祝福

小杜在这里㊗️大家新年快乐

在此送大家一副对联：

上联：春风送暖千家乐

下联：瑞雪迎春万象新

横批：辞旧迎新

祝福语

亲爱的朋友：

随着新春的钟声渐渐敲响，我作为一名程序员，用代码编织了一段特别的拜年祝福。愿你的生活像优雅的算法一样高效，每一天都充满逻辑与和谐。愿你的事业如同不断迭代的软件，日益完善，功能越来越强大。在这个新年里，愿你的bug少之又少，幸福和成功不断升级，生活界面永远用户友好，心情指数天天向上！

祝春节快乐，万事如意，阖家欢乐，身体健康！

三：代码讲解

让我们逐步讲解这个HTML页面的结构和功能。

（1）详细解释：

1.HTML部分

- `<!DOCTYPE html>`：声明文档类型为HTML5。

- `<html lang="zh-CN">`：定义文档的语言为中文（简体）。

- `<head>`：包含元数据和链接到外部资源的部分。

- `<meta charset="UTF-8">`：设置字符编码为UTF-8。

- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：确保页面在移动设备上正确显示。

- `<title>新年快乐</title>`：设置网页标题。

- `<style>`：内嵌CSS样式，用于美化页面。

- `<body>`：包含页面的主要内容。

- `<div class="container">`：一个容器，用于包裹内容并应用样式。

- `<h1>新年快乐！</h1>`：标题，使用大号字体和红色。

- `<p>愿您在新的一年里万事如意，身体健康，阖家欢乐！</p>`：一段祝福文字。

- `<button οnclick="sendGreeting()">点我拜年</button>`：一个按钮，点击时会调用JavaScript函数`sendGreeting()`。

2. CSS部分

- `body`：设置全局样式，包括字体、背景颜色、布局方式等。

- `.container`：设置容器的样式，包括背景色、内边距、边框圆角、阴影和文本对齐方式。还添加了一个淡入动画效果。

- `h1`：设置标题的样式，包括颜色和字体大小。

- `p`：设置段落的样式，包括颜色和字体大小。

- `button`：设置按钮的样式，包括背景色、文字颜色、边框、内边距、圆角、鼠标指针样式和字体大小。

- `button:hover`：设置按钮的悬停效果，改变背景色。

- `@keyframes fadeIn`：定义一个淡入动画，从透明到不透明。

#### JavaScript部分

- `function sendGreeting()`：定义一个名为`sendGreeting`的函数，当按钮被点击时执行。

- `alert("感谢您的祝福！祝您新年快乐，万事如意！")`：弹出一个提示框，显示感谢信息。

讲解总结：

通过这些代码，你可以创建一个简单而美观的HTML页面，用于在快过年时向用户拜年。你可以根据需要进一步扩展和美化这个页面。

三、运行效果（随机截图）：

四、完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年快乐</title>
    <!-- CSS样式 -->
    <style>
        /* 页面主体样式 */
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        /* 容器样式 */
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            animation: fadeIn 2s ease-in-out;
        }
        /* 标题样式 */
        h1 {
            color: #ff6347;
            font-size: 3em;
            margin-bottom: 20px;
        }
        /* 段落样式 */
        p {
            color: #333;
            font-size: 1.5em;
        }
        /* 按钮样式 */
        button {
            background-color: #ff6347;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            margin-top: 20px;
        }
        /* 按钮悬停效果 */
        button:hover {
            background-color: #e64a2b;
        }
        /* 淡入动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <!-- 主要内容区域 -->
    <div class="container">
        <h1>新年快乐！</h1>
        <p>愿您在新的一年里万事如意，身体健康，阖家欢乐！</p>
        <button onclick="sendGreeting()">点我拜年</button>
    </div>

    <!-- JavaScript脚本 -->
    <script>
        function sendGreeting() {
            alert("感谢您的祝福！祝您新年快乐，万事如意！");
        }
    </script>
</body>
</html>