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

Bootstrap中固定某一个元素不随滚动条滚动

news 2025/9/16 14:43:42

可以利用类sticky-top实现固定某个元素在顶部的效果，示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>固定某一个元素不随滚动条滚动</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-white"><nav class="sticky-top bg-primary p-5 mb-5">昊虹商城</nav><div class=" bg-secondary p-3"><p>家用电器</p><p>手机数码</p><p>家具家电</p><p>男装女装</p><p>男鞋户外</p><p>玩具乐器</p><p>生鲜特产</p><p>白酒红酒</p><p>礼品鲜花</p></div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
在这里插入图片描述

相关文章：

Bootstrap中固定某一个元素不随滚动条滚动

可以利用类sticky-top实现固定某个元素在顶部的效果&#xff0c;示例代码如下&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>固定某一个元素不随滚动条滚动</title><meta name"viewport&quo…...

编程日记 2023/10/10 11:50:58

时序数据库 IoTDB 发布端边云原生解决方案，有效优化工业互联网数据上传时效与资源消耗...

2023 年 9 月 8 日&#xff0c;由中国通信学会、福建省工业和信息化厅主办的 2023 中国国际工业互联网创新发展大会在厦门举办。大会主论坛中&#xff0c;时序数据库 IoTDB 发表其自研建立的端边云原生解决方案&#xff0c;该方案可实现端侧设备、边缘服务器、数据中心数据的协…...

编程日记 2023/10/10 11:49:58

Spring Boot中实现发送文本、带附件和HTML邮件

SpringBoot实现发送邮箱 引言 在现代应用程序中&#xff0c;电子邮件通常是不可或缺的一部分。在Spring Boot中&#xff0c;你可以轻松地实现发送不同类型的邮件&#xff0c;包括文本、带附件和HTML邮件。本博客将向你展示如何使用Spring Boot发送这些不同类型的电子邮件。 步…...

编程日记 2023/10/10 11:48:57

MySQL5.7版本与8.0版本在CentOS系统安装

目录 前置要求 1. MySQL5.7版本在CentOS系统安装 1.1 安装 1.1.1 配置yum仓库 1.1.2 使用yum安装MySQL 1.1.3 安装完成后&#xff0c;启动MySQL并配置开机自启动 1.1.4 检查MySQL的运行状态 1.2 配置 1.2.1 获取MySQL的初始密码 1.2.2 登陆MySQL数据库系统 …...

编程日记 2023/10/10 11:46:54

【gitlab】从其他仓库创建项目

需求描述 解决方法 以renren-fast脚手架为例 第一步 第二步 第三步 第四步 参考文章...

编程日记 2023/10/10 11:44:51

【ARM CoreLink 系列 6 -- DMC-400控制器简介】

文章目录 1.1 DMC-400 简介1.1.1 DFI&#xff08;DDR PHY Interface&#xff09;1.1.2 DFI 接口组1.1.3 DMC-400 兼容协议1.1.4 DMC-400 特性1.1.5 DMC-400 Interface 1.1 DMC-400 简介 DMC-400是一个由ARM开发、测试和授权的动态内存控制器&#xff0c;同时 DMC-400也是一个符…...

编程日记 2023/10/10 11:42:49

在 Azure 中开发云原生应用程序：工具和技巧

Azure 中的云原生开发工具 Azure 包含一系列用于云原生应用程序开发的内置工具和服务。这里介绍的服务和工具是很好的入门选择。 发展 Azure 包括两个用于开发和构建云原生应用程序的主要工具&#xff1a;Visual Studio (VS) 和Azure应用服务。 VS 是一个集成开发环境&#…...

编程日记 2023/10/10 11:41:46

【Redis】基础数据结构-字典

Redis 字典 基本语法 字典是Redis中的一种数据结构&#xff0c;底层使用哈希表实现&#xff0c;一个哈希表中可以存储多个键值对&#xff0c;它的语法如下&#xff0c;其中KEY为键&#xff0c;field和value为值&#xff08;也是一个键值对&#xff09;&#xff1a; HSET key…...

编程日记 2023/10/10 11:40:46

平板第三方电容笔怎么样？便宜的ipad触控笔推荐

苹果原装的电容笔与国产的平替电容笔最大的区别在于&#xff0c;平替电容笔只有一个斜面压力感应&#xff0c;而苹果电容笔既有斜面压力感应&#xff0c;又有重力压力感应。但是&#xff0c;如果你不经常使用它来进行绘画的话&#xff0c;你也不必买选择这款苹果电容笔&#xf…...

编程日记 2023/10/10 11:39:45

pytorch_神经网络构建3

文章目录 卷积神经网络实现卷积层,池化层池化层:数据标准化AlexNet卷积网络深层网络结构vgggoogleNet网络结构ResNet网络结构DensNet网络结构训练卷积神经网络会遇到的一些问题学习率衰减 卷积神经网络 前面讲述了逻辑回归分类,模拟函数回归问题,单层,深层网络,它们以点和向量…...

编程日记 2023/10/10 11:38:43

遗传算法入门笔记

目录 一、大体实现过程 二、开始我们的进化(具体实现细节) 2.1 先从编码说起 2.1.1 二进制编码法 2.1.&#xff12; 浮点编码法 2.1.3 符号编码法 2.2 为我们的袋鼠染色体编码 2.3 评价个体的适应度 2.4 射杀一些袋鼠 2.5 遗传--染色体交叉(crossover) 2.6 变异--基…...

编程日记 2023/10/10 11:37:42

【golang】go 返回参数 以及go中 裸返

一、Go 返回参数命名 在Golang中&#xff0c;命名返回参数通常称为命名参数。 Golang允许在函数签名或定义中为函数的返回或结果参数指定名称。或者可以说这是函数定义中返回变量的显式命名。基本上&#xff0c;它解决了在return语句中提及变量名称的要求。 通过使用命名返回参…...

编程日记 2023/10/10 11:36:41

elasticsearch深度分页问题

一、深度分页方式from size es 默认采用的分页方式是 from size 的形式&#xff0c;在深度分页的情况下&#xff0c;这种使用方式效率是非常低的&#xff0c;比如我们执行如下查询 1 GET /student/student/_search 2 { 3 "query":{ 4 "match_all":…...

编程日记 2023/10/10 11:34:37

32、Flink table api和SQL 之用户自定义 Sources Sinks实现及详细示例

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

编程日记 2023/10/10 11:33:36

Java练习题-用冒泡排序法实现数组排序

✅作者简介&#xff1a;CSDN内容合伙人、阿里云专家博主、51CTO专家博主、新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;Java练习题 &#x1f4ac;个人格言&#xff1a;不断的翻越一座又…...

编程日记 2023/10/10 11:32:34

【SV中的多线程fork...join/join_any/join_none】

SV中fork_join/fork_join_any/fork_join_none 1 一目了然1.1 fork...join1.2 fork...join_any1.3 fork...join_none 2 总结 SV中fork_join和fork_join_any和fork_join_none; Note: fork_join在Verilog中也有&#xff0c;只有其他的两个是SV中独有的&#xff1b; 1 一目了然 1.…...

编程日记 2023/10/10 11:31:32

翻译：网站整站翻译 / 网站国际化 / 极简实现

一、本文目标 以极简单的方法实现整站翻译&#xff0c;轻松实现国际化。 二、js 文件 https://res.zvo.cn/translate/translate.js 三、代码 代码放在浏览器控制台即可实现 var head document.getElementsByTagName(head)[0];var script document.createElement(script);sc…...

编程日记 2023/10/10 11:29:30

深度森林（deep-forest）安装

深度森林&#xff08;deep-forest&#xff09;安装 1、打开https://pypi.org/&#xff0c;搜索deep-forest&#xff0c;下载wheel文件 在下载好之后&#xff0c;打开文件下载的位置 首先对下载好的wheel文件进行改名&#xff0c;原名是&#xff1a; deep_forest-0.1.7-cp39-c…...

编程日记 2023/10/10 11:28:30

ping.pe ping 检测IP全球延迟

可以把结果保存为照片 https://ping.pe/全球ping ping ip端口检测 IP:PORT路由追踪 mtr IP 参考 ping.pe...

编程日记 2023/10/10 11:27:29

nodejs 16版本

Index of /download/release/latest-v16.x/...

编程日记 2023/10/10 11:25:27

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/9/15 0:18:50

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/9/15 4:15:05

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/9/10 8:11:45

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/7/23 19:14:14

基于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

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/9/7 8:47:06

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/7/29 3:05:57

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法 大家好，我是Echo_Wish。最近刷短视频、看直播，有没有发现，越来越多的应用都开始“懂你”了——它们能感知你的情绪，推荐更合适的内容，甚至帮客服识别用户情绪，提升服务体验。这背后，神经网络在悄悄发力，撑起…...

编程新知 2025/9/14 23:15:01

DeepSeek越强，Kimi越慌？

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...

编程新知 2025/9/13 17:30:06

高端性能封装正在突破性能壁垒，其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...

编程新知 2025/9/13 0:08:44