【前端】CSS修改div滚动条样式

示例

分别是滚动条默认样式和修改后的样式

代码

<div class="video-list"><div class="list-item" onclick="videoinfo(100)"><img src="/index/images/coverimg/方和谦.png"><div class="txt">国医大师方和谦讲伤寒论(序)</div></div><div class="list-item" onclick="videoinfo(101)"><img src="/index/images/coverimg/方和谦.png"><div class="txt" style="color:#0066cc; font-weight: 700">国医大师方和谦讲伤寒论(第一讲)</div></div>
</div>
.video-list::-webkit-scrollbar {width: 12px;height: 12px;
}
.video-list::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 10px;
}
.video-list::-webkit-scrollbar-thumb {background: #888;border-radius: 10px;
}
.video-list::-webkit-scrollbar-thumb:hover {background: #555;
}
  1. ::-webkit-scrollbar:定义了滚动条的宽度或高度。
  2. ::-webkit-scrollbar-track:定义了滚动条轨道的样式。
  3. ::-webkit-scrollbar-thumb:定义了滚动条滑块的样式。
  4. ::-webkit-scrollbar-thumb:hover:定义了当鼠标悬停在滑块上时的样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/476313.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AIGC】如何使用高价值提示词Prompt提升ChatGPT响应质量

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | 提示词Prompt应用实例 文章目录 &#x1f4af;前言&#x1f4af;提示词英文模板&#x1f4af;提示词中文解析1. 明确需求2. 建议额外角色3. 角色确认与修改4. 逐步完善提示5. 确定参考资料6. 生成和优化提示7. 生成最终响…

centos安装jenkins

本机使用虚拟机centos 7.9.2009 安装gitlab&#xff0c;本机的虚拟机ip地址是 192.168.60.151&#xff0c; 步骤记录如下 1、下载jenkins&#xff0c;安装jenkins之前需要安装jdk jdk和jenkins的版本对应关系参考&#xff1a;Redhat Jenkins Packages Index of /redhat-stable…

使用redis-shake工具进行redis的数据同步

前言&#xff1a; 工作中将常遇到测试环境和正式环境的数据同步或者需要进行数据迁移&#xff0c;对于mysql数据库的方案倒是不少&#xff0c;但是redis中如何快速便捷的迁移呢&#xff1f;答案是阿里云提供的:redis-shake RedisShake是阿里云基于豌豆荚开源的redis-port进行…

04 —— Webpack打包CSS代码

加载器css-loader &#xff1a;解析css代码 webpack 中文文档 | webpack中文文档 | webpack中文网 加载器style-loader&#xff1a;把解析后的css代码插入到DOM style-loader | webpack 中文文档 | webpack中文文档 | webpack中文网 准备css代码&#xff0c;放到src/login目…

Nacos实现IP动态黑白名单过滤

一些恶意用户&#xff08;可能是黑客、爬虫、DDoS 攻击者&#xff09;可能频繁请求服务器资源&#xff0c;导致资源占用过高。因此我们需要一定的手段实时阻止可疑或恶意的用户&#xff0c;减少攻击风险。 本次练习使用到的是Nacos配合布隆过滤器实现动态IP黑白名单过滤 文章…

SAP PI/PO Proxy2JDBC SQL_QUERY动态接口示例

目录 背景&#xff1a; 完整demo步骤&#xff1a; IR: ID: SPROXY: 测试代码&#xff1a; 注意点&#xff1a; 背景&#xff1a; 中途临时帮客户项目做其他功能&#xff0c;项目上有部分开发项需要通过PO去第三方数据库取数&#xff0c;项目上的开发对PO不太熟&#xf…

如何使用本地大模型做数据分析

工具&#xff1a;interpreter --local 样本数据&#xff1a; 1、启动分析工具 2、显示数据文件内容 输入&#xff1a; 显示/Users/wxl/work/example_label.csv 输出&#xff1a;(每次输出的结果可能会不一样&#xff09; 3、相关性分析 输入&#xff1a; 分析客户类型与成…

中间件--laravel进阶篇

laravel版本11.31,这中间件只有3种,分别是全局中间件,路由中间件,控制器中间件。相比thinkphp8,少了一个应用中间件。 一、创建中间件 laravel创建中间件可以使用命令的方式创建,非常方便。比如php artisan make:middleware EnsureTokenIsValid。EnsureTokenIsValid是中间…

一维卷积神经网络(1D-CNN)

一维卷积神经网络&#xff08;1D Convolutional Neural Network, 1D CNN&#xff09;是卷积神经网络的一种变体&#xff0c;专门用于处理序列数据&#xff0c;如时间序列、文本等。 一、基本结构 一维卷积神经网络的基本结构与二维卷积神经网络&#xff08;2D CNN&#xff09;类…

Java中的TreeSet集合解析

记一下java流处理的操作 1.去重&#xff0c;按照billTypeCode去重 list list.stream().collect(Collectors.collectingAndThen(Collectors.toCollection(() -> new TreeSet<>(Comparator.comparing(o -> o.getBillTypeCode()))), ArrayList::new)); 排序&#x…

vue中mixin(混入)的使用

目录 mixin(混入) 使用方式 第一步定义混合 ​编辑 第二步使用混入 局部混入 全局混合 mixin(混入) 功能&#xff1a;可以把多个组件共用的配置提取成一个混入对象 使用方式 第一步定义混合 { data(){....}, methods:{....} .... } 第二步使用混入 …

vue中路由缓存

vue中路由缓存 问题描述及截图解决思路关键代码及打印信息截图 问题描述及截图 在使用某一平台时发现当列表页码切换后点击某一卡片进入详情页后&#xff0c;再返回列表页时页面刷新了。这样用户每次看完详情回到列表页都得再重新输入自己的查询条件&#xff0c;或者切换分页到…

Easyexcel(1-注解使用)

相关文章链接&#xff1a; Easyexcel&#xff08;1-注解使用&#xff09; 版本依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.3</version> </dependency>ExcelProperty…

Vue3 -- mock数据完整配置并调试【项目集成6】

引言&#xff1a; ‌Mock在前端开发中的作用主要是模拟后端接口数据&#xff0c;以便前端开发者能够提前进行页面和功能的开发、调试&#xff0c;而无需等待后端提供真实的接口数据‌。Mock数据可以加速前后端开发的协同&#xff0c;避免因数据延迟导致的开发阻塞‌。【摘自百…

开源许可协议

何同学推动了开源协议的认识&#xff0c;功不可没&#xff0c;第一次对开源有了清晰的认识&#xff0c;最宽松的MIT开源协议 源自OSC开源社区&#xff1a;何同学使用开源软件“翻车”&#xff0c;都别吵了&#xff01;扯什么违反MIT

数据结构(顺序栈——c语言实现)

栈的基本概念&#xff1a; 栈是限制在一端进行插入操作和删除操作的线性表&#xff08;俗称堆栈&#xff09;&#xff0c;允许进行操作的一端称为“栈顶”&#xff0c;另一固定端称为“栈底”&#xff0c;当栈中没有元素时称为“空栈” 特点&#xff1a;先进后出&#xff08;FI…

【智谱清言-注册_登录安全分析报告】

前言 由于网站注册入口容易被机器执行自动化程序攻击&#xff0c;存在如下风险&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露&#xff0c;不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 &#xff0c;造成用户无法登陆、注册&#xff0c;大量收到垃圾短信的…

[Realtek sdk-3.4.14b] RTL8197FH-VG新增jffs2分区操作说明

sdk说明 ** Gateway/AP firmware v3.4.14b – Aug 26, 2019**  Wireless LAN driver changes as:  Refine WiFi Stability and Performance  Add 8812F MU-MIMO  Add 97G/8812F multiple mac-clone  Add 97G 2T3R antenna diversity  Fix 97G/8812F/8814B MP issu…

Cesium 加载B3DM模型

一、引入Cesium&#xff0c;可以使用该链接下载cesium 链接: https://pan.baidu.com/s/1BRQyaFCkxO2xQQT5RzFUCw?pwdkcv9 提取码: kcv9 在index.html文件中引入cesium <script type"text/javascript" src"/Cesium/Cesium.js"></script> …

掌握移动端性能测试利器:深入JMeter手机录制功能

引言 在当今移动互联网时代&#xff0c;应用程序的性能和用户体验至关重要。为了确保应用程序在不同设备和网络环境下都能稳定运行&#xff0c;性能测试成为了不可或缺的一环。Apache JMeter作为一款强大的开源性能测试工具&#xff0c;不仅支持传统的PC端性能测试&#xff0c…