当前位置： 首页 > news >正文

用html和css实现一个加载页面【究极简单】

news 2026/4/1 0:30:25

在这里插入图片描述

要创建一个简单的加载页面，你可以使用 HTML 和 CSS 来设计。以下是一个基本的加载页面示例：

  1. HTML 文件 (index.html):
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Loading Page</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="loader-container"><div class="loader"></div><p>Loading...</p></div></body>
</html>
  1. CSS 文件 (styles.css):
/* styles.css */body {margin: 0;display: flex;align-items: center;justify-content: center;height: 100vh;background-color: #f0f0f0;
}.loader-container {text-align: center;
}.loader {border: 8px solid #f3f3f3;border-top: 8px solid #3498db;border-radius: 50%;width: 50px;height: 50px;animation: spin 1s linear infinite;margin: 20px auto;
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}p {font-family: Arial, sans-serif;color: #333;font-size: 16px;margin-top: 10px;
}

这个例子中，使用了一个简单的旋转的加载动画（CSS 中的 @keyframes），并且有一个显示 “Loading…” 文字的段落。整个页面被居中显示。

你可以将上述代码保存到两个文件中，一个是 index.html，另一个是 styles.css，然后在浏览器中打开 index.html 文件，就可以看到加载页面效果。根据实际需求，你可以对样式进行自定义修改。

相关文章：

用html和css实现一个加载页面【究极简单】

要创建一个简单的加载页面&#xff0c;你可以使用 HTML 和 CSS 来设计。以下是一个基本的加载页面示例&#xff1a; HTML 文件 (index.html): <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"…...

编程日记 2024/1/13 15:33:55

Android-消息机制Handler

Handler的机制:Android 消息传递机制就是handler。在多线程的应用场景中&#xff0c;将工作线程中需更新UI的操作信息 传递到 UI主线程&#xff0c;从而实现对UI的更新处理&#xff0c;最终实现异步消息的处理。多个线程并发更新UI的同时 保证线程安全。Handler只是一个入口&am…...

编程日记 2024/1/13 15:32:54

MySQL夯实之路-事务详解

事务四大特性 事务需要通过严格的acid测试。Acid表示原子性&#xff0c;一致性&#xff0c;隔离性&#xff0c;持久性。 原子性&#xff08;atomicity&#xff09; 事务是不可分割的最小单元&#xff0c;对于整个事务的操作&#xff0c;要么全部提交成功&#xff0c;要么全部…...

编程日记 2024/1/13 15:30:52

安泰电子前置微小信号放大器怎么用的

前置微小信号放大器是一种重要的电子设备&#xff0c;用于放大微弱的输入信号&#xff0c;提高系统的灵敏度。它在各种领域中都有广泛的应用&#xff0c;包括音频、通信、测量等。在这篇文章中&#xff0c;我们将详细介绍前置微小信号放大器的使用方法&#xff0c;以便更好地理…...

编程日记 2024/1/13 15:29:51

【深度学习每日小知识】Overfitting 过拟合

过拟合是机器学习&#xff08;ML&#xff09;中的常见问题&#xff0c;是指模型过于复杂&#xff0c;泛化能力较差的场景。当模型在有限数量的数据上进行训练&#xff0c;并且学习了特定于该特定数据集的模式&#xff0c;而不是适用于新的、看不见的数据的一般模式时&#xff0…...

编程日记 2024/1/13 15:28:50

嵌入式必备的WEB知识

写在前面 嵌入式要学习Wed前端吗&#xff1f;答案是要的&#xff0c;不需要深入学习&#xff0c;只需要简单了解即可。为什么要学习&#xff1f; 原因如下&#xff1a; 可以远程控制和管理设备&#xff1a;通过简单的Web知识&#xff0c;嵌入式系统可以建立Web界面&#xff0c…...

编程日记 2024/1/13 15:24:47

Scipy 中级教程——信号处理

Python Scipy 中级教程&#xff1a;信号处理 Scipy 的信号处理模块提供了丰富的工具&#xff0c;用于处理和分析信号数据。在本篇博客中&#xff0c;我们将深入介绍 Scipy 中的信号处理功能&#xff0c;并通过实例演示如何应用这些工具。 1. 信号生成与可视化 首先&#xff…...

编程日记 2024/1/13 15:23:46

【排序篇2】选择排序、计数排序

目录 一、选择排序二、计数排序 一、选择排序 整体思想&#xff1a; 从数组中选出最小值和最大值放在起始位置&#xff0c;直到排序完成 具体步骤&#xff1a; 定义两个变量begin和end为下标&#xff0c;指向数组始末定义要找的最大值的下标为maxi&#xff0c;最小值的下标为…...

编程日记 2024/1/13 15:22:45

重生奇迹mu敏弓加点攻略

1. 选择正确的属性点分配 在重生奇迹mu游戏中敏弓的属性点分配非常重要。建议将主要属性点分配在敏捷和力量上这样可以提高敏弓的攻击力和闪避能力。适当加点在体力和魔力上可以提高敏弓的生存能力和技能释放次数。不要忘记适当加点在智力上可以提高敏弓的技能威力和命中率。 …...

编程日记 2024/1/13 15:21:44

用通俗易懂的方式讲解：一文讲透主流大语言模型的技术原理细节

大家好&#xff0c;今天的文章分享三个方面的内容&#xff1a; 1、比较 LLaMA、ChatGLM、Falcon 等大语言模型的细节&#xff1a;tokenizer、位置编码、Layer Normalization、激活函数等。 2、大语言模型的分布式训练技术&#xff1a;数据并行、张量模型并行、流水线并行、3D …...

编程日记 2024/1/13 15:15:38

通过IP地址识别风险用户

随着互联网的迅猛发展&#xff0c;网络安全成为企业和个人关注的焦点之一。识别和防范潜在的风险用户是维护网络安全的关键环节之一。IP数据云将探讨通过IP地址识别风险用户的方法和意义。 IP地址的基本概念&#xff1a;IP地址是互联网上设备的独特标识符&#xff0c;它分为IP…...

编程日记 2024/1/13 15:13:36

汇编和C语言转换

C语言和汇编语言之间有什么区别 C语言和汇编语言之间存在显著的区别，主要体现在以下几个方面： 抽象层次： 汇编语言：更接近硬件的低级语言，通常与特定的处理器或指令集紧密相关。它提供了对处理器指令的直接控制，允许程序员直接操作硬件资源，如寄存器、内存等。 C语言：…...

编程日记 2024/1/13 15:10:34

【IOS】惯性导航详解（包含角度、加速度、修正方式的api分析）

参考文献 iPhone的惯性导航&#xff0c;基于步态。https://www.docin.com/p-811792664.html Inertial Odometry on Handheld Smartphones: https://arxiv.org/pdf/1703.00154.pdf 惯性导航项目相关代码&#xff1a;https://github.com/topics/inertial-navigation-systems use…...

编程日记 2024/1/13 15:06:31

Self-Attention

前置知识&#xff1a;RNN&#xff0c;Attention机制 在一般任务的Encoder-Decoder框架中&#xff0c;输入Source和输出Target内容是不一样的&#xff0c;比如对于英-中机器翻译来说&#xff0c;Source是英文句子&#xff0c;Target是对应的翻译出的中文句子&#xff0c;Attent…...

编程日记 2024/1/13 15:05:30

网络协议与攻击模拟_04ICMP协议与ICMP重定向

ICMP协议是网络层协议&#xff0c; 利用ICMP协议可以实现网络中监听服务和拒绝服务&#xff0c;如 ICMP重定向的攻击。 一、ICMP基本概念 1、ICMP协议 ICMP是Internet控制报文协议&#xff0c;用于在IP主机、路由器之间传递控制消息&#xff0c;控制消息指网络通不通、主机是…...

编程日记 2024/1/13 15:04:29

pytest-mock 数据模拟

文章目录 mock 测试unittest.mockMock类MagicMock类patch装饰器create_autospec函数断言的方法 pytest-mock 使用 mock 测试 在单元测试时&#xff0c;有些数据需要依赖其他服务或者不好获取到&#xff0c;此时需要使用mock来模拟对应的函数、对象等。 mock模拟数据的python…...

编程日记 2024/1/13 15:03:28

单片机原理及应用：定时器/计数器综合应用

本文是《单片机原理及应用》专栏中的最后一篇文章&#xff0c;笔者以编译器的安装配置——51单片机简介——LED和数码管外设——开关和按键控制功能切换——外部中断系统——定时器与计数器为知识大纲&#xff0c;介绍了C语言编程控制51单片机的入门教程。作为收尾&#xff0c;…...

编程日记 2024/1/13 15:01:26

R语言【paleobioDB】——pbdb_intervals()：通过参数选择，返回多个地层年代段的基本信息

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_interval (id, ...) Arguments 参数【..…...

编程日记 2024/1/13 15:00:26

阅读笔记lv.1

阅读笔记 sql中各种 count结论不同存储引擎计算方式区别count() 类型 责任链模式常见场景例子&#xff08;闯关游戏&#xff09; sql中各种 count 结论 innodb count(*) ≈ count(1) > count(主键id) > count(普通索引列) > count(未加索引列)myisam 有专门字段记录…...

编程日记 2024/1/13 14:56:22

小鼠的滚动疲劳仪-转棒实验|ZL-200C小鼠转棒疲劳仪

转棒实验|ZL-200C小鼠转棒疲劳仪用于检测啮齿类动物的运动功能。通过测量动物在滚筒上行走的持续时间&#xff0c;来评定**神经系统*病或损坏以及药物对运动协调功能和疲劳的影响。 疲劳实验中&#xff0c;让小鼠在不停转动的棒上运动&#xff0c;肌肉会很快进入疲劳状态&#…...

编程日记 2024/1/13 14:55:21

从混乱到清晰：用QJsonObject重构你的Qt网络API数据解析层（避坑指南）

从混乱到清晰&#xff1a;用QJsonObject重构你的Qt网络API数据解析层&#xff08;避坑指南&#xff09; 在Qt开发中&#xff0c;与后端RESTful API交互是常见需求&#xff0c;但面对复杂、嵌套的JSON响应数据时&#xff0c;很多开发者容易陷入"面条代码"的泥潭。本文…...

编程新知 2026/4/1 0:30:04

如何快速解锁AMD 780M APU的完整AI性能？终极优化指南

如何快速解锁AMD 780M APU的完整AI性能&#xff1f;终极优化指南 【免费下载链接】ROCmLibs-for-gfx1103-AMD780M-APU ROCm Library Files for gfx1103 and update with others arches based on AMD GPUs for use in Windows. 项目地址: https://gitcode.com/gh_mirrors/ro/…...

编程新知 2026/4/1 0:05:33

商业应用(12)电影院零售票务系统开发—东方仙盟练气期

未来之窗开源收银台生态未来之窗开源收银台生态&#xff1a;让中小微企业告别重复开发&#xff0c;普惠式接入多场景收银能力 在数字化转型的浪潮中&#xff0c;中小微企业的痛点往往藏在 “重复造轮子” 里 —— 便利店需要收银台、餐饮店需要收银台、游乐场需要带押金管理的收…...

编程新知 2026/3/31 23:39:07

超越节点分类：Graph Transformer在脑网络分析中还能做什么？从疾病识别到生物标记发现

超越节点分类&#xff1a;Graph Transformer如何解锁脑网络分析的临床价值 当大多数关于图神经网络&#xff08;GNN&#xff09;在医疗领域应用的讨论还停留在疾病分类准确率时&#xff0c;前沿研究已经开始探索更深层次的问题&#xff1a;这些模型能否帮助我们理解疾病背后的生…...

编程新知 2026/3/31 23:28:59

Ostrakon-VL像素UI设计细节：16色限定调色板与可访问性对比度达标

Ostrakon-VL像素UI设计细节&#xff1a;16色限定调色板与可访问性对比度达标 1. 项目背景与设计理念 1.1 从工业UI到像素艺术的转变 在零售与餐饮行业的AI应用场景中&#xff0c;传统工业级UI往往给人冰冷、复杂的印象。Ostrakon-VL扫描终端大胆采用8-bit复古像素风格&#…...

编程新知 2026/3/31 23:18:52

[高级配置]：解决Insyde BIOS隐藏选项访问难题的开源工具技术指南

[高级配置]&#xff1a;解决Insyde BIOS隐藏选项访问难题的开源工具技术指南 【免费下载链接】LEGION_Y7000Series_Insyde_Advanced_Settings_Tools 支持一键修改 Insyde BIOS 隐藏选项的小工具&#xff0c;例如关闭CFG LOCK、修改DVMT等等 项目地址: https://gitcode.com/gh…...

编程新知 2026/3/31 22:09:58

从“认怂”到“被看见”：flomo的产品设计哲学

当大多数笔记软件都在追求“大而全”时&#xff0c;有一款产品选择了一条完全不同的路。它不让你写标题&#xff0c;不支持复杂排版&#xff0c;甚至在官网上大大方方地列出“自己不擅长什么”。它的创始人说&#xff1a;“35岁再创业&#xff0c;我学会了认怂。”它就是flomo&…...

编程新知 2026/3/31 21:04:48

Cursor 2.2的Visual Editor实战：如何像改Figma一样，5分钟重构一个Vue/React页面布局

Cursor 2.2的Visual Editor实战&#xff1a;如何像改Figma一样&#xff0c;5分钟重构一个Vue/React页面布局 重构老旧前端页面就像给老房子翻新——既要保留主体结构&#xff0c;又要让外观焕然一新。传统方式下&#xff0c;我们不得不在代码编辑器与浏览器之间反复切换&#x…...

编程新知 2026/3/31 20:34:01

啪」的一声脆响，空气击穿时那道紫色电弧总能让人心头一紧。咱们今天用COMSOL做个好玩的——计算两根针尖电极间的击穿电压，看看电场怎么在金属尖角处「拧麻花

comsol放电电极击穿空气模拟&#xff0c;计算击穿间隙的电压&#xff0c;周围附近的电场老规矩&#xff0c;先画个直径10mm的球头圆柱电极&#xff0c;对面放个尖角曲率半径0.1mm的针电极&#xff0c;间隙留5mm。材料库选「空气」&#xff0c;但要注意击穿模型得用自定义的。物…...

编程新知 2026/3/31 18:56:20

腰椎滑脱和腰间盘突出，日常护理大不同，做错反而加重病情

很多腰椎病患者&#xff0c;在明确诊断后&#xff0c;医生会叮嘱“注意日常护理”&#xff0c;但很多人不知道&#xff0c;腰椎滑脱和腰间盘突出的护理重点完全不同——如果用护理腰间盘突出的方法&#xff0c;去护理腰椎滑脱&#xff0c;不仅没有效果&#xff0c;还可能加重椎…...

编程新知 2026/3/31 18:50:18