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

ops/2025/1/14 18:00:00/
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/ops/150067.html

相关文章

3Hive数据抽样

3Hive数据抽样 1 随机抽样2 块抽样3 桶表抽样 当数据规模不断膨胀时&#xff0c;我们需要找到一个数据的子集来加快数据分析效率。因此我们就需要通过筛选和分析数据集为了进行模式 & 趋势识别。目前来说有三种方式来进行抽样&#xff1a;随机抽样&#xff0c;桶表抽样&…

Node.js——fs(文件系统)模块

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

PySpark用sort-merge join解决数据倾斜的完整案例

假设有两个大表 table1 和 table2 &#xff0c;并通过 sort-merge join 来解决可能的数据倾斜问题。 from pyspark.sql import SparkSession from pyspark.sql.functions import col# 初始化SparkSession spark SparkSession.builder.appName("SortMergeJoinExample&quo…

Blazor开发复杂信息管理系统的优势

随着现代企业信息管理需求的不断提升&#xff0c;开发高效、易维护、可扩展的系统变得尤为重要。在这个过程中&#xff0c;Blazor作为一种新兴的Web开发框架&#xff0c;因其独特的优势&#xff0c;逐渐成为开发复杂信息管理系统的首选技术之一。本文将结合Blazor在开发复杂信息…

IIS安全配置基线

IIS安全配置基线 1. 限制目录的执行权限2. 开启日志记录功能3. 自定义错误页面4. 关闭目录浏览功能5. 停用或删除默认站点6. 删除不必要的脚本映射7. 专职低权限用户运行网站8. 在独立的应用程序池中运行网站 IIS&#xff08;Internet Information Services&#xff09;安全部署…

【C语言】标准IO

目录 1. 什么是标准IO 1.1概念 1.2特点 1.3 操作 2. 缓存区 3. 函数接口 3.1打开文件fopen 3.2关闭文件 3.3读写文件操作 3.3.1每次读写一个字符&#xff1a;fgetc()、fputc() a. 针对文件 b. 针对终端 3.3.2 每次一串字符的读写fgets()和fputs() c. 针对终端 d…

基于微信小程序的书籍销售系统设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

PHP RCE

靶场搭建 生成容器 docker run -p 18022:22 -p 18080:80 -p 18081:81 -p 18082:82 -p 18085:85 -i -t mcc0624/cmd:latest bash -c /etc/rc.local; /bin/bash 管理网站 http://<IP>:18085/CZKJ2022 用户名&#xff1a;admin 密码&#xff1a;Pssw0rd SSH 用户名root 密…