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

简单丝的tab切换栏(html/CSS)

news 2026/3/27 23:48:05

在这里插入图片描述

#html

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>CSS实现左右滑动选项卡效果</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css"></head>
<body>
<!-- partial:index.partial.html -->
<div class="container"><div class="tabs"><input type="radio" id="radio-1" name="tabs" checked /><label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label><input type="radio" id="radio-2" name="tabs" /><label class="tab" for="radio-2">Development</label><input type="radio" id="radio-3" name="tabs" /><label class="tab" for="radio-3">Completed</label><span class="glider"></span></div>
</div>
<!-- partial --></body>
</html>

CSS样式

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
:root {--primary-color: #185ee0;--secondary-color: #e6eef9;
}*,
*:after,
*:before {box-sizing: border-box;
}body {font-family: "Inter", sans-serif;background-color: rgba(230, 238, 249, 0.5);
}.container {position: absolute;left: 0;top: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;
}.tabs {display: flex;position: relative;background-color: #fff;box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);padding: 0.75rem;border-radius: 99px;
}
.tabs * {z-index: 2;
}input[type=radio] {display: none;
}.tab {display: flex;align-items: center;justify-content: center;height: 54px;width: 200px;font-size: 1.25rem;font-weight: 500;border-radius: 99px;cursor: pointer;transition: color 0.15s ease-in;
}.notification {display: flex;align-items: center;justify-content: center;width: 2rem;height: 2rem;margin-left: 0.75rem;border-radius: 50%;background-color: var(--secondary-color);transition: 0.15s ease-in;
}input[type=radio]:checked + label {color: var(--primary-color);
}
input[type=radio]:checked + label > .notification {background-color: var(--primary-color);color: #fff;
}input[id=radio-1]:checked ~ .glider {transform: translateX(0);
}input[id=radio-2]:checked ~ .glider {transform: translateX(100%);
}input[id=radio-3]:checked ~ .glider {transform: translateX(200%);
}.glider {position: absolute;display: flex;height: 54px;width: 200px;background-color: var(--secondary-color);z-index: 1;border-radius: 99px;transition: 0.25s ease-out;
}@media (max-width: 700px) {.tabs {transform: scale(0.6);}
}

相关文章：

简单丝的tab切换栏(html/CSS)

#html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>CSS实现左右滑动选项卡效果</title><link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-res…...

编程日记 2023/10/4 5:19:24

LabVIEW开发带式谱感测技术

LabVIEW开发带式谱感测技术 如今&#xff0c;通过无线网络传输的数据量正在迅速增加&#xff0c;并导致频谱稀缺。超过数十亿的无线设备将被连接起来&#xff0c;并需要互联网接入。因此&#xff0c;无线电频谱管理方案的效率不足以授予对所有设备的访问权限。在频谱分配中&am…...

编程日记 2023/10/4 5:16:21

认识柔性数组

在C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员 限制条件是&#xff1a; 结构体中最后一个成员未知大小的数组 1.柔性数组的形式 那么我们怎样写一个柔性数组呢 typedef struct st_type {int i;int a[0];//柔性数组成员 }ty…...

编程日记 2023/10/4 5:15:20

熔断、限流、降级 —— SpringCloud Alibaba Sentinel

Sentinel 简介 Sentinel 是阿里中间件团队开源的&#xff0c;面向分布式服务架构的高可用流量防护组件&#xff0c;主要以流量为切入点&#xff0c;从限流、流量整形、熔断降级、系统负载保护、热点防护等多个维度来帮助开发者保障微服务的稳定性 Sentinel 提供了两个服务组件…...

编程日记 2023/10/4 5:12:18

python经典百题之反向输出数字

题目:输入一个整数&#xff0c;并将其反转后输出。 程序分析 我们需要对输入的整数进行反转&#xff0c;即将整数的数字反向排列。 方法1&#xff1a;使用字符串反转 解题思路 将整数转换为字符串&#xff0c;然后对字符串进行反转。 代码实现 def reverse_integer_usin…...

编程日记 2023/10/4 5:11:16

复习Day08：哈希表part01:242.有效的字母异位词、349. 两个数组的交集、1. 两数之和、160. 相交链表

之前的blog&#xff1a;https://blog.csdn.net/weixin_43303286/article/details/131765317 我用的方法是在leetcode再过一遍例题&#xff0c;明显会的就复制粘贴&#xff0c;之前没写出来就重写&#xff0c;然后从拓展题目中找题目来写。辅以Labuladong的文章看。然后刷题不用…...

编程日记 2023/10/4 5:10:15

用 Pytest+Allure 生成漂亮的 HTML 图形化测试报告

本篇文章将介绍如何使用开源的测试报告生成框架 Allure 生成规范、格式统一、美观的测试报告。 通过这篇文章的介绍&#xff0c;你将能够&#xff1a; 将 Allure 与 Pytest 测试框架相结合&#xff1b; 如何定制化测试报告内容 执行测试之后&#xff0c;生成 Allure 格式的测…...

编程日记 2023/10/4 5:09:14

Python字符串索引解码乱码谜题

输入数行“数字字母”字符组成的乱码字符串&#xff0c;根据谜题规则解码出乱码字符串中隐藏的单词信息。 (本笔记适合熟悉python字符串索引操作的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”…...

编程日记 2023/10/4 5:08:13

协议栈——收发数据（拼接网络包，自动重发，滑动窗口机制）

目录 协议栈何时发送数据&#xff5e; 数据长度 IP模块的分片功能 发送频率 网络包序号&#xff5e;利用syn拼接网络包ack确认网络包完整 确定偏移量 服务器ack确定收到数据总长度 序号作用 双端告知各自序号 协议栈自动重发机制 大致流程 ack等待时间如何调整 是…...

编程日记 2023/10/4 5:07:12

传输层协议——TCP、UDP

目录 1、UDP 协议&#xff08;用户数据报协议&#xff09; 协议特点 报文首部格式 2、TCP 协议&#xff08;传输控制协议&#xff09; 协议特点 报文首部格式 TCP连接建立时的三次握手 TCP拆除连接的四次挥手 TCP的流量控制 TCP的拥塞控制 3、传输层端口号 三类端口…...

编程日记 2023/10/4 5:06:11

优化您的Spring应用程序：缓存注解的精要指南

优化您的Spring应用程序&#xff1a;缓存注解的精要指南 前言详细说明1. Cacheable&#xff1a;2. CacheEvict&#xff1a;3. CachePut&#xff1a;4. Caching&#xff1a;5. CacheConfig&#xff1a; 项目中的实现前提使用 前言 当我们构建和运行Spring应用程序时&#xff0c…...

编程日记 2023/10/4 5:05:10

Java之原子性问题的解决

2. 原子性 2.1 volatile-问题 代码分析 : package com.itheima.myvolatile; ​ public class Demo {public static void main(String[] args) {MyThread1 t1 new MyThread1();t1.setName("小路同学");t1.start(); ​MyThread2 t2 new MyThread2();t2.setName(&q…...

编程日记 2023/10/4 5:04:09

实时目标检测：基于YOLOv3和OpenCV的摄像头应用

一、前言 随着人工智能和计算机视觉技术的不断发展，目标检测成为了智能监控、自动驾驶、机器人等领域的关键技术之一。实时目标检测更是对系统的反应速度和准确度提出了更高的要求。本文介绍使用OpenCV和YOLOv3实现实时目标检测的方法，演示如何使用OpenCV调用YOLOv3模型进行…...

编程日记 2023/10/4 5:03:08

【软考】4.2 关系代数

《 关系代数 》 表和表之间的逻辑运算 笛卡尔积&#xff1a;S1 x S2 投影&#xff1a;π&#xff1b;选择某一列&#xff08;属性&#xff09;&#xff1b;一个关系R的投影操作结果也是一个关系&#xff0c;记作Πa&#xff0c;它由从关系R中选出的A列元素构成&#xff1b;选择…...

编程日记 2023/10/4 5:00:05

STM32F4学习笔记读取芯片UID和MAC地址

一、简介 在嵌入式设备开发过程中有时会需要为设备设置唯一的ID用以标识设备唯一&#xff0c;比如要求同一总线上的所有设备ID不能重复&#xff0c;要求设备具体唯一的MAC地址等等。每个STM32微控制器都自带一个96位的唯一ID&#xff0c;这个ID在任何情况下都是唯一且不允许修…...

编程日记 2023/10/4 4:59:04

webpack优化策略

这三点是webpack优化策略的一部分&#xff0c;具体解释如下&#xff1a; 优化正则匹配&#xff08;Test&#xff09;&#xff1a;在webpack的配置中&#xff0c;test属性是一个正则表达式&#xff0c;用于匹配需要应用该loader的文件的扩展名。在您提供的代码中&#xff0c;te…...

编程日记 2023/10/4 4:58:04

讲讲项目里的仪表盘编辑器（三）布局组件

布局容器处理 看完前面两章的讲解&#xff0c;我们对仪表盘系统有了一个大概的理解。接着我们讲讲更深入的应用。 上文讲解的编辑器只是局限于平铺的组件集。而在编辑器中&#xff0c;还会有一种组件是布局容器。它允许其他组件拖拽进入在里面形成自己的一套布局。典型的有分页…...

编程日记 2023/10/4 4:57:03

Linux- 后台运行符、nohup、disown

& &在Unix-like的操作系统&#xff08;如Linux和macOS&#xff09;的shell中&#xff0c;特别是在Bash这样的shell中&#xff0c;经常用作后台运行符号。让我们深入了解一下其功能和用法。 &作为后台运行符号&#xff1a; 基本用法: 当我们在一个命令或者一组命令…...

编程日记 2023/10/4 4:55:00

开发过程教学——交友小程序

交友小程序 1. 我的基本信息2. 我的人脉2.1 我的关注2.2 我的粉丝 3. 我的视频4. 我的相册 特别注意&#xff1a;由于小程序分包限制2M以内&#xff0c;所以要注意图片和视频的处理。 1. 我的基本信息 数据库表&#xff1a; 我的基本信息我的登录退出记录我的登录状态&#x…...

编程日记 2023/10/4 4:53:59

正则表达式 Regular Expression学习

该文章内容为以下视频的学习笔记&#xff1a; 10分钟快速掌握正则表达式_哔哩哔哩_bilibili正则表达式在线测试工具&#xff1a;https://regex101.com/, 视频播放量 441829、弹幕量 1076、点赞数 19330、投硬币枚数 13662、收藏人数 26242、转发人数 2768, 视频作者 奇乐编程学…...

编程日记 2023/10/4 4:52:59

OpenClaw 的对话系统是否支持对话流程的可视化编辑？如何定义状态机？

关于OpenClaw对话系统是否支持对话流程的可视化编辑&#xff0c;目前公开的技术文档和社区讨论中并没有明确提及这一功能。从技术实现的角度来看&#xff0c;这类系统通常更侧重于底层对话状态管理和自然语言理解引擎的构建&#xff0c;而非面向产品经理或非技术人员的可视化编…...

编程新知 2026/3/27 22:12:05

力扣原题《有效的数独游戏》，纯手搓，已验证

请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 注…...

编程新知 2026/3/27 22:08:04

用快马AI快速原型设计：9·1免费素材库管理界面十分钟搭建指南

最近在帮朋友设计一个免费素材库的管理界面&#xff0c;需求是要快速搭建一个能展示"91免费素材"的网页应用。作为一个经常需要验证设计想法的开发者&#xff0c;我发现用InsCode(快马)平台可以大大缩短原型开发时间。下面分享下我是如何在十分钟内完成这个素材库管理…...

编程新知 2026/3/27 21:15:47

智能汽车远程诊断怎么玩？深入聊聊DoIP协议里的那些‘暗号’：VIN、EID、激活线与安全

智能汽车远程诊断的通信密码&#xff1a;DoIP协议中的VIN、EID与安全设计解析 当你的爱车亮起故障灯时&#xff0c;4S店技师只需轻点平板电脑&#xff0c;就能远程读取车辆状态——这背后是车载以太网诊断协议(DoIP)在发挥作用。不同于传统CAN总线诊断&#xff0c;基于IP网络的…...

编程新知 2026/3/27 20:57:42

7大应用场景：如何用计算机视觉技术彻底改变足球比赛分析？

7大应用场景&#xff1a;如何用计算机视觉技术彻底改变足球比赛分析&#xff1f; 【免费下载链接】sports computer vision and sports 项目地址: https://gitcode.com/gh_mirrors/sp/sports 在当今数字化体育时代&#xff0c;足球场精准定位技术正以前所未有的方式改变…...

编程新知 2026/3/27 19:59:04

单一模型可能涌现不出超级智能，但 Agent 协作体却极有可能。

当 AI 把产品能力拉齐&#xff0c;注意力才是唯一的护城河 你有没有这种感觉&#xff1f;2025 年底&#xff0c;用 AI 一键生成一个完整 App 已经不是什么新闻&#xff0c;Vibe Coding 让普通开发者一天就能上线一个产品。可产品做出来了&#xff0c;下载量却像石沉大海&#x…...

编程新知 2026/3/27 19:28:53

Python子解释器隔离全解密（从PyThreadState到_PyInterpreterState）：20年源码级剖析，首次公开CPython内部隔离边界图谱

第一章&#xff1a;Python子解释器隔离的演进脉络与核心挑战Python长期以来依赖全局解释器锁&#xff08;GIL&#xff09;保障线程安全&#xff0c;但这也限制了真正的并行执行能力。为突破这一瓶颈&#xff0c;CPython自3.12起正式引入子解释器&#xff08;subinterpreters&am…...

编程新知 2026/3/27 18:58:48

python-flask-djangol框架的婚恋相亲交友网站

目录技术选型与框架对比核心功能模块设计数据库模型示例&#xff08;Django ORM&#xff09;安全防护措施部署方案开发路线图项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与框架对比 Flask&#xff1a;轻量级框架&a…...

编程新知 2026/3/27 18:48:38

用MATLAB复现高斯光束通过双透镜系统：从ABCD矩阵到可视化光斑演变

用MATLAB复现高斯光束通过双透镜系统&#xff1a;从ABCD矩阵到可视化光斑演变 在光学工程和激光技术领域&#xff0c;理解高斯光束在复杂光学系统中的传输特性至关重要。本文将带您一步步实现高斯光束通过双透镜系统的完整MATLAB仿真&#xff0c;从ABCD矩阵理论推导到动态光斑演…...

编程新知 2026/3/27 18:02:06

WebGLInput：重构Unity WebGL输入体验的革命性方案

WebGLInput&#xff1a;重构Unity WebGL输入体验的革命性方案 【免费下载链接】WebGLInput IME for Unity WebGL 项目地址: https://gitcode.com/gh_mirrors/we/WebGLInput 在Unity WebGL开发中&#xff0c;输入法支持一直是开发者面临的核心挑战之一。WebGLInput项目通…...

编程新知 2026/3/27 16:05:17