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.rhkb.cn/news/505817.html

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

相关文章

【数据库系统概论】数据库恢复技术

目录 11.1 事务的基本概念 事务的定义 事务的开始与结束 事务的ACID特性 破坏ACID特性的因素 11.2 数据库恢复概述 11.3 故障的种类 1. 事务内部的故障 2. 系统故障 3. 介质故障 4. 计算机病毒 11.4 恢复的实现技术 如何建立冗余数据 数据转储 登记日志文件 11…

Ubuntu问题 -- 硬盘存储不够了, 如何挂载一个新的硬盘上去, 图文简单明了, 已操作成功

需求 我现在有一个ubuntu22.04操作系统的服务器, 但是当前硬盘不够用了, 我买了一个1T的SSD固态硬盘, 且已经安装在服务器上了, 我需要将这个硬盘挂载到当前ubuntu的某个目录上 开始 1. 确认新硬盘是否被系统识别 打开终端&#xff0c;输入以下命令查看系统识别到的硬盘&…

Linux第一个系统程序---进度条

进度条---命令行版本 回车换行 其实本质上回车和换行是不同概念&#xff0c;我们用一张图来简单的理解一下&#xff1a; 在计算机语言当中&#xff1a; 换行符&#xff1a;\n 回车符&#xff1a;\r \r\n&#xff1a;回车换行 这时候有人可能会有疑问&#xff1a;我在学习C…

JavaSE——网络编程

一、InetAddress类 InetAddress是Java中用于封装IP地址的类。 获取本机的InetAddress对象&#xff1a; InetAddress localHost InetAddress.getLocalHost();根据指定的主机名获取InetAddress对象&#xff08;比如说域名&#xff09; InetAddress host InetAddress.getByNa…

CompletableFuture // todo

相比较所有代码都在主线程执行&#xff0c;使用Future的好处&#xff1a;利用服务器多核、并发的优势。 不足&#xff1a; 开启没有返回值的异步线程&#xff1a; 1、runAsync 使用lambda表达式&#xff1a; 开启有返回值的异步线程&#xff1a; 1、supplyAsync 异步任务中的…

RabbitMQ基本介绍及简单上手

&#xff08;一&#xff09;什么是MQ MQ&#xff08;message queue&#xff09;本质上是队列&#xff0c;满足先入先出&#xff0c;只不过队列中存放的内容是消息而已&#xff0c;那什么是消息呢&#xff1f; 消息可以是字符串&#xff0c;json也可以是一些复杂对象 我们应用场…

跟着逻辑先生学习FPGA-第六课 无源蜂鸣器发声实验

硬件平台&#xff1a;征战Pro开发板 软件平台&#xff1a;Vivado2018.3 仿真软件&#xff1a;Modelsim10.6d 文本编译器&#xff1a;Notepad 征战Pro开发板资料 链接:https://pan.baidu.com/s/1AIcnaGBpNLgFT8GG1yC-cA?pwdx3u8 提取码:x3u8 1 知识背景 1.1 蜂鸣器简介 蜂鸣…

TensorFlow Quantum快速编程(高级篇)

五、实战:量子分类器应用 5.1 数据准备 在实战构建量子分类器时,数据准备是基石环节。选用鸢尾花数据集,这一经典数据集在机器学习领域应用广泛,其涵盖了三种鸢尾花品种的样本,每个样本包含花萼长度、花萼宽度、花瓣长度、花瓣宽度四个特征。鉴于本次构建二分类量子分类…

Mysql进阶篇

一&#xff1a;存储引擎 二&#xff1a;索引 2.1 索引概述 索引&#xff08;index&#xff09;帮助mysql高效获取数据的数据结构&#xff08;有序&#xff09;。在数据之外&#xff0c;数据库系统还维护着满足特定查找算法的数据结构&#xff0c;这些数据结构以某种方式引用&…

通过gradle发布aar或jar携带sources-jar到maven nexus

找了很久&#xff0c;没有找到满意的。终于找到一个好的办法。 gradle7.x适用。比以前的写法简洁。 发布传统的jar工程 比如okhttp&#xff0c;fastjson等项目&#xff0c;纯java工程。 直接创建新文件publish.gradle: apply plugin: maven-publishProperties properties …

ELK日志分析实战宝典之ElasticSearch从入门到服务器部署与应用

目录 ELK工作原理展示图 一、ElasticSearch介绍&#xff08;数据搜索和分析&#xff09; 1.1、特点 1.2、数据组织方式 1.3、特点和优势 1.3.1、分布式架构 1.3.2、强大的搜索功能 1.3.3、数据处理与分析 1.3.4、多数据类型支持 1.3.5、易用性与生态系统 1.3.6、高性…

2025年VGC大众汽车科技社招入职测评综合能力英语口语SHL历年真题汇总、考情分析

早在1978年&#xff0c;大众汽车集团就开始了与中国的联系。1984年&#xff0c;集团在华的第一家合资企业—上汽大众汽车有限公司奠基成立&#xff1b;1991年&#xff0c;一汽-大众汽车有限公司成立&#xff1b;2017年&#xff0c;大众汽车&#xff08;安徽&#xff09;有限公司…

嵌入式C语言:二维数组

目录 一、二维数组的定义 二、内存布局 2.1. 内存布局特点 2.2. 内存布局示例 2.2.1. 数组元素地址 2.2.2. 内存布局图&#xff08;简化表示&#xff09; 2.3. 初始化对内存布局的影响 三、访问二维数组元素 3.1. 常规下标访问方式 3.2. 通过指针访问 3.2.1. 指向数…

H2数据库在单元测试中的应用

H2数据库特征 用比较简洁的话来介绍h2数据库&#xff0c;就是一款轻量级的内存数据库&#xff0c;支持标准的SQL语法和JDBC API&#xff0c;工业领域中&#xff0c;一般会使用h2来进行单元测试。 这里贴一下h2数据库的主要特征 Very fast database engineOpen sourceWritten…

R语言在森林生态研究中的魔法:结构、功能与稳定性分析——发现数据背后的生态故事!

森林生态系统结构、功能与稳定性分析与可视化研究具有多方面的重要意义&#xff0c;具体如下&#xff1a; 一、理论意义 ●深化生态学理论 通过研究森林生态系统的结构、功能与稳定性&#xff0c;可以深化对生态系统基本理论的理解。例如&#xff0c;生物多样性与生态系统稳定性…

【C++经典例题】求1+2+3+...+n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a; 期待您的关注 题目描述&#xff1a; 原题链接&#xff1a; 求123...n_牛客题霸_牛客网 (nowcoder.com) 解题思路&#xff1a; …

day01-HTML-CSS——基础标签样式表格标签表单标签

目录 此篇为简写笔记下端1-3为之前笔记&#xff08;强迫症、保证文章连续性&#xff09;完整版笔记代码模仿新浪新闻首页完成审核不通过发不出去HTMLCSS1 HTML1.1 介绍1.1.1 WebStrom中基本配置 1.2 快速入门1.3 基础标签1.3.1 标题标签1.3.2 hr标签1.3.3 字体标签1.3.4 换行标…

基于Springboot+Vue的仓库管理系统

开发一个基于Spring Boot和Vue的仓库管理系统涉及到前端和后端的开发。本文呢&#xff0c;给出一个简单的开发步骤指南&#xff0c;用于指导初入的新手小白如何开始构建这样一个系统&#xff0c;如果**你想直接学习全部内容&#xff0c;可以直接拉到文末哦。** 开始之前呢给小…

快速导入请求到postman

1.确定请求&#xff0c;右键复制为cURL(bash) 2.postman菜单栏Import-Raw text&#xff0c;粘贴复制的内容保存&#xff0c;请求添加成功

预训练语言模型——BERT

1.预训练思想 有了预训练就相当于模型在培养大学生做任务&#xff0c;不然模型初始化再做任务就像培养小学生 当前数据层面的瓶颈是能用于预训练的语料快被用完了 现在有一个重要方向是让机器自己来生成数据并做微调 1.1 预训练&#xff08;Pre - training&#xff09;vs. 传…