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

CSS 小技能（一）：HTML 两个图片竖着平铺、设置图片点击、设置滚动条颜色

news 2026/5/20 7:34:33

下面的代码没有考虑响应式的效果，如果考虑的话还需要一些代码进行处理。

【注】当时写的时候仅考虑了 webkit 内核的浏览器，如果是 IE 或者其他浏览器，请增加额外的 CSS 样式进行控制。

<!DOCTYPE html>
<html>
<head><style>body, html {height: 100%;padding: 0;margin: 0;overflow: hidden;}.container {height: 100%;overflow-y: scroll;}/* 仅适用于Webkit浏览器（Chrome和Safari等） */::-webkit-scrollbar {width: 0.3em; /* 设置滚动条宽度 */}::-webkit-scrollbar-track {background-color: transparent; /* 设置滚动条轨道背景色 */}::-webkit-scrollbar-thumb {background-color: rgb(74, 144, 250); /* 设置滚动条滑块颜色 */border-radius: 4px; /* 设置滚动条滑块圆角 */}.image {height: 90vh;  /* 没有使用 100vh，主要是让用户直观的看到下面还有一张图 */background-size: cover;background-repeat: no-repeat;}/* 设置第一个图片地址 */.image:nth-child(1) {background-image: url('test.jpg');}/* 设置第二个图片地址 */.image:nth-child(2) {background-image: url('test.jpg');}</style>
</head>
<body>
<div class="container"><a href="https://www.baidu.com"><div class="image"></div></a><a href="http://www.qq.com"><div class="image"></div></a>
</div>
</body>
</html>

显示效果如下：

在这里插入图片描述
个人博客：Roc’s Blog

相关文章：

CSS 小技能（一）：HTML 两个图片竖着平铺、设置图片点击、设置滚动条颜色

下面的代码没有考虑响应式的效果&#xff0c;如果考虑的话还需要一些代码进行处理。 【注】当时写的时候仅考虑了 webkit 内核的浏览器&#xff0c;如果是 IE 或者其他浏览器&#xff0c;请增加额外的 CSS 样式进行控制。 <!DOCTYPE html> <html> <head>&l…...

编程日记 2023/8/25 10:47:44

【论文阅读】CONAN：一种实用的、高精度、高效的APT实时检测系统（TDSC-2020）

CONAN&#xff1a;A Practical Real-Time APT Detection System With High Accuracy and Efficiency TDSC-2020 浙江大学 Xiong C, Zhu T, Dong W, et al. CONAN: A practical real-time APT detection system with high accuracy and efficiency[J]. IEEE Transactions on Dep…...

编程日记 2023/8/25 10:46:42

P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布

题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样&#xff0c;则不分胜负。在《生活大爆炸》第二季第 8 集中出现了一种石头剪刀布的升级版游戏。 升级版游戏在传统的石头剪刀布游戏的基础上,增加了两个新手势: 斯波克:《星际迷航》主…...

编程日记 2023/8/25 10:45:41

基于Android水果蔬菜果蔬到家商城系统 微信小程序uniAPP的开发与实现

果蔬到家是商家针对用户必不可少的一个部分。在商铺发展的整个过程中&#xff0c;果蔬到家担负着最重要的角色。为满足如今日益复杂的管理需求&#xff0c;各类果蔬到家程序也在不断改进。本课题所设计的springboot基于HBuilder X的果蔬到家APP&#xff0c;使用SpringBoot框架&…...

编程日记 2023/8/25 10:44:40

【Python】从入门到上头—Python基础（2）

文章目录 一.基础语法1.编码2.标识符3.保留字4.注释5.行与缩进6.多行语句7.数字(Number)类型8.字符串(String)9.空行10.等待用户输入11.同一行显示多条语句12.多个语句构成代码组13.print 输出14.import 与 from...import 二.基本数据类型1.变量和赋值2.多个变量赋值3.标准数据…...

编程日记 2023/8/25 10:43:39

leetcode刷题之283:移动零

问题 实现思路 首先, 将dest指向-1 位置, cur指向下标为0 的位置, 在cur遍历的过程中: 1) 遇到非零元素则与下标dest1 位置的元素交换, 2) 若遇到零元素则只继续cur遍历. 下标为1 的位置上是 非零元素 执行1) 交换得到右图结果 随后cur 得到下图结果 下标为2 的位置上是零…...

编程日记 2023/8/25 10:42:37

【Spring Boot】SpringBoot和数据库交互: 使用Spring Data JPA

文章目录 1. 数据库和Java应用程序1.1 为什么需要数据库交互1.2 传统的数据库交互方法 2. 什么是JPA2.1 JPA的定义2.2 JPA的优势 3. Spring Data JPA介绍3.1 Spring Data JPA的特性3.2 如何简化数据库操作 4. 在SpringBoot中集成Spring Data JPA4.1 添加依赖4.2 配置数据源 5. …...

编程日记 2023/8/25 10:41:36

自动化部署及监测平台基本架构

声明 本文是学习 政务计算机终端核心配置规范. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 核心配置自动化部署及监测技术要求 自动化部署及监测平台基本架构 对于有一定规模的政务终端核心配置应用&#xff0c;需要配备自动化部署及监测平台&am…...

编程日记 2023/8/25 10:40:34

基于NXP i.MX 6ULL核心板的物联网模块开发案例（1）

目录 前 言 1 SDIO WIFI模块测试 1.1 STA模式测试 1.2 AP模式测试 1.3 SDIO WIFI驱动编译 前言 本文主要介绍基于创龙科技TLIMX6U-EVM评估板的物联网模块开发案例&#xff0c;适用开发环境&#xff1a; Windows开发环境&#xff1a;Windows 7 64bit、Windows 10 64bit …...

编程日记 2023/8/25 10:39:33

【路由器】小米 WR30U 解锁并刷机

文章目录 解锁 ssh环境准备解锁过程 刷入 mt798x uboot简介刷入流程 刷入 ImmortalWrt简介刷入流程 刷为原厂固件参考资料 本文主要记录个人对小米 WR30U 路由器的解锁和刷机过程&#xff0c;整体步骤与 一般安装流程 类似&#xff0c;但是由于 WR30U 的解锁 ssh 和刷机的过程中…...

编程日记 2023/8/25 10:38:31

数据库操作语句

一&#xff0c;SQL分类 DDL&#xff1a;数据定义语言 DML&#xff1a;数据操纵语言 DQL&#xff1a;数据查询语言 DCL&#xff1a;数据控制语言 创建数据库和表 #创建数据库 create database 数据库名; #创建数据表 create table 表名 (字段1 字段1类型(字段长度) 字段限制,字…...

编程日记 2023/8/25 10:37:29

Mr. Cappuccino的第64杯咖啡——Spring循环依赖问题

Spring循环依赖问题 什么是循环依赖问题示例项目结构项目代码运行结果 Async注解导致的问题使用Lazy注解解决Async注解导致的问题开启Aop使用代理对象示例项目结构项目代码运行结果 Spring是如何解决循环依赖问题的原理源码解读 什么情况下Spring无法解决循环依赖问题 什么是循…...

编程日记 2023/8/25 10:36:28

Adapting Language Models to Compress Contexts

本文是LLM系列文章&#xff0c;针对《Adapting Language Models to Compress Contexts》的翻译。 使语言模型适应上下文压缩 摘要1 引言2 相关工作3 方法4 实验5 上下文学习6 压缩检索语料库实现高效推理7 结论不足 摘要 1 引言 2 相关工作 3 方法 4 实验 5 上下文学习 …...

编程日记 2023/8/25 10:35:26

Kubernetes(K8S)使用PV和PVC做存储安装mysql

Kubernetes使用PV和PVC做存储安装mysql 环境准备什么是PV和PVC环境准备配置nfs安装nfs配置nfs服务端 创建命名空间配置pv和pvcpv的yaml文件pvc的yaml文件 部署mysql创建mysql的root密码的secret创建mysql部署的yaml部署mysql链接mysql外部链接内部链接 环境准备 首先你需要一个…...

编程日记 2023/8/25 10:34:24

Ansible Playbook 常用变量

以下是 Ansible Playbook 常用变量 ansible_connection: 指定连接类型&#xff08;如 ssh、winrm&#xff09; ansible_user: 指定远程用户 ansible_ssh_pass: 指定远程用户密码 ansible_become: 指定是否切换为超级用户 ansible_become_user: 指定切换到的用户 ansible_b…...

编程日记 2023/8/25 10:33:23

0103水平分片-jdbc-shardingsphere-中间件

文章目录 1 准备服务器1.1 创建server-order0容器1.2 创建server-order1容器 2、基本水平分片2.1、基本配置2.2、数据源配置2.3、标椎分片表配置2.4、行表达式2.5、分片算法配置2.6、分布式序列算法 3、多表关联3.1、创建关联表3.2、创建实体类3.3、创建Mapper3.4、配置关联表3…...

编程日记 2023/8/25 10:32:21

Vue2.0+webpack 引入字体文件（eot，ttf，woff）

webpack.base.config.js 需要配置 {test:/\/(woff2?|eot|ttf|otf)(\?.*)?$/,loader: url-loader,options: {limit: 10000,name: utils.assetsPath(fonts/[name].[hash:7].[ext])}} 如果 Vue2.0webpack3.6引入字体文件&#xff08;eot&#xff0c;ttf&#xff0c;woff&…...

编程日记 2023/8/25 10:31:20

Eureka：CAP原则及对比Zookeeper

...

编程日记 2023/8/25 10:30:19

WPF入门到精通:3.MVVM简单应用及全局异常处理

MVVM简介 在WPF应用程序开发中&#xff0c;MVVM&#xff08;Model-View-ViewModel&#xff09;是一种非常流行的架构模式。它为应用程序的设计提供了良好的分层结构和可扩展性。 结构分为下列三部分 Model&#xff1a;定义了应用程序的数据模型 就是系统中的对象&#xff0c;…...

编程日记 2023/8/25 10:29:17

Springboot+mybatis-plus+dynamic-datasource+Druid 多数据源 分布式事务

Springbootmybatis-plusdynamic-datasourceDruid 多数据源事务&#xff0c;分布式事务 文章目录 Springbootmybatis-plusdynamic-datasourceDruid 多数据源事务&#xff0c;分布式事务0.前言1. 基础介绍ConnectionFactoryAbstractRoutingDataSource 动态路由数据源的抽象类 Dyn…...

编程日记 2023/8/25 10:28:16

数据库云服务与Serverless

数据库云服务与Serverless 1. 技术分析 1.1 云数据库概述 云数据库是数据库服务的未来方向&#xff1a; 云数据库类型IaaS: 虚拟机部署PaaS: 托管服务Serverless: 无服务器云服务优势:弹性伸缩自动备份高可用性1.2 Serverless数据库 Serverless特点按需付费: 按使用量计费自动扩…...

编程新知 2026/5/20 7:16:46

免费图表数据提取神器：5分钟学会WebPlotDigitizer核心用法

免费图表数据提取神器&#xff1a;5分钟学会WebPlotDigitizer核心用法 【免费下载链接】WebPlotDigitizer Computer vision assisted tool to extract numerical data from plot images. 项目地址: https://gitcode.com/gh_mirrors/we/WebPlotDigitizer 还在为从科研图表…...

编程新知 2026/5/20 5:43:44

百度网盘直链解析：5分钟实现全速下载的完整指南

百度网盘直链解析&#xff1a;5分钟实现全速下载的完整指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 还在为百度网盘蜗牛般的下载速度而烦恼吗&#xff1f;今天我要向你…...

编程新知 2026/5/20 4:21:58

从LMS到BLMS：自适应滤波的‘批处理’思想如何解决工程中的收敛难题？

从LMS到BLMS&#xff1a;批处理思想如何重塑自适应滤波的工程实践 在实时信号处理领域&#xff0c;工程师们常常面临一个经典困境&#xff1a;算法响应速度与系统稳定性能之间的微妙平衡。想象一下&#xff0c;当你正在调试一套语音降噪系统时&#xff0c;每次麦克风接收到一个…...

编程新知 2026/5/20 3:25:56

VSCode + Modelsim 搭建Verilog开发环境：除了语法检查，还能这样玩？

VSCode与ModelSim深度集成&#xff1a;打造高效Verilog开发工作流 在数字电路设计领域&#xff0c;Verilog作为硬件描述语言的标准之一&#xff0c;其开发效率直接影响项目进度。传统开发模式中&#xff0c;工程师需要在多个工具间频繁切换——编辑器用于编码&#xff0c;Model…...

编程新知 2026/5/20 3:01:57

【开源首发】双脑 AI 工作流：强制模型隔离 + 省 60% Token，完美替代 CrewAI，支持本地 Ollama 免费跑

前言 大家好&#xff0c;我是一名大一的生物医药数据科学专业学生。最近半年一直在用 AI 做各种自动化工具&#xff0c;前前后后踩了 LangChain 和 CrewAI 的无数坑。 我发现所有主流 AI Agent 框架都有一个致命的设计盲区&#xff1a;它们默认相信 AI 能自己监督自己。但实际…...

编程新知 2026/5/20 2:29:07

枚举进阶：从常量集合到业务逻辑承载者的实战扩展技巧

1. 项目概述&#xff1a;从“能用”到“好用”的枚举进阶之路在软件开发中&#xff0c;枚举&#xff08;Enum&#xff09;是我们再熟悉不过的基础工具了。它把一组有限的、具名的常量组织在一起&#xff0c;让代码意图更清晰&#xff0c;避免“魔法数字”满天飞。但不知道你有没…...

编程新知 2026/5/20 0:50:45

OpenPLC Editor：零成本开启工业自动化编程的完整解决方案

OpenPLC Editor&#xff1a;零成本开启工业自动化编程的完整解决方案 【免费下载链接】OpenPLC_Editor 项目地址: https://gitcode.com/gh_mirrors/ope/OpenPLC_Editor 在工业自动化领域&#xff0c;PLC编程一直被视为专业工程师的专属技能&#xff0c;高昂的商业软件许…...

编程新知 2026/5/20 0:32:08

如何快速掌握ComfyUI智能图像分割：面向新手的完整指南

如何快速掌握ComfyUI智能图像分割&#xff1a;面向新手的完整指南 【免费下载链接】comfyui_segment_anything Based on GroundingDino and SAM, use semantic strings to segment any element in an image. The comfyui version of sd-webui-segment-anything. 项目地址: ht…...

编程新知 2026/5/19 23:41:58

告别抓包烦恼：用Mitmproxy + Python脚本自动解密App接口数据（保姆级实战）

移动端App接口数据解密实战&#xff1a;Mitmproxy与Python自动化逆向分析 在移动应用安全测试和逆向工程领域&#xff0c;App与服务器之间的加密通信一直是分析人员的重点攻克对象。当面对一个网络请求被深度加密的App时&#xff0c;传统抓包工具往往只能展示一堆"乱码&qu…...

编程新知 2026/5/19 22:21:41