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

css 美化滚动条

当div内容溢出容器定义的高度时,滚动条显示,并美化默认的滚动条样式

div 容器

 <divclass="content">内容
</div>

css 样式

/* 问话区域 滚动条 */
.content {overflow: auto;height: 662px;padding: 25px;scrollbar-width: thin; /* 设置滚动条宽度 */border-radius: 10px; /* 设置滚动条圆角 */
}
/* 滚动条美化 */
.content::-webkit-scrollbar {width: 7px; /* 设置滚动条的宽度 */
}.content::-webkit-scrollbar-track {/* background: #; 设置滚动条轨道的背景色 */opacity: 0.5
}.content::-webkit-scrollbar-thumb {background: rgb(164, 168, 167); /* 设置滚动条滑块的背景色 */
}

效果

在这里插入图片描述

相关文章:

css 美化滚动条

当div内容溢出容器定义的高度时,滚动条显示,并美化默认的滚动条样式 div 容器 <divclass"content">内容 </div>css 样式 /* 问话区域 滚动条 */ .content {overflow: auto;height: 662px;padding: 25px;scrollbar-width: thin; /* 设置滚动条宽度 */bo…...

Tomcat介绍及使用:构建强大的Java Web应用服务器

引言&#xff1a; 在现代软件开发中&#xff0c;Web应用已经成为了不可或缺的一部分。而为了构建高效、稳定的Web应用服务器&#xff0c;选择合适的工具和技术至关重要。Tomcat作为一款开源的Java Web应用服务器&#xff0c;凭借其丰富的功能和灵活的配置&#xff0c;成为了开发…...

怎么定义一套完成标准的JAVA枚举类型

一、背景 在java代码中&#xff0c;接口返回有各种各样的状态&#xff0c;比如400 401 200 500 403等常见的http状态码&#xff0c;也有我们自定义的很多业务状态码。如果系统比较复杂&#xff0c;制定一套完整的标准的状态码是非常有必要的&#xff0c;这样比较方面BUG排查。…...

Apache Seatunnel本地源码构建编译运行调试

Apache Seatunnel本地源码构建编译运行调试 文章目录 1. 环境准备1.1 Java环境1.2 Maven1.3 IDEA1.4 Docker环境1.5 Mysql8.0.281.6 其它环境准备 2. 源码包下载3. idea项目配置3.1 项目导入3.2 maven配置3.3 项目JDK配置3.4 项目启动参数配置3.4.1 seatunnel项目启动参数配置3…...

构建高效持久层:深度解析 MyBatis-Plus(02)

目录 引言1. 逻辑删除1.1 概述1.2 逻辑删除的优势1.3.为什么使用逻辑删除1.4 综合案例 2. 乐观锁和悲观锁2.1.什么是乐观锁和悲观锁2.2.乐观锁和悲观锁的区别2.3.综合案例 3. 分页插件总结 引言 在现代软件开发中&#xff0c;数据库操作是不可或缺的一环。为了提高系统的性能、…...

Gitlab仓库推送到Gitee仓库的一种思路

文章目录 Gitlab仓库推送到Gitee仓库的一种思路1、创建Gitee的ssh公钥&#xff08;默认已有Gitlab的ssh公钥&#xff09;2、添加Gitlab远程仓库地址3、添加Gitee远程仓库地址4、拉取Gitlab远程仓库指定分支到本地仓库指定分支&#xff08;以test分支为例&#xff09;5、推送本地…...

快速能访问服务器的文件

1、背景 访问ubuntu上的文件 2、方法 python3 -m http.server 8081 --directory /home/ NAS 共享访问协议 — NFS、SMB、FTP、WebDAV 各有何优势&#xff1f;http://1 Ubuntu 搭建文件服务器&#xff08;Nginx&#xff09;...

Diary26-Vue综合案例1-书籍购物车

Vue综合案例1-书籍购物车 案例要求: 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…...

【EasyExcel实践】万能导出,一个接口导出多张表以及任意字段(可指定字段顺序)-简化升级版

文章目录 前言正文一、项目简介二、核心代码2.1 pom.xml 依赖配置2.2 ExcelHeadMapFactory2.3 ExcelDataLinkedHashMap2.4 自定义注解 ExcelExportBean2.5 自定义注解 ExcelColumnTitle2.6 建造器接口 Builder2.7 表格工具类 ExcelUtils2.8 GsonUtil2.9 模版类 ExportDynamicCo…...

解决 Hive 外部表分隔符问题的实用指南

简介&#xff1a; 在使用 Hive 外部表时&#xff0c;分隔符设置不当可能导致数据导入和查询过程中的问题。本文将详细介绍如何解决在 Hive 外部表中正确设置分隔符的步骤。 问题描述&#xff1a; 在使用Hive外部表时&#xff0c;可能会遇到分隔符问题。这主要是因为Hive在读…...

一文学会 Apache Zeppelin

Zeppelin资料 Zeppelin项目信息 Zeppelin官网 http://zeppelin.apache.org/Zeppelin源码地址 https://github.com/apache/zeppelinZeppelin JIRA: https://issues.apache.org/jira/projects/ZEPPELIN/summaryZeppelin文档 Flink on Zeppelin 文档集中地 https://www.yuque.co…...

ROS学习笔记(七)---参数服务器

ROS学习笔记文章目录 01. ROS学习笔记(一)—Linux安装VScode 02. ROS学习笔记(二)—使用 VScode 开发 ROS 的Python程序&#xff08;简例&#xff09; 03. ROS学习笔记(三)—好用的终端Terminator 04. ROS学习笔记(四)—使用 VScode 启动launch文件运行多个节点 05. ROS学习笔…...

【RTOS学习】源码分析(信号量和互斥量 事件组 任务通知)

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f353;信号量和互斥量&#x1f345;创建&#x1f345;Take&#x1f345;Give &#x…...

1316:【例4.6】数的计数(Noip2001) 代码+解析

1316&#xff1a;【例4.6】数的计数(Noip2001) 【题目描述】 我们要求找出具有下列性质数的个数&#xff08;包括输入的自然数n &#xff09;。先输入一个自然数n(n≤1000)&#xff0c;然后对此自然数按照如下方法进行处理&#xff1a;不作任何处理&#xff1b;在它的左边加上一…...

征集倒计时 | 2023年卓越影响力榜单-第四届中国产业创新奖报名即将截止

第四届「ISIG中国产业智能大会」将于2024年3月16日在上海举办。2024 ISIG 以“与科技共赢&#xff0c;与产业共进”为主题&#xff0c;共设立RPA超自动化、 低代码、AIGC大模型、流程挖掘四大主题峰会。届时&#xff0c;大会组委会将颁发2023年度卓越影响力榜单—第四届中国产业…...

vue的语法模板与数据绑定的说明

vue的两大模板语法&#xff1a; 1.插值语法 2.指定语法 插值语法&#xff1a;{{}} 功能&#xff1a;用于解析标签体的内容 写法&#xff1a;{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性 指定语法&#xff1a; 功能:用于解析标签(包括:标签属性、标…...

VueCron使用方法

1&#xff09;什么是vueCron Vue Cron 是基于 Vue.js 的定时任务管理组件&#xff0c;它提供了一种简单易用的方式来设定和管理定时任务。Vue Cron 提供了一个类似于 Linux crontab 的界面&#xff0c;用户可以通过它来创建、编辑和删除定时任务。 2&#xff09;安装依赖及应…...

SpringBlade export-user SQL 注入漏洞复现

0x01 产品简介 SpringBlade 是一个由商业级项目升级优化而来的 SpringCloud 分布式微服务架构、SpringBoot 单体式微服务架构并存的综合型项目。 0x02 漏洞概述 SpringBlade v3.2.0 及之前版本框架后台 export-user 路径存在安全漏洞,攻击者利用该漏洞可通过组件customSqlS…...

结构体的一些补充知识

1、结构体后面分号前面的名字是什么意思。 在C中&#xff0c;结构体的定义格式为&#xff1a; struct <结构体名> {// 成员变量和成员函数 };在这个定义中&#xff0c;<结构体名>就是结构体的名称&#xff0c;而这个名称位于结构体定义的末尾&#xff0c;分号之前…...

20V升26V 600mA升压型LED驱动芯片,PWM调光芯片-AH1160

AH1160是一个功能强大的升压型LED驱动芯片&#xff0c;专为需要精确控制LED亮度的PWM调光应用而设计。它可将20V输入电压升压至26V&#xff0c;同时提供稳定的600mA电流输出&#xff0c;适用于各种LED照明设备。 芯片特点&#xff1a; 1. 输入电压范围&#xff1a;AH1160可在…...

基于单周期控制的交错并联无桥Boost PFC变换器:宽电压范围与高效率转换技术实现高效电源管理

基于单周期控制的两相交错并联无桥Boost型 PFC 变换器 采用两路 Boost PFC 交错并联实现的&#xff0c;每一路的控制方式和结构都是相同的&#xff0c;由此推出控制方法相同&#xff0c;都为单周期控制&#xff0c;所以只分析一路的结果就可以类比 1、输入电压&#xff1a;150V…...

破局B站音频提取难题:BilibiliDown革新性解决方案全解析

破局B站音频提取难题&#xff1a;BilibiliDown革新性解决方案全解析 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors…...

塔罗牌选框架:准确率超机器学习模型

技术选型困境与创新突破在软件测试领域&#xff0c;技术栈选择一直是核心挑战。传统方法依赖历史数据和机器学习模型&#xff0c;但常陷入“预测陷阱”——过度依赖过往经验导致创新盲区。例如&#xff0c;自动化测试框架的错误选型每年造成巨额损失&#xff1a;38.7%源于技术生…...

Qwen3.5-4B-Claude-Opus实战案例:用该模型辅助撰写RFC文档与技术决策说明

Qwen3.5-4B-Claude-Opus实战案例&#xff1a;用该模型辅助撰写RFC文档与技术决策说明 1. 模型特性与RFC文档撰写需求 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF作为一款专注于推理分析的AI模型&#xff0c;其结构化思维和分步骤回答能力特别适合技术文档撰写场景…...

生成式AI欺诈来袭,什么样的IP数据接口才能筑起防线?

某电商平台的风控系统发出预警&#xff1a;一个“新用户”正在批量下单高价商品&#xff0c;收货地址遍布全国&#xff0c;支付方式各不相同。但奇怪的是&#xff0c;这些订单的浏览行为、停留时间、点击轨迹几乎完全一致——这不是真人&#xff0c;而是生成式AI模拟的虚假用户…...

ollama-QwQ-32B量化部署:在4GB内存设备运行OpenClaw的配置

ollama-QwQ-32B量化部署&#xff1a;在4GB内存设备运行OpenClaw的配置 1. 为什么要在低配设备上折腾大模型&#xff1f; 去年冬天&#xff0c;我在树莓派上第一次尝试部署OpenClaw时&#xff0c;被现实狠狠教育了一顿——32GB内存的笔记本跑得飞起&#xff0c;换到4GB的树莓派…...

魔兽世界插件开发完全指南:专业API文档与宏工具平台

魔兽世界插件开发完全指南&#xff1a;专业API文档与宏工具平台 【免费下载链接】wow_api Documents of wow API -- 魔兽世界API资料以及宏工具 项目地址: https://gitcode.com/gh_mirrors/wo/wow_api 魔兽世界插件开发是每位进阶玩家提升游戏体验的必经之路&#xff0c…...

YOLOv11自定义数据集训练避坑指南:从data.yaml配置到模型选择(实测对比v8)

YOLOv11自定义数据集训练实战&#xff1a;从数据配置到模型调优的深度解析 在计算机视觉领域&#xff0c;目标检测技术的迭代速度令人目不暇接。作为YOLO系列的最新成员&#xff0c;YOLOv11凭借其优化的网络结构和训练策略&#xff0c;正在成为工业界和学术界的热门选择。然而&…...

Qwen2.5-Coder-1.5B新手指南:如何用‘fill-in-the-middle’模式补全代码

Qwen2.5-Coder-1.5B新手指南&#xff1a;如何用‘fill-in-the-middle’模式补全代码 重要提示&#xff1a;Qwen2.5-Coder-1.5B是一个专门用于代码任务的预训练模型&#xff0c;不适合直接用于对话。它最擅长的场景是代码补全、生成和修复&#xff0c;特别是使用"fill-in-t…...

实战指南:基于快马生成代码构建支持验证码的2048论坛登录系统

实战指南&#xff1a;基于快马生成代码构建支持验证码的2048论坛登录系统 最近在开发一个2048游戏社区时&#xff0c;需要为论坛设计一个安全可靠的登录入口。这个登录系统不仅要考虑用户体验&#xff0c;还要兼顾安全性。通过InsCode(快马)平台生成的代码作为基础&#xff0c…...