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

html + css 顶部滚动通知栏示例

news 2025/9/16 18:21:25

前言

在现代网页设计中，一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息，还能提升用户体验。通过使用HTML和CSS，我们可以创建既美观又功能强大的组件，这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。

本示例将展示如何使用div元素和纯CSS来构建一个固定在页面顶部的滚动通知栏，而不依赖于已经废弃的<marquee>标签。我们将介绍必要的HTML结构以及相应的CSS样式，包括一个自定义的动画效果，确保文本可以平滑地从右向左滚动，同时保持良好的浏览器兼容性和可读性。

使用div和纯CSS实现滚动效果

html代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="index.css"><title>滚动通知栏示例</title>
</head><body><!-- 滚动通知栏 --><div class="scrolling-notification-bar"><div class="scrolling-text-wrapper"><div class="scrolling-text">过了腊八就是年。</div></div></div><!-- 页面其他内容 --><div class="content"><h4>腊八粥香，年味渐浓</h4><p>腊八粥的香气飘散在空气中，仿佛在提醒我们，春节的脚步已经近在咫尺。让我们一起期待这个充满欢声笑语的节日吧！</p><h4>腊八过后，年味渐浓</h4><p>腊八粥的温暖，预示着春节的临近。让我们在这个寒冷的冬日里，感受家的温暖和节日的喜悦。</p><h4>腊八粥香，年味渐浓，团圆不远</h4><p>腊八粥的香气，是春节的前奏。让我们在腊八的温暖中，期待与家人团聚的温馨时刻。</p><h4>腊八粥香，年味渐浓，喜气洋洋</h4><p>腊八粥的香甜，是春节的序曲。让我们在这个充满喜气的季节里，迎接新的一年，新的希望。</p><h4>腊八粥香，年味渐浓，欢声笑语</h4><p>腊八粥的香气，是春节的信号。让我们在这个充满欢声笑语的季节里，感受家的温暖和节日的快乐。</p></div>
</body></html>

css (index.css) 代码如下：

/* 确保通知栏始终在页面顶部 */
.scrolling-notification-bar {position: fixed;top: 0;left: 0;width: 100%;background-color: #333;color: #fff;text-align: center;padding: 10px 0;z-index: 1000;
}
.scrolling-text-wrapper {overflow: hidden;white-space: nowrap;
}
.scrolling-text {display: inline-block;padding-left: 100%; /* 初始位置在外边 */animation: scrollText 20s linear infinite;
}
@keyframes scrollText {from {transform: translateX(0);}to {transform: translateX(-100%);}
}.content {margin-top: 100px;
}

结语

通过上述代码示例，我们成功创建了一个既简单又实用的顶部滚动通知栏，它能够很好地适应各种屏幕尺寸，并且与现代Web标准相兼容。此通知栏不仅可以用于展示最新的新闻、促销活动等信息，还可以根据需要进行样式调整，以匹配不同网站的设计风格。

希望这个例子能为你的项目提供灵感，并帮助你实现更加互动和用户友好的Web界面。

相关文章：

html + css 顶部滚动通知栏示例

前言 在现代网页设计中&#xff0c;一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息&#xff0c;还能提升用户体验。通过使用HTML和CSS&#xff0c;我们可以创建既美观又功能强大的组件&#xff0c;这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。 本…...

编程日记 2025/1/12 13:26:55

【Rust自学】11.6. 控制测试运行：并行和串行（连续执行）测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.6.1. 控制测试的运行方式 cargo test和cargo run一样&#xff0c;cargo test也会编译代码并生成一个二进制文件用于测试&#xff0c;…...

编程日记 2025/1/12 13:25:54

某漫画网站JS逆向反混淆流程分析

文章目录 1. 写在前面1. 接口分析2. 反混淆分析 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Pyth…...

编程日记 2025/1/12 13:19:46

React 中事件机制详细介绍：概念与执行流程如何更好的理解

React 的事件机制是一个非常重要的概念&#xff0c;它涉及到 React 如何处理用户的交互事件。React 的事件系统与传统的 DOM 事件系统有所不同&#xff0c;它在底层使用了事件委托和合成事件&#xff08;Synthetic Events&#xff09;来优化性能。下面&#xff0c;我们将从 Rea…...

编程日记 2025/1/12 13:18:43

Day04-后端Web基础(Maven基础)

目录 Maven课程内容1. Maven初识1.1 什么是Maven?1.2 Maven的作用1.2.1 依赖管理1.2.2 项目构建1.2.3 统一项目结构 2. Maven概述2.1 Maven介绍2.2 Maven模型2.3 Maven仓库2.4 Maven安装2.4.1 下载2.4.2 安装步骤 3. IDEA集成Maven3.1 配置Maven环境3.1.2 全局设置 3.2 Maven项…...

编程日记 2025/1/12 13:10:32

vue3模板语法+响应式基础

模板语法 1. disabled指令&#xff0c;可以用于禁用按钮 <button :disabled"isButtonDisabled">Button</button> //:disabled是一个指令&#xff0c;用于根据isButtonDisabled的值来动态控制按钮的禁用状态。 使用场景&#xff1a; 1.防止用户重复点击…...

编程日记 2025/1/12 13:09:29

【面试题】简单聊一下什么是云原生、什么是k8s、容器，容器与虚机相比优势

云原生&#xff08;Cloud Native&#xff09; 定义&#xff1a;云原生是一种构建和运行应用程序的方法&#xff0c;旨在充分利用云计算的优势。它涵盖了一系列技术和理念&#xff0c;包括容器化、微服务架构、自动化部署与管理等。特点&#xff1a;云原生应用程序被设计为可弹性…...

编程日记 2025/1/12 13:08:28

数据挖掘实训：天气数据分析与机器学习模型构建

随着气候变化对各行各业的影响日益加剧&#xff0c;精准的天气预测已经变得尤为重要。降雨预测在日常生活中尤其关键&#xff0c;例如农业、交通和灾害预警等领域。本文将通过机器学习方法&#xff0c;利用历史天气数据预测明天是否会下雨&#xff0c;具体内容包括数据预处理、…...

编程日记 2025/1/12 13:05:24

STM32如何使用内部晶振作为晶振

目录 前言 首先说明一下芯片内部并没有时钟&#xff0c; 而是内部振荡。使用内部振荡的好处是外部无需设计晶振电路 &#xff0c;再说的简单点 &#xff0c;不用外部晶振依然可以让单片机正常运转。 环境&#xff1a; 芯片&#xff1a;STM32F103C8T6 Keil&#xff1a;V5.24…...

编程日记 2025/1/12 13:02:21

【Maui】导航栏样式调整

前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和桌面应用。 使用 .NET MAUI&#xff0c;可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。 .NET MAUI 是一款开放源代码应用&#xff0c;是 X…...

编程日记 2025/1/12 13:01:20

【黑马程序员三国疫情折线图——json+pyechart=数据可视化】

json数据在文末 将海量的数据处理成我们肉眼可以进行分析的形式&#xff0c;数据的可视化&#xff0c;可以分为两个步骤&#xff1a; 数据处理&#xff1a;利用三方网站厘清json层次格式化&#xff0c;再对文件的读取、检查是否符合JSON规范以及规范化、JSON格式的转化&#…...

编程日记 2025/1/12 12:57:16

如何实现多级缓存？

本文重点说一说在Java应用中&#xff0c;多级缓存如何实现。 多级缓存是比较常见的一种性能优化的手段&#xff0c;一般来说就是本地缓存分布式缓存。 本地缓存一般采用Caffeine和Guava&#xff0c;这两种是性能比较高的本地缓存的框架。他们都提供了缓存的过期、管理等功能。…...

编程日记 2025/1/12 12:56:13

Saas数据库迁移单租户数据

1、背景 租户使用Saas系统&#xff0c;用一段时间后要将系统、数据搬迁到自建服务器。该Saas系统没有按租户分库&#xff0c;且数据库数据量太大&#xff0c;需要将单租户的数据抽取出来。Saas系统使用Mysql5.7数据库&#xff0c;主要使用INFORMATION_SCHEMA.COLUMNS表进行数据…...

编程日记 2025/1/12 12:55:12

LeetCode100之括号生成(22)--Java

1.问题描述 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例1 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()","()(())","()()()&qu…...

编程日记 2025/1/12 12:52:09

阿里云ios镜像源

阿里云镜像源&#xff1a;阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 下载centos7...

编程日记 2025/1/12 12:51:08

芯片：为何英伟达的GPU能在AI基础设施领域扮演重要角色？

英伟达的GPU之所以能在AI基础设施领域扮演重要角色&#xff0c;主要源于其硬件架构的优势以及其与深度学习算法的高度兼容性。以下是几个关键因素&#xff1a; 1. 并行计算能力 GPU&#xff08;图形处理单元&#xff09;本质上是为处理大量并行计算任务而设计的。与CPU相比&a…...

编程日记 2025/1/12 12:41:58

Linux系统之hostname相关命令基本使用

Linux系统之hostname相关命令基本使用 一、检查本地系统版本二、hostname命令的帮助说明中文帮助说明 三、hostname命令的基本使用1. 查看计算机名2. 查看本机上所有IP地址3. 查看主机FQDN4. 查看短主机名 四、hostnamectl命令的使用1. 查看主机详细信息2. 设置主机名3. hostna…...

编程日记 2025/1/12 12:39:56

Domain Adaptation（李宏毅）机器学习 2023 Spring HW11 （Boss Baseline）

1. 领域适配简介 领域适配是一种迁移学习方法，适用于源领域和目标领域数据分布不同但学习任务相同的情况。具体而言，我们在源领域（通常有大量标注数据）训练一个模型，并希望将其应用于目标领域（通常只有少量或没有标注数据）。然而，由于这两个领域的数据分布不同，模型在…...

编程日记 2025/1/12 12:38:55

在php中，Fiber、Swoole、Swow这3个协程都是如何并行运行的？

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/1/12 12:37:53

SQLite PRAGMA

SQLite的PRAGMA命令是一种特殊的命令&#xff0c;用于在SQLite环境中控制各种环境变量和状态标志。PRAGMA值可以被读取&#xff0c;也可以根据需求进行设置【0†source】。 PRAGMA命令的语法格式如下&#xff1a; 要查询当前的PRAGMA值&#xff0c;只需提供该PRAGMA的名字&am…...

编程日记 2025/1/12 12:35:50

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/9/14 13:42:19

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/9/9 10:12:01

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/9/13 17:47:21

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/8/11 11:25:20

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/9/11 12:54:55

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/9/7 8:51:12

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/9/16 2:01:11

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/9/2 11:57:55

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...

编程新知 2025/7/17 20:22:50