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

一、目录:



一、目录:

二、祝福

三:代码讲解

(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

 四、完整代码:

<!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.mzph.cn/diannao/66993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 与 vue-json-viewer 实现 JSON 数据可视化

前言 接口的调试和测试是确保系统稳定性的重要步骤。为了让开发人员和测试人员能够直观地查看接口返回的 JSON 数据&#xff0c;使用合适的工具至关重要。vue-json-viewer 插件为 vue 开发者提供了一个简单而强大的解决方案。本文将详细介绍如何在 vue 项目中使用该插件&#x…

用Pygame Zero 画矩形(空心、实心、多个矩形、多层同心矩形、彩虹条矩形、条纹相间、随机颜色矩形、特殊效果、渐变效果)

用Pygame Zero 画矩形 &#xff08;空心、实心、多个矩形、多层同心矩形、彩虹条矩形、条纹相间、随机颜色矩形、特殊效果、渐变效果&#xff09; 本文目录&#xff1a; 零、时光宝盒 一、绘制空心矩形 二、绘制实心矩形 三、画多个静止矩形 四、绘制多层同心矩形 4.1、…

【Rust自学】11.9. 单元测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.9.1. 测试的分类 Rust把测试分为两类&#xff0c;一个是单元测试&#xff0c;一个是集成测试。 单元测试比较小也比较专注&#xff…

[java基础-集合篇]优先队列PriorityQueue结构与源码解析

优先队列PriorityQueue 优先级队列表示为平衡二进制堆&#xff1a; queue[n] 的两个子级是 queue[2*n1] 和 queue[2*&#xff08;n1&#xff09;]。 注&#xff1a;左子节点index2*parentIndex1,右子节点index2*parentIndex2,源码中计算parent位置时就是这样反过来计算的 优…

(经过验证)在 Ubuntu 系统中为 VSCode、PyCharm 终端及 Jupyter Notebook 配置代理的完整方案

文章目录 1. 通过系统环境变量配置代理步骤一&#xff1a;打开终端步骤二&#xff1a;编辑 ~/.bashrc 文件步骤三&#xff1a;添加代理环境变量步骤四&#xff1a;保存并关闭文件步骤五&#xff1a;使配置生效步骤六&#xff1a;重启相关应用步骤七&#xff1a;使用代理函数 2.…

深入探讨 Vue.js 的动态组件渲染与性能优化

Vue.js 作为一款前端领域中备受欢迎的渐进式框架&#xff0c;以其简单优雅的 API 和灵活性受到开发者的喜爱。在开发复杂应用时&#xff0c;动态组件渲染是一项极其重要的技术&#xff0c;它能够在页面中动态地加载或切换组件&#xff0c;从而显著提升应用的灵活性与用户体验。…

回归预测 | MATLAB实RVM-Adaboost相关向量机集成学习多输入单输出回归预测

回归预测 | MATLAB实RVM-Adaboost相关向量机集成学习多输入单输出回归预测 目录 回归预测 | MATLAB实RVM-Adaboost相关向量机集成学习多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 RVM-Adaboost相关向量机集成学习多输入单输出回归预测是一种先进…

Linux(Centos7)安装Mysql/Redis/MinIO

安装Mysql 安装Redis 搜索Redis最先版本所在的在线安装yum库 查看以上两个组件是否是开机自启 安装MinIO 开源的对象存储服务&#xff0c;存储非结构化数据&#xff0c;兼容亚马逊S3协议。 minio --help #查询命令帮助minio --server --help #查询--server帮助minio serve…

MySQL批量修改数据表编码及字符集为utf8mb4

​​​​​​MySQL批量修改数据表编码及字符集为utf8mb4 utf8mb4编码是utf8编码的超集&#xff0c;兼容utf8&#xff0c;并且能存储4字节的表情字符。 采用utf8mb4编码的好处是&#xff1a;存储与获取数据的时候&#xff0c;不用再考虑表情字符的编码与解码问题。 更改数据库…

【leetcode 13】哈希表 242.有效的字母异位词

原题链接 题解链接 一般哈希表都是用来快速判断一个元素是否出现集合里。 当我们想使用哈希法来解决问题的时候&#xff0c;我们一般会选择如下三种数据结构。 数组 set &#xff08;集合&#xff09; map(映射) 如果在做面试题目的时候遇到需要判断一个元素是否出现过的场景…

Edge浏览器网页设置深色模式/暗模式

文章目录 需求分析1. 浏览器中的设置——外观——深色。2. 在Edge浏览器的地址栏如下网址&#xff1a;edge://flags/&#xff0c;直接搜索Dark则有内容弹出&#xff0c;将Default更改为Enable即可设置成功。3. 成果 需求 长期对着电脑屏幕&#xff0c;白色实在太刺眼&#xff…

【无标题】四类sql语句通用

select select a from tableA where aa1&#xff1a; 总是丢掉from。。 运算&#xff1a; select a*3 b from tableA&#xff1b; 使用()来定义运算优先级。 别名 select a as xx from tableA&#xff1b;可以不加as&#xff0c;仅为增加可读性。 别名不可以中间有空格&…

TypeScript Jest 单元测试 搭建

NPM TypeScript 项目搭建 创建目录 mkdir mockprojectcd mockproject初始化NPM项目 npm init -y安装TypeScript npm i -D typescript使用VSCode 打开项目 创建TS配置文件tsconfig.json {"compilerOptions": {"target": "es5","module&…

基于nginx实现正向代理(linux版本)

介绍 在企业开发环境中&#xff0c;局域网内的设备通常需要通过正向代理服务器访问互联网。正向代理服务器充当中介&#xff0c;帮助客户端请求外部资源并返回结果。局域网内也就是俗称的内网&#xff0c;局域网外的互联网就是外网&#xff0c;在一些特殊场景内&#xff0c;例…

基于FPGA的多功能数字钟设计

基于FPGA的多功能数字钟设计 前言基础知识按键数码管 系统概述按键使用说明模块描述模块设计button_debouncebutton_controllerclock_controllerdigital_tube 整体资源用量测试视频 前言 本工程主要是数码管、按键、LED的应用开发。 注&#xff1a;本工程所有IP均使用源码开发…

利用开源AI智能名片2+1链动模式S2B2C商城小程序拓展社交电商的深度实践探索

摘要&#xff1a;在数字化浪潮席卷全球的今天&#xff0c;社交电商作为一种新兴的商业模式&#xff0c;正以前所未有的速度改变着消费者的购物习惯与商家的营销策略。本文深入探讨了开源AI智能名片21链动模式S2B2C商城小程序在社交电商领域的应用&#xff0c;通过分析其核心机制…

Python 扫描枪读取发票数据导入Excel

财务需要一个扫描枪扫描发票文件&#xff0c;并将主要信息录入Excel 的功能。 文件中sheet表的列名称&#xff0c;依次为&#xff1a;发票编号、发票编码、日期、金额、工号、扫描日期。 扫描的时候&#xff0c;Excel 文件需要关闭&#xff0c;否则会报错。 import openpyxl …

【优选算法篇】:模拟算法的力量--解决复杂问题的新视角

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;优选算法篇–CSDN博客 文章目录 一.模拟算法二.例题1.替换所有的问号2.提莫攻击3.外观数列4…

2_CSS3 背景 --[CSS3 进阶之路]

CSS3 中的背景属性提供了许多强大的功能来增强网页设计&#xff0c;包括但不限于多背景图像、渐变、背景大小控制等。以下是一些关键的 CSS3 背景属性及其用法示例。 1. 多重背景图像 CSS3 允许你为一个元素设置多个背景图像。这些图像按照它们在 background-image 属性中定义…

数据处理之计算文本相似度|余弦相似度|欧氏距离

计算文本相似度是自然语言处理中的一个重要任务&#xff0c;用于评估两个或多个文本之间的相似程度。以下是几种常用的方法及其背后的实现机制&#xff1a; 基于词频的方法(重点) 余弦相似度 (Cosine Similarity)&#xff1a;将文档表示为词频向量&#xff08;如使用词袋模型…