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

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

news 2025/8/26 17:17:41

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

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

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/8/15 23:06:41

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/8/9 13:14:15

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/8/5 6:47:24

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/8/25 13:52:16

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/8/22 4:32:31

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/6/17 3:19:01

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/8/22 5:18:11

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/8/18 11:00:46

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/7/11 0:32:35

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/8/22 5:38:04