HTML+CSS TAB导航栏

效果演示

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SARscape雷达图像处理软件简介

合成孔径雷达&#xff08;SAR&#xff09;拥有独特的技术魅力和优势&#xff0c;渐成为国际上的研究热点之一&#xff0c;其应用领域越来越广泛。SAR数据可以全天候对研究区域进行量测、分析以及获取目标信息。高级雷达图像处理工具SARscape&#xff0c;能让您轻松将原始SAR数据…

每天写两道(二)LRU缓存、

146.LRU 缓存 . - 力扣&#xff08;LeetCode&#xff09; 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存…

猜猜我是谁游戏

猜谜过程 在TabControl控件中&#xff0c;第一个tab中放了一个PictureBox&#xff0c;里面有一张黑色的图片。 玩家点击显示答案按钮&#xff0c;切换图片。 设计器 private void button1_Click(object sender, EventArgs e){this.pictureBox1.Image Image.FromFile(&qu…

网络渗透day2

Windows登录的明文密码存储过程和密文存储位置 明文密码存储过程&#xff1a; Windows操作系统不会以明文形式存储用户密码。相反&#xff0c;当用户设置或更改密码时&#xff0c;系统会对密码进行哈希处理&#xff0c;然后存储其哈希值。哈希处理的目的是为了提高密码的安全性…

设计模式——职责链(责任链)模式

目录 职责链模式 小俱求实习 结构图 实例 职责链模式优点 职责链模式缺点 使用场景 1.springmvc流程 ​2.mybatis的执行流程 3.spring的过滤器和拦截器 职责链模式 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成…

VM虚拟机共享文件夹fuse: bad mount point `/mnt/hgfs‘: No such file or directory

报错显示挂载点 /mnt/hgfs 不存在&#xff0c;你需要先创建这个目录。可以按照以下步骤进行操作&#xff1a; 创建挂载点目录&#xff1a; sudo mkdir -p /mnt/hgfs 手动挂载共享文件夹&#xff1a; sudo vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other 确保每次启动时自动…

IDEA 2023.3.6 下载、安装、激活与使用

一、IDEA2023.3.6下载 国际官网&#xff1a;https://www.jetbrains.com/ 国内官网&#xff1a;https://www.jetbrains.com.cn/ 如果国际官网无法访问&#xff0c;就使用国内官网&#xff0c;我们以国内官网为例下载IDEA2023.3.6 首先进入首页如下图&#xf…

1.2数学基础

向量运算 矩阵运算 比较基础就不记录了 MVP矩阵推导 1.讲为什么要有矩阵变换和不同的坐标空间 将3D物体转化到2D平面为各个空间的运用做准备 2.介绍各个空间的概念和含义 MVP矩阵代表什么&#xff1f; MVP矩阵分别是模型(Model)、观察(View)、投影(Projection)三个矩阵。…

数组-捡石子小游戏

一、题目描述 二、解题思路 刚开始拿到题目的时候在想是不是需要把所有情况枚举出来&#xff0c;其实思考一下能看出规律&#xff1a; 1.如果有1、2、3颗石子&#xff0c;小牛一定可以赢&#xff1b; 2.再来看4颗石子的时候&#xff0c;小牛A可以拿1~3颗&#xff0c;但是无论小…

scrapy 整合 mitm

1.mitm 是什么 MITMproxy 是一个开源的中间人代理&#xff0c;常用于网络流量的拦截、查看和修改。 2.scrapy 整合 mitm步骤 2.1 安装mitm PS F:\studyScrapy\itcastScrapy> pip install mitmproxy2.2 在settings 中配置下载器中间件 # settings.pyDOWNLOADER_MIDDLEWARES…

工业路由器在新能源数字化中的应用:重塑能源行业的未来

随着全球对可再生能源和能源效率的追求日益加强&#xff0c;新能源数字化已成为推动行业发展的关键因素。在这一变革的浪潮中&#xff0c;工业路由器以其卓越的性能和独特的功能&#xff0c;成为新能源数字化不可或缺的核心组件。本文将深入探讨工业路由器在新能源数字化中的应…

如何解决链游中可能出现的延迟或网络拥堵问题?

随着区块链技术的不断发展和普及&#xff0c;链游&#xff08;基于区块链的游戏&#xff09;作为新兴的娱乐形式&#xff0c;正逐渐走进大众的视野。然而&#xff0c;与传统游戏相比&#xff0c;链游在运行过程中可能会遇到一些特有的问题&#xff0c;其中最为突出的就是延迟和…

YiShaAdmin:一款基于.NET Core Web + Bootstrap的企业级快速开发框架

前言 今天大姚给大家分享一款基于.NET Core Web Bootstrap的企业级快速后台开发框架、权限管理系统&#xff0c;代码简单易懂、界面简洁美观&#xff08;基于MIT License开源&#xff0c;免费可商用&#xff09;&#xff1a;YiShaAdmin。 项目官方介绍 YiShaAdmin 基于.NET…

孔子,孟子,荀子的以果决其行。

我们再往前&#xff0c;中间的有很多就不说了&#xff0c;我们可以自己去看他们的履历&#xff0c;看有没有——以果决其行的行为&#xff0c;以及有没有知行合一的身影。 再往前&#xff0c;到了孟子&#xff0c;孔孟都被称为圣人&#xff0c;孟子的很多话到现在我们都耳熟能详…

探索标准差与方差的奥秘

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、标准差与方差的基础理解 代码案例 二、标准差与方差的计算方法 方差的计算 标准差的…

STM32 入门教程(江科大教材)#笔记2

3-4按键控制LED /** LED.c**/ #include "stm32f10x.h" // Device headervoid LED_Init(void) {/*开启时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE); //开启GPIOA的时钟/*GPIO初始化*/GPIO_InitTypeDef GPIO_InitStructure;GPIO_I…

少年应有鸿鹄志,当骑骏马踏平川!

点击上方蓝字关注狂神说 少年应有鸿鹄志&#xff0c;当骑骏马踏平川&#xff1a; 少年应当拥有鸿鹄一样的高远志向&#xff0c;翱翔长空&#xff0c;应当骑着骏马跨越山河平川。所谓少年&#xff0c;就应该意气风发&#xff0c;就应该胸怀壮志&#xff0c;追风赶月&#xff0c;…

Linux入门攻坚——23、DNS和BIND基础入门2

前一篇实践了正向解析服务器的配置使用&#xff0c;如何配置反向解析呢&#xff1f; 反向区域&#xff1a; 区域名称&#xff1a;网络地址反写.in-addr.arpa. 192.168.138. --> 138.168.192.in-addr.arpa. (1)定义区域&#xff1a; zone "ZONE_NAME" I…

CASS11自定义宗地图框

1、找到CASS11的安装路径&#xff0c;找到如下文件夹&#xff1a; 2、打开【report】文件夹&#xff0c;如下&#xff1a; 3、打开其中一个压缩包&#xff0c;如【标准宗地图】压缩包&#xff0c;结果如下&#xff1a; 4、打开后&#xff0c;将其另存为到桌面&#xff0c;随后关…

详解makefile中addprefix

在 Makefile 中&#xff0c;$(addprefix prefix,names…) 是一个函数&#xff0c;用于将指定的前缀添加到一组空格分隔的文件名中。这个函数通常用于将相同的前缀添加到一组文件名或路径中&#xff0c;非常适合在 Makefile 中进行路径拼接操作。 语法&#xff1a; makefile C…