前端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…...
物联网智能家居环境监测系统
作为物联网工程专业的学生，做一个智能家居非常重要，大家是这个专业的同学可以了解一下，不是这个专业的同学也可以了解一下，毕设可以参考哦。 稍微简单的了解（仅对代码可以自己写的同学） 对于一个零基础的物…...
零基础入门：Qwen3-ASR-1.7B语音识别Docker部署全流程
零基础入门：Qwen3-ASR-1.7B语音识别Docker部署全流程 1. 为什么选择Docker部署语音识别服务 想象一下，你刚学会使用Qwen3-ASR-1.7B这个强大的语音识别模型，在本地电脑上测试效果非常棒。但当你想把它部署到服务器上时，突然发现各…...
PyTorch 2.8模型可视化艺术：使用Visio绘制神经网络架构图
PyTorch 2.8模型可视化艺术：使用Visio绘制神经网络架构图 1. 为什么需要专业的模型可视化 在深度学习项目中，一个清晰直观的模型架构图往往比千言万语更有说服力。想象一下，当你需要向团队展示新设计的Transformer变体，或者在论…...
7天掌握LAV Filters：构建终极DirectShow媒体解码方案完全指南
7天掌握LAV Filters：构建终极DirectShow媒体解码方案完全指南 【免费下载链接】LAVFilters LAV Filters - Open-Source DirectShow Media Splitter and Decoders 项目地址: https://gitcode.com/gh_mirrors/la/LAVFilters LAV Filters是一套基于FFmpeg的开源…...
AI模型推理服务化：基于StructBERT构建高并发微服务架构
AI模型推理服务化：基于StructBERT构建高并发微服务架构 最近几年，AI模型从实验室走向生产环境的速度越来越快。很多团队都遇到过这样的场景：好不容易训练出一个效果不错的模型，比如一个文本分类或情感分析的模型，但当…...
Java学习——数据类型
目录 一、概述 二、基本数据类型 1、数值型 2、字符型 3、布尔型 三、引用数据类（后期补充） 1、类 2、接口 3、数组 4、枚举 5、注解 四、数据类型转换 1、概述 2、隐式转换（自动类型转换） 3、显式转换（…...
SEO 项目如何进行链接建设_SEO 项目如何进行品牌形象优化
SEO 项目如何进行链接建设_SEO 项目如何进行品牌形象优化 SEO 项目如何进行链接建设 在当今的互联网时代，网站的流量和排名直接关系到企业的发展和市场竞争力。其中，搜索引擎优化（SEO）是提升网站在搜索引擎中的排名的重要手段。…...
SuperDuperDB终极指南：如何用你喜爱的工具构建革命性AI代理应用
SuperDuperDB终极指南：如何用你喜爱的工具构建革命性AI代理应用 【免费下载链接】superduperdb Superduper: End-to-end framework for building custom AI applications and agents. 项目地址: https://gitcode.com/gh_mirrors/su/superduperdb SuperDuperD…...
Excel实战：手把手教你用条件格式和分类汇总分析个人开支（计算机二级考点全覆盖）
Excel实战：手把手教你用条件格式和分类汇总分析个人开支（计算机二级考点全覆盖） 在个人财务管理中，Excel是最基础也最强大的工具之一。无论是备考计算机二级的考生，还是希望提升工作效率的职场人士，掌握Exc…...
SEO 究竟是什么_外链对SEO重要吗_如何建设外链
SEO 究竟是什么_外链对SEO重要吗?如何建设外链 在当今互联网时代，网站的流量和排名直接关系到企业的收入和市场竞争力。而搜索引擎优化（SEO）作为网站运营的核心技术之一，无疑是每一个网站经营者都不能忽视的重要环节。本文将深入…...
瑞芯微Linux驱动工程师面试技术要点解析
1. 瑞芯微Linux驱动工程师面试全解析 作为一名在嵌入式Linux领域摸爬滚打多年的老司机，今天想和大家分享一份瑞芯微社招Linux驱动工程师的真实面经。不同于网上那些泛泛而谈的面试技巧，这份面经完全基于实际项目经验展开，可以说是"写什么…...