HTML+CSS+JS 选项卡导航栏

效果演示

11-选项卡导航栏.gif

实现了一个导航栏切换内容的效果。页面上方有一个导航栏，每个导航项都有一个圆形背景，点击导航项时，圆形背景会放大并显示对应的内容。每个内容区域都包含一个大号字母，数字会在内容区域显示时淡入。点击其他导航项时，当前内容区域会淡出并隐藏，同时新的内容区域会淡入并显示。

Code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡导航栏</title>
    <link rel="stylesheet" href="../fonts/css/font-awesome.css">
    <link rel="stylesheet" href="./11-选项卡导航栏.css">
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="item active"><i class="fa fa-file-powerpoint-o"></i></div>
            <div class="item"><i class="fa fa-file-photo-o"></i></div>
            <div class="item"><i class="fa fa-file-zip-o"></i></div>
            <div class

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

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

相关文章

[数据集][目标检测]csgo头部身体检测数据集VOC+YOLO格式1265张4类别

[数据集][目标检测]csgo头部身体检测数据集VOC+YOLO格式1265张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1265 标注数量(xml文件个数)&#xff1a;1265 标注数量(txt文件个数)&#xff1a;1265 标注…
阅读更多...
群体优化算法----人工蜂群优化算法应用于路径规划(机器人避开平面障碍寻找最短路线)

群体优化算法----人工蜂群优化算法应用于路径规划(机器人避开平面障碍寻找最短路线)

介绍 人工蜂群优化算法&#xff08;Artificial Bee Colony Algorithm, ABC&#xff09;是由Dervis Karaboga在2005年提出的一种模拟蜜蜂觅食行为的优化算法。该算法基于蜜蜂群体的分工合作和信息交流机制&#xff0c;通过模拟蜜蜂寻找食物源的过程来解决优化问题。ABC算法因其…
阅读更多...
mybatis—plus和mybatis的区别

mybatis—plus和mybatis的区别

一前置知识&#xff1a; CRUD操作&#xff08;create 添加数据read读取数据 update 修改数据delete删除数据&#xff09; 二&#xff0c;总体概览 MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发工作、提高…
阅读更多...
INT202 例题

INT202 例题

算法复杂度 O(n)&#xff1a;表示算法的渐进上界。如果一个算法的运行时间是O(n)&#xff0c;那么它的运行时间最多与输入规模n成正比。换句话说&#xff0c;当输入规模n增加时&#xff0c;算法的运行时间不会超过某个常数倍的n。比如&#xff0c;如果一个算法的时间复杂度是O(…
阅读更多...
【InternLM实战营第二期笔记】04：XTuner 微调 LLM：1.8B、多模态、Agent

【InternLM实战营第二期笔记】04：XTuner 微调 LLM：1.8B、多模态、Agent

文章目录 笔记微调基础知识Xtuner8G显存微调模型InternLM2 1.8B多模态实践环节数据微调过拟合WebUI 交互 多模态微调 作业 这回学乖了&#xff0c;打开本节课第一件事先不看教程而是装环境~ 笔记 微调基础知识 这里感慨一下&#xff0c;垂直领域的训练还是挺困难的&#xff0c;…
阅读更多...
jenkins的简单使用

jenkins的简单使用

2.1.简介 Jenkins是一个开源软件项目&#xff0c;是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。 2.4.Jenkins安装 1.下载安装包jenkins.war&#xff1b; 2.在安装…
阅读更多...
dpdk uio整体分析及网卡加载

dpdk uio整体分析及网卡加载

参考：https://zhuanlan.zhihu.com/p/477600165 一、Linux内核知识点 1. __attribute__ constructor/destructor （1）若函数被设定为constructor属性，则该函数会在 main（）函数执行之前被自动的执行。 （2）若函数被设定为destructor属性，则该函数会在main（）函数执…
阅读更多...
C++类的继承与派生概念

C++类的继承与派生概念

派生和继承是自然界普遍存在的一种现象。例如&#xff0c;“猫”和“白猫”。当人们谈及“猫”时&#xff0c;知道它有4条腿&#xff0c;1条尾巴&#xff0c;抓老鼠,为哺乳动物。如谈论“白猫”时&#xff0c;它也是猫&#xff0c;只不过增加了一个新的特征&#xff0c;即它的毛…
阅读更多...
Harmony开发 List/Scroll 组件最后一个item显示不全或布局显示不完整

Harmony开发 List/Scroll 组件最后一个item显示不全或布局显示不完整

今天在做Harmony开发的时候遇到一个问题,List组件的最后一个item显示不全&#xff0c;如下图&#xff0c;item-9显示不出来&#xff0c;显示了一部分 这个页面的代码结构如下&#xff1a; Column() {Row() {Text(文本1).fontSize(15).fontColor(Color.Black)Text(文本2).font…
阅读更多...
论文浅尝 | THINK-ON-GRAPH：基于知识图谱的深层次且可靠的大语言模型推理方法...

论文浅尝 | THINK-ON-GRAPH：基于知识图谱的深层次且可靠的大语言模型推理方法...

笔记整理&#xff1a;刘佳俊&#xff0c;东南大学硕士&#xff0c;研究方向为知识图谱 链接&#xff1a;https://arxiv.org/pdf/2307.07697.pdf 1. 动机 本文是IDEA研究院的工作&#xff0c;这篇工作将知识图谱的和大语言模型推理进行了结合&#xff0c;在每一步图推理中利用大…
阅读更多...
2024视频号·短视频+直播极简培训班：抓住视频号风口，流量红利

2024视频号·短视频+直播极简培训班：抓住视频号风口，流量红利

课程下载&#xff1a;2024视频号短视频直播极简培训班&#xff1a;抓住视频号风口&#xff0c;流量红利-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 02 1、为什么视频号有机会&#xff0c;而不是抖音?(直播2024.03.0…
阅读更多...
攻防世界---misc---can_has_stdio?

攻防世界---misc---can_has_stdio?

1、下载附件是一个没有后缀的文件&#xff0c;尝试将后缀改为txt发现里面有一些特殊字符的编码 2、查阅资料得知它是一种编程代码 3、知道了它是什么代码之后&#xff0c;我们就去解码&#xff08;网址&#xff1a;El Brainfuck (copy.sh)&#xff09; 4、 flag{esolangs_for_f…
阅读更多...
Centos 7之Hadoop搭建

Centos 7之Hadoop搭建

介绍 Hadoop Distributed File System简称 HDFS&#xff0c;是一个分布式文件系统。HDFS 有着高容错性&#xff08;fault-tolerent&#xff09;的特点&#xff0c;并且设计用来部署在低廉的&#xff08;low-cost&#xff09;硬件上。而且它提供高吞吐量&#xff08;high throu…
阅读更多...
2024年Node.js精选：50款工具库集锦，项目开发轻松上手（五）

2024年Node.js精选：50款工具库集锦，项目开发轻松上手（五）

不得不说&#xff0c;Node.js的强大离不开那150万个NPM包。没有NPM&#xff0c;Node.js依然可以使用&#xff0c;但绝不会如此强大。在这个系列文章中&#xff0c;我们探讨了每个开发者都应该了解的一些常用NPM包。在本系列的最后一篇文章中&#xff0c;我将介绍第41到第50个推…
阅读更多...
QT 创建文件 Ui 不允许使用不完整类型,可以尝试添加一下任何头文件

QT 创建文件 Ui 不允许使用不完整类型,可以尝试添加一下任何头文件

#include "debug.h" #include "qmessagebox.h" #pragma execution_character_set("utf-8") //QT 创建文件 Ui 不允许使用不完整类型,尝试添加一下任何头文件&#xff0c;或者添加ui_xx.h头文件 debug::debug(QWidget *parent) : QDialog(p…
阅读更多...
番外篇 | YOLOv5改进之结合结构重参数化网络RepVGG：极简架构，SOTA性能，让VGG式模型再次伟大！

番外篇 | YOLOv5改进之结合结构重参数化网络RepVGG：极简架构，SOTA性能，让VGG式模型再次伟大！

前言：Hello大家好，我是小哥谈。ResNet、DenseNet等复杂的多分支网络可以增强模型的表征能力，使得训练效果更好，但是多分支的结构在推理的时候效率严重不足。看起来二则不可兼得。能否两全其美？RepVGG通过结构重参数化的方法，在训练的时候使用多分支结构，而在推理的时候多…
阅读更多...
【动手学深度学习】多层感知机模型选择、欠拟合和过拟合研究详情

【动手学深度学习】多层感知机模型选择、欠拟合和过拟合研究详情

目录 &#x1f30a;1. 研究目的 &#x1f30a;2. 研究准备 &#x1f30a;3. 研究内容 &#x1f30d;3.1 多层感知机模型选择、⽋拟合和过拟合 &#x1f30d;3.2 基础练习 &#x1f30a;4. 研究体会 &#x1f30a;1. 研究目的 多层感知机模型选择&#xff1a;比较不同多层…
阅读更多...
2D 生存角色扮演游戏《Cryptara Conquest》即将登录 Eclipse

2D 生存角色扮演游戏《Cryptara Conquest》即将登录 Eclipse

接下来是为狂热的游戏玩家们带来的又一个惊喜。《Cryptara Conquest》是一款以故事叙述和冒险元素作为驱动的 2D 生存 RPG 游戏&#xff0c;该游戏即将在 Eclipse 平台上发布。该游戏将经典老派游戏魅力与现代生存机制相结合&#xff0c;旨在通过怀旧、创新和区块链技术融合&am…
阅读更多...
Linux网络编程：网络层协议|IP

Linux网络编程：网络层协议|IP

前言&#xff1a; 网络层协议解决什么问题 当我们在上层实现了应用层协议将字符流数据转化为结构体数据&#xff0c;在传输层完成了通信的实现&#xff0c;数据的传输&#xff0c;但是数据最终还是得从本主机输出&#xff0c;从网络中进入到远端的另外一台主机。 网络层协议I…
阅读更多...
瘦”AP与“胖”AP的区别

瘦”AP与“胖”AP的区别

1. AP基本概念 无线AP&#xff0c;简单说就是一个无线接入点&#xff0c;它是无线网络的关键部分&#xff0c;就像是无线网络的大脑。这个无线AP啊&#xff0c;它跟无线路由器、无线网关、无线网桥这些设备差不多&#xff0c;都是干一件事儿的。它的作用就是把家里或公司里用线…
阅读更多...
最新文章

Copyright @ 2022~2023