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

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

news 2026/2/9 12:06:07

前言

在现代网页设计中，一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息，还能提升用户体验。通过使用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

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/7 0:37:40

从零开始了解数据采集（二十八）——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

编程新知 2026/2/6 5:58:12

电脑桌面太单调，用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

编程新知 2025/8/10 0:53:59

python基础语法Ⅰ

python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器&#xff0c;来进行一些算术…...

编程新知 2026/2/8 5:05:37

PLC入门【4】基本指令2(SET RST)

04 基本指令2 PLC编程第四课基本指令(2) 1、运用上接课所学的基本指令完成个简单的实例编程。 2、学习SET--置位指令 3、RST--复位指令 打开软件(FX-TRN-BEG-C)&#xff0c;从 文件 - 主画面&#xff0c;“B: 让我们学习基本的”- “B-3.控制优先程序”。 点击“梯形图编辑”…...

编程新知 2026/2/6 1:20:55