HTML+CSS TAB导航栏

news2024/11/17 11:54:02

效果演示

04-TAB导航栏.gif

这段代码实现了一个名为"Tab导航栏"的效果,它是一个基于CSS的导航栏,包含五个选项卡,每个选项卡都有一个带有渐变背景色的滑块,当用户点击选项卡时,滑块会滑动到相应的位置。同时,选中的选项卡会变为白色,未选中的选项卡会变为灰色。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAB导航栏</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./04-TAB导航栏.css">
</head>

<body>
    <div class="wrapper">
        <nav>
            <input type="radio" name="tab" id="home" checked>
            <input type="radio" name="tab" id="comment">
            <input type="radio" name="tab" id="envelope">
            <input type="radio" name="tab" id="heart">
            <input type="radio

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1711011.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《python编程从入门到实践》day41

# 昨日知识点回顾 用户注销、注册&#xff0c;限制访问&#xff0c;新主题关联到当前用户 # 今日知识点学习 第20章 设置应用程序的样式并部署 20.1 设置项目“学习笔记”的样式 20.1.1 应用程序django-bootstrap4 # settings.py ---snip--- INSTALLED_APPS [# 我的应用程序…

【论文阅读|cryoET】DeepETPicker:使用弱监督深度学习的快速准确cryoET三维颗粒挑选算法

题目 DeepETPicker: Fast and accurate 3D particle picking for cryo-electron tomography using weakly supervised deep learning 发表期刊&#xff1a; Nature Communications 发表时间&#xff1a;2024.02 Accepted 作者&#xff1a;Guole Liu, Tongxin Niu 中科院自动化…

基于模糊PID控制器的汽车电磁悬架控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于模糊PID控制器的汽车电磁悬架控制系统simulink建模与仿真。 2.系统仿真结果 上面的仿真结果是无控制器和LQG的对比&#xff0c;以及有控制器和LQG的对比仿真。 3.核心程…

视觉语音识别挑战赛 CNVSRC 2024

CNVSRC 2024由NCMMSC 2024组委会发起&#xff0c;清华大学、北京邮电大学、海天瑞声、语音之家共同主办。竞赛的目标是通过口唇动作来推断发音内容&#xff0c;进一步推动视觉语音识别技术的发展。视觉语音识别&#xff08;也称为读唇技术&#xff09;是一种通过观察唇部动作推…

Cweek2+3

C语言学习 五.操作符 5.单目操作符(2) sizeof不能用于计算动态分配的内存 在对数组使用sizeof时&#xff0c;返回的是整个数组的大小&#xff08;所有元素的总字节数&#xff09;。而对指针使用sizeof时&#xff0c;返回的是指针本身的大小&#xff08;通常是机器字长的大小…

基础技术-ELF系列2-ELF文件进阶与libelf库

成就更好的自己 本篇是基础技术系列中ELF相关技术的第二篇&#xff0c;将会详细介绍一下ELF文件的结构。 没有看过之前的文章的朋友请重新开始&#xff0c;博主观点比较清奇&#xff0c;否则可能会有一些不太明白的地方&#xff1a; 基础技术-ELF系列(1)-ELF文件基础-CSDN博…

【设计模式】JAVA Design Patterns——Data Transfer Object(数据传递对象模式)

&#x1f50d;目的 次将具有多个属性的数据从客户端传递到服务器&#xff0c;以避免多次调用远程服务器 &#x1f50d;解释 真实世界例子 我们需要从远程数据库中获取有关客户的信息。 我们不使用一次查询一个属性&#xff0c;而是使用DTO一次传送所有相关属性。 通俗描述 使用…

pytorch-16 复现经典网络:LeNet5与AlexNet

一、相关概念 对于&#xff08;10,3,227,227&#xff09;数据表示&#xff0c;10张3通道的图&#xff0c;图的大小&#xff08;特征数&#xff09;为227*227. 通道数&#xff1a;作为卷积的输入通道数和输出通道数。 特征数&#xff1a;特征图的大小 步长stride和填充padding&…

文章结尾,铺垫下一章带来的期待

你是否容易在阅读时打瞌睡? 是否有很多买回来的书,放在书架上一年甚至几年都未读完,积满了灰尘? 但是,对于小说和电视剧,你却完全停不下来。每集片尾的预告激发了你持续观看下一集的渴望,带来了无限的期待…… 当你撰写文章或编写工具书时,内容可能呈现出乏味的面貌…

二叉树习题精讲-单值二叉树

单值二叉树 965. 单值二叉树 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/univalued-binary-tree/description/ 判断这里面的所有数值是不是一样 方案1&#xff1a;遍历 方案2&#xff1a;拆分子问题 /*** Definition for a binary tree node.* struc…

数据库自动化管理的六大等级

什么是数据库自动化管理&#xff1f; 数据库自动化管理是指通过使用工具和流程&#xff0c;在尽量减少人为干预的情况下&#xff0c;管理和执行与数据库相关的任务。主要目的当然是提高效率&#xff0c;减少人为错误&#xff0c;确保一致性&#xff0c;并解放 DBA 和开发者&am…

系统思考—决策

风险来自于你不知道你在做什么。——沃伦巴菲特 今天和一个合作伙伴的创始人交流&#xff0c;她提出了一个引人深思的问题&#xff1a;“策略性陪伴和战略复盘&#xff0c;什么原因不由客户自己来做&#xff1f;”这个问题让我深入思考了第三方策略性陪伴顾问的独特价值和重要…

《征服数据结构》块状链表

摘要&#xff1a; 1&#xff0c;块状链表的介绍 2&#xff0c;块状链表的代码实现&#xff08;Java和C&#xff09; 1&#xff0c;块状链表的介绍 前面我们讲过数组和链表&#xff0c;数组具有 O(1)的查询时间&#xff0c;O(N)的删除&#xff0c;O(N)的插入&#xff0c;而链表具…

java 对接农行支付相关业务(二)

文章目录 农行掌银集成第三方APP1:掌银支付对接快e通的流程1.1 在农行网站上注册我们的app信息([网址](https://openbank.abchina.com/Portal/index/index.html))1.2:java整合农行的jar包依赖1.3:把相关配置信息整合到项目中1.4:前端获取授权码信息1.5:后端根据授权码信…

Unity【入门】环境搭建、界面基础、工作原理

Unity环境搭建、界面基础、工作原理 Unity环境搭建 文章目录 Unity环境搭建1、Unity引擎概念1、什么是游戏引擎2、游戏引擎对于我们的意义3、如何学习游戏引擎 2、软件下载和安装3、新工程和工程文件夹 Unity界面基础1、Scene场景和Hierarchy层级窗口1、窗口布局2、Hierarchy层…

Spring Cloud Alibaba-06-Sleuth链路追踪

Lison <dreamlison163.com>, v1.0.0, 2024.4.03 Spring Cloud Alibaba-06-Sleuth链路追踪 文章目录 Spring Cloud Alibaba-06-Sleuth链路追踪为什么使用链路追踪常见链路追踪解决方案Sleuth概述概述Sleuth术语 Sleuth Zipkin 原理Sleuth原理简述Zipkin 原理简述 Sleut…

剪画小程序:自媒体创作的第一步:如何将视频中的文案提取出来?

自媒体创作第一步&#xff0c;文案提取无疑是至关重要的一环。 做自媒体之所以要进行文案提取&#xff0c;有以下重要原因&#xff1a; 首先&#xff0c;提高效率。通过文案提取&#xff0c;可以快速获取关键信息&#xff0c;避免在无关紧要的内容上浪费时间&#xff0c;从而…

OpenEuler安装

1.下载镜像文件 2.新建虚拟机 版本选替他linux5.x内核64位 内存选4G 磁盘大小选40GB 内存和磁盘大小不能按默认&#xff0c;不然会很卡甚至没反应 优先使用英语 安装目的地一开始会有警告标志&#xff0c;点进去点完成 输入密码时不能太短还要保证拥有至少三种字符类型 等待安…

【数据结构】AVL树——平衡二叉搜索树

个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 祝福语&#xff1a;愿你拥抱自由的风 目录 二叉搜索树 AVL树概述 平衡因子 旋转情况分类 左单旋 右单旋 左右双旋 右左双旋 AVL树节点设计 AVL树设计 详解单旋 左单旋 右单旋 详解双旋 左右双旋 平衡因子情况如…

基于微信小程序+ JAVA后端实现的【微信小程序跑腿平台】设计与实现 (内附设计LW + PPT+ 源码+ 演示视频 下载)

项目名称 项目名称&#xff1a; 《微信小程序跑腿平台的设计与实现》 项目技术栈 该项目采用了以下核心技术栈&#xff1a; 后端框架/库&#xff1a; Java, SSM框架数据库&#xff1a; MySQL前端技术&#xff1a; 微信小程序, HTML…&#xff08;其它相关技术&#xff09; …