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

server/2025/1/12 3:28:39/
htmledit_views">

一、目录:



一、目录:

二、祝福

三:代码讲解

(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页面,用于在快过年时向用户拜年。你可以根据需要进一步扩展和美化这个页面。

三、运行效果(随机截图):

5fc2bea821424823880fe32a86333ef3.jpg

 四、完整代码:

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>


http://www.ppmy.cn/server/157655.html

相关文章

基于 Boost.Asio 和 Boost.Beast 的异步 HTTP 服务器(学习记录)

已完成功能&#xff1a; 支持 GET 和 POST 请求的路由与回调处理。 解析URL请求。 单例模式 管理核心业务逻辑。 异步 I/O 技术和 定时器 控制超时。 通过回调函数注册机制&#xff0c;可以灵活地为不同的 URL 路由注册处理函数。 1. 项目背景 1.1 项目简介 本项目是一个基于…

2025年第三届“华数杯”国际赛A题解题思路与代码(Matlab版)

游泳竞技策略优化模型代码详解&#xff08;MATLAB版&#xff09; 第一题&#xff1a;速度优化模型 本部分使用MATLAB实现游泳运动员在不同距离比赛中的速度分配策略优化。 1. 模型概述 模型包含三个主要文件&#xff1a; speed_optimization.m: 核心优化类plot_speeds.m: …

apache age:22023,42883,等报错信息

apache age 各种类型不匹配 函数找不到 以下是对Apache AGE、PostgreSQL以及Cypher语法的详细介绍: 一、Apache AGE 定义:Apache AGE(A Graph Extension)是一个基于PostgreSQL的图数据库扩展插件。它结合了PostgreSQL的先进SQL查询功能和事务支持,以及图数据库的灵活性和…

551 灌溉

常规解法&#xff1a; #include<bits/stdc.h> using namespace std; int n,m,k,t; const int N105; bool a[N][N],b[N][N]; int cnt; //设置滚动数组来存贮当前和下一状态的条件 //处理传播扩散问题非常有效int main() {cin>>n>>m>>t;for(int i1;i&l…

SQL Server中可以通过扩展事件来自动抓取阻塞

在SQL Server中可以通过扩展事件来自动抓取阻塞&#xff0c;以下是详细流程&#xff1a; 开启阻塞跟踪配置&#xff1a; • 执行以下SQL语句来启用相关配置&#xff1a; EXEC sp_configureshow advanced options, 1; RECONFIGURE; EXEC sp_configure blocked process thresh…

升级 Spring Boot 3 全项目讲解 — 给项目增加聊天对话功能

学会这款 &#x1f525;全新设计的 Java 脚手架 &#xff0c;从此面试不再怕&#xff01; 1. Spring Boot 3 升级指南 在升级 Spring Boot 3 之前&#xff0c;确保你的项目已经迁移到 Java 17&#xff0c;因为 Spring Boot 3 不再支持 Java 8 和 Java 11。接下来&#xff0c;我…

WebSocket 实现指南

WebSocket 实现指南 目录 1. 依赖安装 1.1 安装必要的包 # 安装 gorilla/websocket go get github.com/gorilla/websocket# 安装 gin 框架 go get github.com/gin-gonic/gin1.2 更新 go.mod require (github.com/gin-gonic/gin v1.9.1github.com/gorilla/websocket v1.5.3…

TP8 前后端分离开发验证码总是验证不正确问题

原因&#xff1a; 单独访问(不是前后端分离)每次前端生成验证码&#xff0c;都会带PHPSESSID值传递给后端&#xff0c;所以正常 前后端分离&#xff1a;前端每次不带PHPSESSID值传递给后端&#xff0c;所以后端每次都给一个新身份PHPSESSID值前端&#xff0c;造成前端每次PHPS…