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

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

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

相关文章

如何使用CSS实现一个瀑布流布局?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现瀑布流布局⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚…

SQL助你面大厂(窗口函数)

在面试过程中窗口函数的应用可谓是数不胜数&#xff0c;前提你要知道什么是窗口函数&#xff0c;最常用的窗口函数有哪些&#xff1f;语法是什么&#xff1f;分别用的场景是什么&#xff1f;今天会以这三个问题开始我们今天的学习 什么是窗口函数&#xff1f; 所谓的窗口函数就…

相关搜索引擎常用搜索语法(Google hacking语法和FOFA语法)

一&#xff1a;Google Hack语法 Google Hacking原指利用Google搜索引擎搜索信息来进行入侵的技术和行为&#xff0c;现指利用各种搜索引擎并使用一些高级的搜索语法来搜索信息。既利用搜索引擎强大的搜索功能&#xff0c;在在浩瀚的互联网中搜索到我们需要的信息。 &#xff0…

Qt creator之对齐参考线——新增可视化缩进功能

Qt creator随着官方越来越重视&#xff0c;更新频率也在不断加快&#xff0c;今天无意中发现qt creator新版有了对齐参考线&#xff0c;也称可视化缩进Visualize Indent&#xff0c;默认为启用状态。 下图为旧版Qt Creator显示设置栏&#xff1a; 下图为新版本Qt Creator显示设…

提升研发效能的开发工具

一、前言 随着企业对创新和效率的追求不断升级&#xff0c;研发效能成为了炙手可热的概念。各大公司纷纷成立专门的团队&#xff0c;以提升研发效能为重要目标。本文将从研发人员的视角出发&#xff0c;结合自身的深度思考&#xff0c;探讨研发效能的相关概念&#xff0c;共同寻…

云服务器-Docker容器-系统搭建部署

一、引言 最近公司在海外上云服务器&#xff0c;作者自己也搞了云服务器去搭建部署系统&#xff0c;方便了解整体架构和系统的生命周期&#xff0c;排查解决问题可以从原理侧进行分析实验。虽然用的云不是同一个&#xff0c;但是原理都是相通的。 二、选型 作者选用的是腾讯云…

无涯教程-PHP - File 函数

文件系统功能用于访问和操纵文件系统&#xff0c;PHP为您提供了操纵文件的所有功能。 运行时配置 这些功能的行为受php.ini中的设置影响。 NameDefaultChangeableChangelogallow_url_fopen"1"PHP_INI_ALLPHP_INI_ALL in PHP < 4.3.4. PHP_INI_SYSTEM in PHP &l…

CentOS系统环境搭建(十七)——elasticsearch设置密码

centos系统环境搭建专栏&#x1f517;点击跳转 elasticsearch设置密码 没有密码是很不安全的一件事&#x1f62d; 文章目录 elasticsearch设置密码1.设置密码2.登录elasticsearch3.登录kibana4.登录elasticsearch-head 1.设置密码 关于Elasticsearch的安装请看CentOS系统环境搭…

记一次从Redis弱口令到RCE

Fscan扫描网段发现了一些开启了6379的服务器&#xff0c;逐个尝试了下未授权&#xff0c;然后尝试了下爆破 hydra爆破redis hydra -P [字典目录] redis://xxx.xxx.xxx.xxx结果还真让爆出来一个 得到密码后&#xff0c;连接上去&#xff0c;这里用的是Another Redis Desktop M…

OpenCV图片校正

OpenCV图片校正 背景几种校正方法1.傅里叶变换 霍夫变换 直线 角度 旋转3.四点透视 角度 旋转4.检测矩形轮廓 角度 旋转参考 背景 遇到偏的图片想要校正成水平或者垂直的。 几种校正方法 对于倾斜的图片通过矫正可以得到水平的图片。一般有如下几种基于opencv的组合方…

matlab 检测点云中指定尺寸的矩形平面

目录 一、概述1、算法概述2、主要函数二、代码示例三、结果展示四、参数解析输入参数名称-值对应参数输出参数五、参考链接一、概述 1、算法概述 detectRectangularPlanePoints:检测点云中指定尺寸的矩形平面 <

解决爬虫上下行传输效率问题的实用指南

嗨&#xff0c;大家好&#xff01;作为一名专业的爬虫程序员&#xff0c;我们经常会面临上下行传输效率低下的问题。在处理大量数据时&#xff0c;如果传输效率不高&#xff0c;可能会导致爬虫任务速度慢&#xff0c;甚至中断。今天&#xff0c;我将和大家分享一些解决爬虫上下…

Mysql的索引详解

零. 索引类型概述 1. 实际开发中使用的索引种类 主键索引唯一索引普通索引联合索引全文索引空间索引 2. 索引的格式类型 BTree类型Hash类型FullText类型&#xff08;全文索引)RTree类型&#xff08;空间索引) MySQL 的索引方法&#xff0c;主要包括 BTREE 和 HASH。 顾名思…

部门来了个测试开发,听说是00后,上来一顿操作给我看呆了...

公司新来了个同事&#xff0c;听说大学是学的广告专业&#xff0c;因为喜欢IT行业就找了个培训班&#xff0c;后来在一家小公司实习半年&#xff0c;现在跳槽来我们公司。来了之后把现有项目的性能优化了一遍&#xff0c;服务器缩减一半&#xff0c;性能反而提升4倍&#xff01…

不含数字的webshell绕过

异或操作原理 1.首先我们得了解一下异或操作的原理 在php中&#xff0c;异或操作是两个二进制数相同时&#xff0c;异或(相同)为0&#xff0c;不同为1 举个例子 A的ASCII值是65&#xff0c;对应的二进制值是0100 0001 的ASCII值是96&#xff0c;对应的二进制值是 0110 000…

【STM32+ESP8266上云连载①】给ESP8266烧录AT固件

文章目录 一、给NodeMCU烧录固件1.1硬件准备1.2软件准备1.3AT固件下载1.4配置设置1.5开始烧录 二、给ESP8266-01S烧录固件2.1硬件准备2.2AT固件下载2.3连线2.4烧录配置 三、给ESP-12E/F/S单片烧录固件四、指令测试4.1HTTP测试4.2MQTT测试 我在使用ESP8266的时候遇到了一些问题&…

语法篇--XML数据传输格式

一、XML概述 1.1简介 XML&#xff0c;全称为Extensible Markup Language&#xff0c;即可扩展标记语言&#xff0c;是一种用于存储和传输数据的文本格式。它是由W3C&#xff08;万维网联盟&#xff09;推荐的标准&#xff0c;广泛应用于各种系统中&#xff0c;如Web服务、数据…

jmeter-results-detail-report_new.xsl文件设置dateReport

<!-- Defined parameters (overrideable) <td bgcolor"#ff00ff"> --> <xsl:param name"showData" select"y"/> <xsl:param name"titleReport" select"测试报告"/> <xsl:param name&…

【UniApp开发小程序】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面日期格式化 后端收藏ControllerServicemapper 评论ControllerServiceMapper 商品Controller 阅读Service 界面效果 【说明】 界面中商品的图片来源于闲鱼&#xff0c;若侵权请联系删除 【商品详情】 【评论】 界面实现 工具js 该工…

Spring中循环依赖解决方案

循环依赖 循环依赖是Spring框架中常见的问题之一&#xff0c;当两个或多个类相互引用对方时&#xff0c;就会出现循环依赖的情况。这种情况下&#xff0c;Spring框架无法确定哪个类应该先实例化和初始化&#xff0c;从而导致异常。常见的解决方法有&#xff1a;构造函数注入、s…