前端html js css 基础巩固3
一个这样的首页 滑动显示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');:root {--left-bg-color: rgba(87, 84, 236, 0.7);--right-bg-color: rgba(43, 43, 43, 0.8);--left-btn-hover-color: rgba(87, 84, 236, 1);--right-btn-hover-color: rgba(28, 122, 28, 1);--hover-width: 75%;--other-width: 25%;--speed: 1000ms;}* {box-sizing: border-box;}body {font-family: 'Roboto', sans-serif;height: 100vh;overflow: hidden;margin: 0;}h1 {font-size: 3.5rem;color: #fff;position: absolute;left: 50%;top: 20%;transform: translateX(-50%);white-space: nowrap;}.btn {position: absolute;display: flex;align-items: center;justify-content: center;left: 50%;top: 40%;transform: translateX(-50%);text-decoration: none;color: #fff;border: #fff solid 0.2rem;font-size: 1rem;font-weight: bold;text-transform: uppercase;width: 15rem;padding: 1.5rem;}.split.left .btn:hover {background-color: var(--left-btn-hover-color);border-color: var(--left-btn-hover-color);}.split.right .btn:hover {background-color: var(--right-btn-hover-color);border-color: var(--right-btn-hover-color);}.container {position: relative;width: 100%;height: 100%;background: #333;}.split {position: absolute;width: 50%;height: 100%;overflow: hidden;}.split.left {left: 0;background: url('ps.jpg');background-repeat: no-repeat;background-size: cover;}.split.left::before {content: '';position: absolute;width: 100%;height: 100%;background-color: var(--left-bg-color);}.split.right {right: 0;background: url('xbox.jpg');background-repeat: no-repeat;background-size: cover;}.split.right::before {content: '';position: absolute;width: 100%;height: 100%;background-color: var(--right-bg-color);}.split.right,.split.left,.split.right::before,.split.left::before {transition: all var(--speed) ease-in-out;}.hover-left .left {width: var(--hover-width);}.hover-left .right {width: var(--other-width);}.hover-right .right {width: var(--hover-width);}.hover-right .left {width: var(--other-width);}@media (max-width: 800px) {h1 {font-size: 2rem;top: 30%;}.btn {padding: 1.2rem;width: 12rem;}}</style>
</head><body><div class="container"><div class="split left"><h1>Playstation 5</h1><a href="#" class="btn">Buy Now</a></div><div class="split right"><h1>XBox Series X</h1><a href="#" class="btn">Buy Now</a></div></div><script>const left = document.querySelector('.left')const right = document.querySelector('.right')const container = document.querySelector('.container')left.addEventListener('mouseenter', () => container.classList.add('hover-left'))left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))right.addEventListener('mouseenter', () => container.classList.add('hover-right'))right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))</script>
</body></html>以上是全部的代码
相关文章：
前端html js css 基础巩固3
一个这样的首页 滑动显示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>&l…...
如在下载自己的需要的rmp包呢
下载地址：https://pkgs.org/和https://rpmfind.net/linux/rpm2html/search.php 根基自己的需要进行下载使用。...
Android TextView实现一串文字特定几个字改变颜色
遇到一个需求，让Android端实现给定一个字符串指定下标的几个字颜色与其他字颜色不一致。 主要是用ForegroundColorSpan这个API来传入颜色值，用SpannableString来设置指定索引下标的字的颜色值。 这里通过给定一个输入文字描述框，要求输入指定…...
桃子叶片病害分类检测数据集（猫脸码客 第221期）
桃子叶片病害分类检测数据集 一、引言 桃子作为世界上广泛种植的果树之一，其叶片的健康状况直接关系到果实的产量和品质。然而，桃子叶片易受多种病害的侵袭，这些病害不仅影响叶片的光合作用，还可能导致果实减产、品质下降&#…...
Vue--》掌握自定义依赖引入的最佳实践
在现代前端开发中，vue凭借其灵活性和高效性，已成为开发者们的宠儿，然而随着项目的复杂度提升，如何高效地管理和引入依赖，尤其是自定义引入依赖，成为了许多开发者面临的一大挑战。无论是为了优化加载速度&am…...
repo 命令大全详解（第十四篇 repo overview）
repo overview 命令用于显示当前项目的概览信息，帮助用户快速了解项目的状态和分支信息。 参数分类及解释 基本参数 [--current-branch]: 可选，仅考虑已检出的分支。 示例: repo overview --current-branch [<project>...]: 可选，指定…...
【设计模式】深入理解Python中的抽象工厂设计模式
深入理解Python中的抽象工厂设计模式 设计模式是软件开发中解决常见问题的经典方案，而**抽象工厂模式（Abstract Factory Pattern）**是其中非常重要的一种创建型模式。抽象工厂模式的主要作用是提供一个接口，创建一系列相关或依赖…...
网站建设完成后，多久需要升级迭代一次
网站建设完成后，一般每隔几个月就会进行一次迭代升级。以下是关于网站迭代周期和原因的具体分析： 更新频率：网站在建设完成后，一般每隔几个月就会进行一次迭代升级。这种周期性的更新有助于保持网站的现代感和竞争力。更新目的&a…...
一个整型数组里除了两个数字之外，其他的数字都出现了两次。请写程序找出这两个只出现一次的数字
这里写目录标题 问题详情分析问题代码展示 问题详情 剑指 Offer 56： 一个整型数组 nums 里除两个数字之外，其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n)，空间复杂度是O(1)。 示例： 输入&a…...
Vue基本学习2
Vue使用方法 <script src"js/vue.js"></script><script>/*** Mode1:数据模型，负责数据存储(后台业务逻辑/数据库)* View:视图层，负责页面展示(HTML)* View Model(Vue):负责业务逻辑处理(比如Ajax请求等)* view 与 Model 数…...
创作者等级权益说明
创作者等级权益说明 一、如何查看创作者等级权益二、等级权益对照表 一、如何查看创作者等级权益 step1：鼠标移动至头像，显示如下图的浮窗 step2：点击我的等级，即跳转到创作者等级权益页面 图1.1 我的等级 图1.2 创作者等级权益…...
基于SpringBoot+Vue+uniapp微信小程序的校园反诈骗微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念，提供了一套默认的配置，让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…...
统一修改UI库样式的几种方式
统一修改element组件库样式的几种方式。主题 | Element Plus 通过css变量设置 【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式:root {--hc-text-color-placeholder: #5f84a2;--hc-text-color-regular: #fff;--hc-text-color-primary: #fff;--hc-bg-c…...
ICM20948 DMP代码详解（88）
接前一篇文章：ICM20948 DMP代码详解（87） 本回继续对inv_convert_androidSensor_to_control函数进行解析。为了便于理解和回顾，再次贴出inv_convert_androidSensor_to_control函数源码，在EMD-Core\sources\Invn\Devices\Drivers\ICM20948\Icm20948DataBaseControl.c中，如下…...
字节跳动实习生投毒自家大模型细节曝光 影响到底有多大？
10月19日，字节跳动大模型训练遭实习生攻击一事引发广泛关注。据多位知情人士透露，字节跳动某技术团队在今年6月遭遇了一起内部技术袭击事件，一名实习生因对团队资源分配不满，使用攻击代码破坏了团队的模型训练任务。 据悉…...
【路径规划】蚁群算法优化bp神经网络回归预测
摘要 本文提出了一种基于蚁群算法（ACO）优化 BP 神经网络的回归预测方法，用于路径规划中的预测问题。通过蚁群算法优化神经网络的初始权值和阈值，提高了神经网络的训练效率和预测精度。实验结果表明，该方法能够有效提升…...
如何在OceanBase中新增系统变量及应用实践
因为系统变量涉及复杂的工程文件，为防止新增变量操作对软件系统的潜在影响，OceanBase为多数开发者设计了一套高效的编程框架。此框架允许开发者在新增及使用系统变量时，仅需专注于变量定义的细节。具体来说，通过运行一个Python脚本…...
Olap数据处理
一、OLAP 是什么 1. OLAP的定义 OLAP（Online Analytical Processing，联机分析处理）是一种软件技术，它主要专注于复杂的分析操作，帮助分析人员、管理人员或执行人员从多角度对信息进行快速、一致、交互地存取…...
Tailwind Starter Kit 一款极简的前端快速启动模板
Tailwind Starter Kit 是基于TailwindCSS实现的一款开源的、使用简单的极简模板扩展。会用Tailwincss就可以快速入手使用。Tailwind Starter Kit 是免费开源的。它不会在原始的TailwindCSS框架中更改或添加任何CSS。它具有多个HTML元素，并附带了ReactJS、Vue和Angul…...
物联网智能家居环境监测系统
作为物联网工程专业的学生，做一个智能家居非常重要，大家是这个专业的同学可以了解一下，不是这个专业的同学也可以了解一下，毕设可以参考哦。 稍微简单的了解（仅对代码可以自己写的同学） 对于一个零基础的物…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。 尤其让我…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...