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

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

news 2025/10/31 6:02:49

在这里插入图片描述

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

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

认识柔性数组

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

传输层协议——TCP、UDP

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

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

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

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

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

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 关系代数

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

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

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

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

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

webpack优化策略

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

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

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

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

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

Linux- 后台运行符、nohup、disown

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

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

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

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

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

正则表达式 Regular Expression学习

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

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

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/10/17 20:43:55