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

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

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

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

【论文阅读】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…...

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

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

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

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

【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.标准数据…...

leetcode刷题之283:移动零

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

【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. …...

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

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

基于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 …...

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

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

数据库操作语句

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

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

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

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 上下文学习 …...

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外部链接内部链接 环境准备 首先你需要一个…...

Ansible Playbook 常用变量

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

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…...

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&…...

Eureka:CAP原则及对比Zookeeper

...

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

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

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

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

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...