【Web前端实操17】导航栏效果——滑动门

news2024/11/17 15:59:41

滑动门

定义:

类似于这种:

滑到导航栏的某一项就会出现相应的画面,里面有对应的画面出现。

箭头图标操作和引用:

像一些图标,如果需要的话,可以找字体图标,比如阿里巴巴矢量图标库:iconfont-阿里巴巴矢量图标库

选择一个——>添加至购物车——>下载代码

因为我需要的是一个箭头图标,用于完成实操。

下载之后可以将这两个文件复制到相应的文件夹下,方便引用

在进行引用的时候,要根据所给的文件进行引用:

找到以html为后缀名的文件,点开,找到font-class,上面会有教你怎么应用的方式方法

至于" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。可以找到上面的名字,将icon-xxx替换掉就行

代码一些小辨析:
1、background-color和background的区别

这两者主要是继承性的关系:

background-color 是用来设置元素的背景颜色,默认无继承性,其背景颜色不会填充元素的的外边距,而是填充内容、内边距和边框区域以及元素边框的外边界;
background 则是可以设置所有的背景属性

其常见属性如下:

background的常见属性

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

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

相关文章

Abp 从空白WebApplication开始

开发环境:VS2022、.NET6 1、创建项目:BasicAspNetCoreApplication 2、NuGet添加:Volo.Abp.AspNetCore.Mvc和Volo.Abp.Autofac,如下图所示: 3、开始写代码,目录如下图所示: 3.1、添加启动模块Ap…

2023年:个人年度成长与团队协作成就

文章目录 个人职业发展的喜悦团队成就的辉煌公众号CSDN申请了移动安全领域新星创作者获得6月城市之星北京TOP 10获得23年博客之星TOP 41年度总结 知识星球 开拓新领域的决心免费知识大陆付费知识大陆 展望未来福利时间知识星球会员一年知识星球立减88券 在这个充满挑战与机遇的…

【Spark系列1】DAG中Stage和Task的划分全流程

本文字数在7800字左右,预计时间在15分钟 一、整体流程 每个Aciton操作会创建一个JOB,JOB会提交给DAGScheduler,DAGScheduler根据RDD依赖的关系划分为多个Stage,每个Stage又会创建多个TaskSet,每个TaskSet包含多个Tas…

解决 微信退款,本地退款可以,但是测试环境退款失败问题

1.问题描述 微信小程序退款操作,测试环境一直退款失败,但是本地测试退款却没问题 2.原因分析 本地退款可以,但是测试环境不行,说明问题出在测试环境上 经过排查发现是测试环境的微信商户证书是另一个小程序的,不是正在…

【Delphi】系统菜单中增加菜单项

目录 一、问题提出 二、程序截图 ​编辑 ​编辑 三、程序代码: 一、问题提出 我们在开发windows程序的时候,可能会希望在窗体的系统菜单中增加一个菜单项,那么如何实现呢,实际上通过调用windows API是可以实现的,…

C++初阶:C/C++内存管理、new与delete详解

之前结束了类与对象:今天进行下面部分内容的学习 文章目录 1.C/C内存分布2.C语言中动态内存管理方式:malloc/calloc/realloc/free3.C动态内存管理方式3.1new/delete操作内置类型3.2new和delete操作自定义类型 4.operator new与operator delete函数5.new和…

安科瑞AAFD系列故障电弧探测器应用以及选型

功能: 故障电弧探测器(以下简称探测器)对接入线路中的故障电弧(包括故障并联电弧、故障串联电弧)进行有效的检测,当检测到线路中存在引起火灾的故障电弧时,可以进行现场的声光报警,…

MYSQL中group by分组查询的用法详解(where和having的区别)!

文章目录 前言一、数据准备二、使用实例1.如何显示每个部门的平均工资和最高工资2.显示每个部门的每种岗位的平均工资和最低工资3.显示平均工资低于2000的部门和它的平均工资4.having 和 where 的区别5.SQL查询中各个关键字的执行先后顺序 前言 在前面的文章中,我们…

MySQL知识点总结(一)——一条SQL的执行过程、索引底层数据结构、一级索引和二级索引、索引失效、索引覆盖、索引下推

MySQL知识点总结(一)——一条SQL的执行过程、索引底层数据结构、一级索引和二级索引、索引失效、索引覆盖、索引下推 一条SQL的执行过程索引底层数据结构为什么不使用二叉树?为什么不使用红黑树?为什么不使用hash表?为什么不使用…

elementUI的el-select传递item对象或其他参数的2种方法

方法1 :value“item” 绑定对象 只要:value绑定item对象就可以 value-key"value" 必须是item里的一个属性&#xff0c;绑定值为对象类型时必填 <el-select v-model"value" placeholder"请选择" value-key"value" change"cha…

nginx部署前端(vue)项目及配置修改

目录 一、前端应用打包 二、部署前端应用 1、上传前端文件夹 2、修改nginx配置文件 3、重启nginx 三、查看效果 nginx安装参考&#xff1a;linux安装nginx-CSDN博客 一、前端应用打包 打包命令 npm run build 打包成功如下&#xff0c;会在项目路径下生成dist文件夹 二…

为什么说2023年是AI元年

前言 思考者~ 2023年被称为AI元年&#xff0c;主要是因为在这一年中&#xff0c;人工智能技术在各个领域取得了突破性的进展和应用&#xff0c;这些技术的广泛应用深刻地影响了人们的生活和工作方式&#xff0c;也预示着未来AI技术的更大潜力和发展空间。 首先&#xff0c;…

【数据分析】numpy基础第二天

文章目录 前言数组的形状变换reshape的基本介绍使用reshapereshape([10, 1])运行结果reshape自动判断形状reshape([-1, 1])运行结果 合并数组使用vstack和hstackvstack和hstack的运行结果使用concatenateconcatenate运行结果 分割数组array_split运行结果 数组的条件筛选条件筛…

C++ 数论相关题目 求组合数I

直接按照公式求解会超时。 常用组合数递推式。 因此用递推式先预处理出来&#xff0c;然后查表。 #include <iostream> #include <algorithm>using namespace std;const int N 2010, mod 1e9 7;int c[N][N];void init() {for(int i 0; i < N; i )for(in…

Git 教程 | 将本地修改后的文件推送到 Github 指定远程分支上

Git 是一种分布式版本控制系统&#xff0c;用于敏捷高效地处理任何大小的项目。它是由 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的开源版本控制软件。Git 的本地克隆就是一个完整的版本控制存储库&#xff0c;无论脱机还是远程都能轻松工作。开发人员会在本地提交其工…

AWS 专题学习 P10 (Databases、 Data Analytics)

文章目录 专题总览1. Databases1.1 选择合适的数据库1.2 数据库类型1.3 AWS 数据库服务概述Amazon RDSAmazon AuroraAmazon ElastiCacheAmazon DynamoDBAmazon S3DocumentDBAmazon NeptuneAmazon Keyspaces (for Apache Cassandra)Amazon QLDBAmazon Timestream 2. Data & …

专业做护眼灯的有哪些品牌?专业做护眼灯的品牌

相信很多家长都有过帮助孩子选购台灯的经历&#xff0c;但或许并不清楚市面上存在许多质量不合格的台灯。曾在央视一期节目曝光了许多LED台灯存在严重不合格的问题。尽管现在台灯通常需要执行强制性产品认证&#xff0c;并且进行不定期的抽样检查&#xff0c;但仍有一些没有接受…

【JaveWeb教程】(36)SpringBootWeb案例之《智能学习辅助系统》的详细实现步骤与代码示例(9)登录问题分析与会话控制技术讲解

目录 SpringBootWeb案例092. 登录校验2.1 问题分析2.2 会话技术2.2.1 会话技术介绍2.2.2 会话跟踪方案2.2.2.1 方案一 - Cookie2.2.2.2 方案二 - Session2.2.2.3 方案三 - 令牌技术 SpringBootWeb案例09 2. 登录校验 2.1 问题分析 我们已经完成了基础登录功能的开发与测试&a…

2024年搭建幻兽帕鲁服务器价格多少?如何自建Palworld?

自建幻兽帕鲁服务器租用价格表&#xff0c;2024阿里云推出专属幻兽帕鲁Palworld游戏优惠服务器&#xff0c;配置分为4核16G和4核32G服务器&#xff0c;4核16G配置32.25元/1个月、3M带宽96.75元/1个月、8核32G配置10M带宽90.60元/1个月&#xff0c;8核32G配置3个月271.80元。ECS…

【C++】引用、内联函数、auto关键字等

前言&#xff1a;在前面我们讲解了C入门基础的一些学习例如命名空间、缺省参数、函数重载等。今天我们将进一步的学习&#xff0c;跟着博主的脚步再次往前迈一步吧。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:高质量&#xff23;学习…