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

滑动门

定义:

类似于这种:

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

箭头图标操作和引用:

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

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

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

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

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

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

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

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

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

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

其常见属性如下:

background的常见属性

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

精通Python第13篇—数据之光:Pyecharts旭日图的魔法舞台

文章目录 引言准备工作绘制基本旭日图调整颜色和样式添加交互功能定制标签和标签格式嵌套层级数据高级样式与自定义进阶主题:动态旭日图数据源扩展:外部JSON文件总结 引言 数据可视化在现代编程中扮演着重要的角色,而Pyecharts是Python中一个…

【学网攻】 第(13)节 -- 动态路由(OSPF)

系列文章目录 目录 系列文章目录 文章目录 前言 一、动态路由是什么? 二、实验 1.引入 实验拓扑图 实验配置 实验验证 总结 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学…

Python爬虫请求库安装

请求库的安装 爬虫可以简单分为几步:抓取页面、分析页面和存储数据。 在抓取页面的过程中,我们需要模拟浏览器向服务器发出请求,所以需要用到一些 Python 库来实现 HTTP 请求操作。在本教程中,我们用到的第三方库有 requests、S…

(自用)learnOpenGL学习总结-高级OpenGL-立方体贴图

ok终于来到了立方体贴图了,在这里面我们可以加入好看的天空包围盒,这样的画我们的背景就不再是黑色的了! 首先,立方体贴图和前面的sampler2D贴图一样,不过是6个2D组成的立方体而已。 那么为什么要把6个组合在一起呢&…

Go、容器以及Linux调度器

在容器中运行Go应用程序时,需要设置合理的GOMAXPROCS,从而避免调度中因为资源不足而造成STW。原文: Go, Containers, and the Linux Scheduler Go开发的应用程序通常部署在容器中。在容器中运行时,重要的一点是要设置CPU限制以确保容器不会耗…

MacOS X 中 OpenGL 环境搭建 Makefile的方式

1,预备环境 安装 brew: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 安装glfw: brew install glfw 安装glew: brew install glew 2.编译 下载源代码…

喜报|「云原生数据库PolarDB」、「阿里云瑶池一站式数据管理平台」揽获“2023技术卓越奖”

日前,国内知名IT垂直媒体&技术社区IT168公布2023年“技术卓越奖”评选结果,经由行业CIO/CTO大咖、技术专家及IT媒体三方的联合严格评审,阿里云瑶池数据库揽获两项大奖:云原生数据库PolarDB荣获“2023年度技术卓越奖”&#xf…

【双目】双目精度评估完整方案,可以直接使用(内涵数据,代码和评估报告)

【双目】基于findChessboardCorners的双目精度评估,可以直接使用 数据和代码见 运行结果: 结论与分析: 在使用鱼眼相机进行双目精度上限评估时,出现1米距离的误差大于2米距离的误差可能有几个原因: 畸变影响&#x…

网络协议与攻击模拟_09部署DHCP服务器

一、部署DHCP服务器 Windows server部署DHCP服务器 1、虚拟机网络架构理解 Vmware里面不同的虚拟机可以设置相同的Vmnet网络,也可以设置不同的Vmnet网络。两台虚拟机设置相同的Vmnet1网卡,可以看作为使用虚拟交换机将两台Vmnet1的虚拟机连接起来的。 …

深入理解HarmonyOS UIAbility:生命周期、WindowStage与启动模式探析

UIAbility组件概述 UIAbility组件是HarmonyOS中一种包含UI界面的应用组件,主要用于与用户进行交互。每个UIAbility组件实例对应最近任务列表中的一个任务,可以包含多个页面来实现不同功能模块。 声明配置 为了使用UIAbility,首先需要在mod…

【C/C++】C/C++编程——变量和常量

文章目录 变量变量的声明变量命名规则变量的类型 常量常量的定义与初始化字面量常量整型常量浮点型常量字符常量常量表达式(constexpr) 大家好,我是 shopeeai,也可以叫我虾皮,中科大菜鸟研究生。今天我们来一起来学习C…

2.【Vue3】Vue 基本使用——局部使用Vue

1. 快速入门 现在需要将 “hello vue3” 这样一个字符串渲染到页面上进行展示。 这个需求并不陌生,可以使用原生 JS 代码完成: let msg"hello vue3"; document.getElementById("元素的id属性值").innerHTMLmsg;接下来学习如何使用…

麒麟系统—— openKylin 安装 mongodb

麒麟系统—— openKylin 安装 mongodb 一、准备工作1. 确保麒麟系统 openKylin 已经安装完毕。 二、下载解压 MongoDB二、增加环境变量三、配置MongoDB创建数据目录创建日志文件运行 四、加入到服务中 MongoDB是一款高性能、开源的NoSQL数据库,因其灵活的数据结构、…

机器学习:梯度下降法(Python)

LinearRegression_GD.py import numpy as np import matplotlib.pyplot as pltclass LinearRegression_GradDesc:"""线性回归,梯度下降法求解模型系数1、数据的预处理:是否训练偏置项fit_intercept(默认True)&…

【面试】测试开发面试题

帝王之气,定是你和万里江山,我都护得周全 文章目录 前言1. 网络原理get与post的区别TCP/IP各层是如何传输数据的IP头部包含哪些内容TCP头部为什么有浮动网络层协议1. 路由协议2. 路由信息3. OSPF与RIP的区别Cookie与Session,Token的区别http与…

解决Linux部署报错No main manifest attribute, in XXX.jar

这是我近期遇到的一个问题,报错原因就是没找到主类,首先你在你本地运行,本地运行ok的话,解压生成的jar包,里面有个META-INF文件,打开MANIFEST.MF文件,该文件是一个清单文件。该文件包含有关JAR文…

11. 双目视觉之立体视觉基础

目录 1. 深度恢复1.1 单目相机缺少深度信息1.2 如何恢复场景深度?1.3 深度恢复的思路 2. 对极几何约束2.1 直观感受2.2 数学上的描述 1. 深度恢复 1.1 单目相机缺少深度信息 之前学习过相机模型,最经典的就是小孔成像模型。我们知道相机通过小孔成像模…

汽车网络安全dos, someip

汽车Cyber Security入门之DoS 攻防 - 知乎 3、SOME/IP-TP 近年来火热地谈论下一代EE架构和SOA的时候,总离不开SOME/IP这个进程间通讯协议。在许多应用场景中,需要通过UDP传输大型的SOME/IP有效载荷。鉴于在以太网上传输数据包的大小限制,SO…

Linux文件管理(下)

上上篇介绍了Linux文件管理的上部分内容,这次继续将 Linux文件管理的剩余部分说完。内容如下。 一、查看文件内容 1、cat 命令 1.1 输出文件内容 基本语法: cat 文件名称主要功能:正序输出文件的内容。 eg:输出 readme.txt文…

剧本杀小程序的诞生:重塑线下娱乐的数字化未来

随着科技的不断发展,人们对于娱乐方式的需求也在不断升级。近年来,剧本杀作为一种新型的线下社交娱乐方式,以其独特的魅力和深度的人际互动性,受到了广大年轻人的喜爱。然而,传统的剧本杀模式存在一些问题,…