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

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

news 2026/5/12 15:28:24

在这里插入图片描述

#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项目中配置Taotoken作为Agent的模型供应商

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在OpenClaw项目中配置Taotoken作为Agent的模型供应商 基础教程类&#xff0c;指导在虚拟机环境使用OpenClaw框架开发AI Agent的用户…...

编程新知 2026/5/12 14:24:06

CV论文工业落地避坑指南：从复现到部署的四大过滤维度

1. 这不是论文清单&#xff0c;而是一份“CV研究者晨间速读指南” 如果你每天打开arXiv、CVPR官网或Twitter刷到一堆标题带“Vision Transformer”“Diffusion”“Multimodal Alignment”的新论文&#xff0c;却总在摘要第一句就卡住——“We propose a novel hierarchical tok…...

编程新知 2026/5/12 13:26:38

深度解构：指纹浏览器底层隔离与Python高并发RPA，如何重塑电商矩阵自动化架构？

大家好&#xff0c;我是林焱&#xff0c;一名专注电商底层业务逻辑与 RPA 自动化架构定制的独立开发者。 在 CSDN 的各个技术板块中&#xff0c;关于爬虫与反爬虫、并发调度、以及客户端架构的讨论一直是热点。而将这些技术综合应用到极致的领域之一&#xff0c;就是当下极度内…...

编程新知 2026/5/12 13:11:57

实战案例：使用tsne-cuda加速CIFAR-10数据集的高维可视化分析

实战案例&#xff1a;使用tsne-cuda加速CIFAR-10数据集的高维可视化分析 【免费下载链接】tsne-cuda GPU Accelerated t-SNE for CUDA with Python bindings 项目地址: https://gitcode.com/gh_mirrors/ts/tsne-cuda t-SNE是机器学习领域常用的高维数据降维可视化工具&a…...

编程新知 2026/5/12 10:53:53

OpencvSharp 算子学习教案之 - Cv2.Sobel

OpencvSharp 算子学习教案之 - Cv2.Sobel 大家好&#xff0c;Opencv在很多工程项目中都会用到&#xff0c;而OpencvSharp则是以C#开发与实现的Opencv操作库&#xff0c;对.NET开发人员友好&#xff0c;但很多API的中文资料、应用场景及常见坑点等缺乏系统性归纳&#xff0c;因此…...

编程新知 2026/5/12 10:30:51

MTKClient终极指南：免费解锁联发科设备的完整刷机解决方案

MTKClient终极指南&#xff1a;免费解锁联发科设备的完整刷机解决方案 【免费下载链接】mtkclient MTK reverse engineering and flash tool 项目地址: https://gitcode.com/gh_mirrors/mt/mtkclient MTKClient是一款专为联发科&#xff08;MediaTek&#xff09;芯片设备…...

编程新知 2026/5/12 10:11:54

无需写代码！用 PackSoft 做数字展厅大屏

前言 做过展厅项目的朋友都懂这种痛—— 客户参观来了&#xff0c;讲解员打开浏览器&#xff0c;地址栏、书签栏、收藏夹全暴露在屏幕上&#xff0c;旁边还挂着一个没关的 QQ 弹窗……高端大气的数字展厅&#xff0c;体验瞬间拉低一个档次。 更麻烦的是&#xff1a;大屏全屏…...

编程新知 2026/5/12 10:06:53

【20年架构老兵亲授】：SITS 2026服务边界定义三原则、8类AI上下文耦合陷阱及动态治理沙盒实测数据

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生微服务架构&#xff1a;SITS 2026服务拆分与治理策略 AI原生微服务并非传统微服务的简单升级&#xff0c;而是以模型生命周期、推理上下文感知和实时反馈闭环为驱动的服务边界重构。SITS 2026&am…...

编程新知 2026/5/12 9:59:09

Rust与Godot引擎集成：使用gdext构建高性能游戏模块

1. 项目概述&#xff1a;当Rust遇上Godot 如果你是一名游戏开发者&#xff0c;同时又对Rust语言的安全性、性能和现代特性着迷&#xff0c;那么你很可能和我一样&#xff0c;曾经在两个优秀的工具之间感到难以抉择。一边是上手快、生态繁荣的Godot引擎&#xff0c;另一边是能让…...

编程新知 2026/5/12 9:49:03

3个步骤，用PCL2启动器彻底告别Minecraft配置烦恼

3个步骤&#xff0c;用PCL2启动器彻底告别Minecraft配置烦恼 【免费下载链接】PCL Minecraft 启动器 Plain Craft Launcher&#xff08;PCL&#xff09;。 项目地址: https://gitcode.com/gh_mirrors/pc/PCL 你是否遇到过这样的场景&#xff1a;好不容易下载了心仪的模组…...

编程新知 2026/5/12 9:14:03