HTML5+CSS3+JS小实例:简约的垂直选项卡

news2025/1/12 18:16:44

实例:简约的垂直选项卡

技术栈:HTML+CSS+JS

字体图标库:font-awesome

效果:

源码:

【html】

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>简约的垂直选项卡</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="/fonts/css/font-awesome.css">
    <link rel="stylesheet" href="148.css">
</head>

<body>
    <div class="container">
        <div class="left-box">
            <ul>
        

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

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

相关文章

【LED子系统深度剖析】八、小试牛刀

个人主页:董哥聊技术 我是董哥,高级嵌入式软件开发工程师,从事嵌入式Linux驱动开发和系统开发,曾就职于世界500强公司! 创作理念:专注分享高质量嵌入式文章,让大家读有所得! 文章目录 1、硬件管脚确定2、设备树配置3、子系统配置4、编译烧录5、验证5.1 设备树验证5.2 驱…

MySQL — 主从复制介绍

文章目录 主从复制一、概述二、原理三、 搭建主从复制结构3.1 服务器准备3.2 主库配置3.3 从库配置 主从复制 一、概述 ​ 主从复制是指将主数据库的DDL和DML操作通过二进制日志传到从库服务器中&#xff0c;然后在从库上对这些日志重新执行&#xff08;也叫重做&#xff09;…

16-Vue3中常用的 Composition API

目录 1、什么是组合式 API&#xff1f;2、拉开序幕的setup3、ref函数4、reactive函数5、Vue3.0中的响应式原理5.1 vue2.x的响应式5.2 Vue3.0的响应式 6、reactive对比ref7、setup的两个注意点8、计算属性与监视8.1 computed函数8.2 watch函数8.3 watchEffect函数 9、 生命周期1…

chatgpt赋能python:用Python编写AI:从入门到精通

用Python编写AI&#xff1a;从入门到精通 人工智能&#xff08;AI&#xff09;一直是计算机科学领域的热门话题。随着AI技术的成熟&#xff0c;越来越多的公司开始在其业务中应用AI。Python是机器学习和人工智能领域最流行的编程语言之一&#xff0c;Python提供了众多强大的库…

探索C++与Live555实现RTSP服务器的艺术

探索C与Live555实现RTSP服务器的艺术 一、引言&#xff08;Introduction&#xff09;1.1 RTSP服务器的重要性&#xff08;Importance of RTSP Server&#xff09;1.2 C与Live555库的优势&#xff08;Advantages of C and Live555&#xff09;1.3 可能用到的类和接口介绍 二、C与…

LLM时代,探索式数据分析的升级之路有哪些新助攻?

在这个信息爆炸的时代&#xff0c;数据已经成为我们生活、工作中不可或缺的重要资源。大量的数据犹如一座座金矿&#xff0c;蕴藏着无尽的价值。然而&#xff0c;如果无法从数据中提取出知识和信息并加以有效利用&#xff0c;那么数据本身并不能驱动和引领技术应用取得成功。如…

Java程序设计入门教程 -- 一维数组

目录 一维数组创建 1.声明数组 2.分配数组内存空间 3.数组元素访问 数组初始化 1.静态初始化 2.动态初始化 一维数组的拷贝 1.数组元素的拷贝 2.数组名的拷贝 一维数组创建 1.声明数组 声明一个一维数组的方法很简单&#xff0c;格式如下&#xff1a; 数据类型名[ ] …

解决使用json配置文件删除k8s中namespace解析json报错的问题

报错提示如下&#xff1a; C:\Users\jiangcheng>curl -k -H "Content-Type: application/json" -X PUT --data-binary dev.json http://127.0.0.1:8081/api/v1/namespaces/dev/finalize { "kind": "Status", "apiVersion": "…

Unity2D骨骼动画制作之单张图片编辑

1、打开骨骼制作面板 在Sprite Editor左侧选项&#xff0c;选择Skinning Editor 2、 &#xff08;1&#xff09;骨骼制作 Preview Pose 预览模式&#xff0c;可以预览动作并不会真正的改变设置 Reset Pose 将角色骨骼和关节恢复到原始位置 Edit Bone 编辑骨骼&#xff0c;…

bert中文文本摘要代码(3)

bert中文文本摘要代码 写在最前面关于BERT使用transformers库进行微调 train.py自定义参数迭代训练验证评估更新损失绘图主函数 test.pytop_k或top_p采样sample_generate函数generate_file函数主函数 写在最前面 熟悉bert&#xff0b;文本摘要的下游任务微调的代码&#xff0c…

网络安全合规-数据出境安全评估

&#xff08;一&#xff09;数据出境安全评估的适用范围为&#xff1a; 数据处理者向境外提供重要数据&#xff1b; 关键信息基础设施运营者和处理100万人以上个人信息的数据处理者向境外提供个人信息&#xff1b;自上年1月1日起累计向境外提供10万人个人信息或者1万人敏感个…

浮点数在内存中的存储

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C语言学习分享⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C语言知识   &#x1f51d;&#x1f51d; 浮点数在内存的存储 1. 前言&#…

vue3+WebRTC拉流(正确姿势)

vue3WebRTC拉流&#xff08;正确姿势&#xff09; 文章目录 vue3WebRTC拉流&#xff08;正确姿势&#xff09;缘由一、webRtc拉流是什么&#xff1f;1.实时通信&#xff1a;2.网络穿越&#xff1a;3.媒体处理&#xff1a;4.数据通道&#xff1a;5.使用场景: 二、使用webRtc引用…

《priority_queue的模拟实现》

本文主要介绍 文章目录 一、仿函数1.1 仿函数的定义1.2 普通仿函数1.3 需要自己实现仿函数 二、priority_queue的模拟实现 一、仿函数 1.1 仿函数的定义 所谓的仿函数(functor)&#xff0c;是通过重载()运算符模拟函数形为的类。 因此&#xff0c;这里需要明确两点&#xff1…

纯干货:数据库连接耗时慢原因排查

背景 最近公司的社区相关的服务需要优化&#xff0c;由于对业务不熟悉&#xff0c;只能借助监控从一些慢接口开始尝试探索慢的原因。由于社区相关的功能务是公司小程序流量入口&#xff0c;所以相应的服务访问量还是比较高的。针对这类高访问的项目&#xff0c;任何不留神的地…

中睿天下参编的《中国网信产业桔皮书-数据安全》正式发布

5月28日&#xff0c;2023中关村论坛中关村国际技术交易大会第七届中国网信产业前锋汇成功举办&#xff0c;本次会议以“全球数字经济发展与数据安全关键技术”为主题&#xff0c;会议由中国&#xff08;中关村&#xff09;网络安全与信息化产业联盟主办&#xff08;以下简称联盟…

芯片的XIP与BootRom启动方式

XIP&#xff1a;execute in place&#xff0c;就地执行&#xff0c;即芯片内执行&#xff0c;指应用程序可以直接在flash闪存中取指然后译码、执行&#xff0c;不必再把代码读到系统RAM中&#xff0c;flash内执行时指Nor flash不需要初始化&#xff0c;可以直接在flash内执行代…

Elsevier期刊中,撰写Author Statement

Author Statement或Authorship Contribution通常指作者声明&#xff0c;用于声明当前学术论文中每位作者的贡献。 大部分期刊都要求作者在首次投稿的时候就添加这部分内容&#xff0c;也有一些仅要求在发表之前提交。作者声明指导与模板有些学术期刊会专门提供具体的作者声明模…

Vue3 mixin 自定义指令 teleport

文章目录 Vue3 mixin & 自定义指令 & teleportmixin 混入简单使用 自定义指令简单使用全局注册参数 teleport 传送门简单使用 Vue3 mixin & 自定义指令 & teleport mixin 混入 mixins 选项接受一个 mixin 对象数组。这些 mixin 对象可以像普通的实例对象一样…

【企业化架构部署】Apache网页优化

文章目录 一、Apache网页优化概述1.优化内容2.网页压缩2.1gzip概述2.2作用2.3Apache的压缩模块概述mod_gzip模块与mod_deflate模块 3.配置网页压缩功能3.1启用网页压缩功能步骤3.2具体操作步骤 4.配置网页缓存功能4.1启用网页压缩功能步骤4.2具体操作步骤 二、Apache安全优化1.…