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

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

news 2026/3/30 8:56:28

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

【注】当时写的时候仅考虑了 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

Arctic高性能数据存储：金融时间序列数据库的完整指南

Arctic高性能数据存储&#xff1a;金融时间序列数据库的完整指南 【免费下载链接】arctic High performance datastore for time series and tick data 项目地址: https://gitcode.com/gh_mirrors/ar/arctic Arctic是一个专为金融时间序列和 tick 数据设计的高性能数据…...

编程新知 2026/3/30 7:37:05

英语从句全攻略：名词性、定语、副词性从句一网打尽（含易错点分析）

英语从句全攻略&#xff1a;名词性、定语、副词性从句一网打尽&#xff08;含易错点分析&#xff09; 当你读到一篇地道的英文文章时&#xff0c;是否曾被那些"套中套"的句子结构难住&#xff1f;从句就像英语语法中的俄罗斯套娃&#xff0c;层层嵌套却暗藏规律。作为…...

编程新知 2026/3/30 6:22:50

GME-Qwen2-VL-2B-Instruct部署详解：CUDA版本兼容性与FP16加载验证

GME-Qwen2-VL-2B-Instruct部署详解&#xff1a;CUDA版本兼容性与FP16加载验证 1. 项目概述 GME-Qwen2-VL-2B-Instruct是一个专为图文匹配度计算优化的多模态模型工具。它解决了原生调用中常见的打分不准问题&#xff0c;通过本地化部署实现了高效、安全的图文检索功能。 1.1…...

编程新知 2026/3/30 5:32:22

jsoncpp实战：从配置文件解析到网络数据交换，我的C++项目数据管理方案

JSONCPP实战&#xff1a;从配置文件解析到网络数据交换的C数据管理方案 在C后端服务开发中&#xff0c;JSON数据格式因其轻量级和易读性成为配置文件和API通信的首选。作为从业多年的C开发者&#xff0c;我发现jsoncpp库在项目中的灵活运用能显著提升开发效率。本文将分享我在实…...

编程新知 2026/3/30 4:35:47

Docker容器中运行Windows系统的突破性企业级解决方案：架构解析与部署实践

Docker容器中运行Windows系统的突破性企业级解决方案&#xff1a;架构解析与部署实践 【免费下载链接】windows Windows inside a Docker container. 项目地址: https://gitcode.com/GitHub_Trending/wi/windows 在当今云原生和容器化技术快速发展的背景下&#xff0c;如…...

编程新知 2026/3/30 4:03:22

华为交换机－跨Vlan通信的实战配置指南

1. 华为交换机跨VLAN通信的核心原理 第一次接触跨VLAN通信时&#xff0c;我也被那些专业术语搞得一头雾水。直到把整个流程拆解成生活场景&#xff0c;才真正理解其中的奥妙。想象一下&#xff0c;VLAN就像公司里的不同部门&#xff0c;财务部、技术部、市场部各自在独立的办公…...

编程新知 2026/3/30 2:56:41

EF Core与SQLite实战：从零构建轻量级数据库应用

1. 为什么选择EF Core与SQLite这对黄金组合 如果你正在开发一个需要本地数据存储的移动应用或桌面小工具&#xff0c;SQLite绝对是你的首选数据库。这个只有几百KB的小家伙&#xff0c;不需要任何服务器配置&#xff0c;直接读写单个文件就能完成所有数据库操作。而EF Core作为…...

编程新知 2026/3/30 2:06:27

STM32串口环形队列实现与优化

## 1. STM32串口环形队列实现方案### 1.1 环形队列数据结构设计环形队列&#xff08;Ring Buffer&#xff09;是嵌入式系统中处理串口数据流的经典方案&#xff0c;其核心数据结构定义如下&#xff1a;c #define RING_BUFF_SIZE 256 // 根据实际需求调整缓冲区大小typedef str…...

编程新知 2026/3/30 1:48:18

从LED驱动到充电桩：拆解PFC双环控制在5个真实产品里的不同玩法

从LED驱动到充电桩&#xff1a;拆解PFC双环控制在5个真实产品里的不同玩法 当你在深夜加班时&#xff0c;LED驱动电源的稳定输出让办公室保持明亮&#xff1b;当你为电动车充电时&#xff0c;充电桩高效转换着电网能量&#xff1b;这些场景背后都离不开一个关键技术——PFC双环…...

编程新知 2026/3/30 1:40:17

从0到1：Fugu14完美越狱工具实战指南

从0到1&#xff1a;Fugu14完美越狱工具实战指南 【免费下载链接】Fugu14 Fugu14 is an untethered iOS 14.3-14.5.1 jailbreak 项目地址: https://gitcode.com/gh_mirrors/fu/Fugu14 iOS 14.3-14.5.1设备如何突破系统限制&#xff1f;Fugu14作为一款强大的完美越狱工具&…...

编程新知 2026/3/30 1:28:07