当前位置： 首页 > news >正文

HTML5:七天学会基础动画网页6

news 2025/9/25 8:31:54

CSS3自定义字体

①：首先需要下载所需字体

②：把下载字体文件放入 font文件夹里，建议font文件夹与 css 和 image文件夹平级

 ③：引入字体，可直接在html文件里用@font-face引入字体，分别是字体名字和路径

例:

<style>

        p{

            width: 200px;

            height: 100px;

            margin: 40px auto;

            border: 1px solid black;

            text-align: center;

            font-family:'name' ;

(此处给引入字体起名)

        }

        @font-face(此处用于引用字体){

            font-family:'name';(注意名字相同)

            src: url(./);

            ...............

        }

    </style>

</head>

<body>

   <p>hello world</p >

   </body>

 

当我们引用很多字体时，可能不知道哪个具体生效，加载速度慢，第一时间加载不出来，最好做成图片，速度快。

字体图标

关于我们日常设计时需要一些图标，苦无没有素材，我们这里以阿里图标库为例。

首先引入下载好的字体图标的css文件

我们重命名iconfont

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <link rel="stylesheet" href="./......">

</head>

<body>

   <span class="iconfont (后面这里是在阿里图标库font class中复制的代码)"></span>

   </body>

如果我们想保留彩色的图标:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jingdong边侧栏练习</title>
    <!-- 引入css和js样式 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="./ionFont/ionFont.js"></script>
    <style>
        /* 设置样式 */
        .icon{
            width: ;
            height: ;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 照着写就行，主要use标签注意#后为引入图标名称 -->
   <svg class="icon" aria-hidden="true">
    <use xlink:href="#(阿里图标库中fontclass复制的代码，注意要先下载到本地)"></use>
   </svg>
   </body>

这里再提供几个别的图标网站

iconfont: https://www.iconfont.cn

68f889b044154c2bbaf9be0a6f402396.jpg

 iconstore：https://iconstore.co

b80024228aa94635b3f06a39b2a14063.jpg

 feathericons: https://feathericons.com

f349cad34c804eda96286eb4a89c2b2a.jpg

 Heroicons：https://heroicons.com

73c6c2c2ba8c4d6e92191193b9b29383.jpg

 Remix Icon： https://remixicon.com

756e8958cc5b45fe845d706e8befe3e0.jpg

 iconpark:https://iconpark.oceanengine.com

d8d721f649944198b7f7417231c75f23.jpg

 Flat Icon： https://www.flaticon.com

66bc7ac587aa4b57996a11e4e10f9cb5.jpg

 Css.gg： https://css.gg

0608962c66204b2a9ebdd09b5d0a47f6.jpg

 还有很多别的网站，对这个的建议是有开源的材料就用免费的，素材多的是。

 

相关文章：

HTML5:七天学会基础动画网页6

CSS3自定义字体 ①&#xff1a;首先需要下载所需字体 ②&#xff1a;把下载字体文件放入 font文件夹里&#xff0c;建议font文件夹与 css 和 image文件夹平级 ③&#xff1a;引入字体&#xff0c;可直接在html文件里用font-face引入字体&#xff0c;分别是字体名字和路径 例…...

编程日记 2024/3/5 2:04:20

mybatis中#{}和${}的区别？

#{}是占位符&#xff0c;预编译处理&#xff1b;${}是拼接符&#xff0c;字符串替换&#xff0c;没有预编译处理。 Mybatis在处理#{}时&#xff0c;#{}传入参数是以字符串传入&#xff0c;会将SQL中的#{}替换为?号&#xff0c;调用PreparedStatement的set方法来赋值。 Mybat…...

编程日记 2024/3/5 2:02:17

常用git 打tag命令

1.查看所有tag git tag 2.创建 v5.0.0的tag git tag v5.0.0 git tag &#xff08;创建后查看&#xff09; 3.推送到远程tag git push origin v5.0.0 4.删除远程tag git push origin --delete v5.0.0 5.删除本地tag git tag -d v5.0.0 6.添加带有备注信息的tag git tag v5.…...

编程日记 2024/3/5 2:01:16

Learning from Unlabeled 3D Environments forVision-and-Language Navigation

这篇论文是关于高级指令的 摘要 在视觉和语言导航 (VLN) 中&#xff0c;实体代理需要按照自然语言指令在真实的 3D 环境中进行导航。现有 VLN 方法的一个主要瓶颈是缺乏足够的训练数据&#xff0c;导致对未见过的环境的泛化效果不理想。虽然 VLN 数据通常是手动收集的&#x…...

编程日记 2024/3/5 1:59:13

【算法分析与设计】组合

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 示例 1&…...

编程日记 2024/3/5 1:58:12

数仓模型设计方法论

在当今大数据时代&#xff0c;数据已经成为企业最重要的资产之一。而数据仓库作为企业数据管理和分析的核心基础设施&#xff0c;其设计方法论对于企业的数据治理和决策分析至关重要。本文将探索数仓模型设计的方法论&#xff0c;帮助读者更好地理解和应用数仓模型设计。 一、…...

编程日记 2024/3/5 1:55:06

MySQL 面试题

MySQL 基础 数据库的约束与范式&#xff1f; 七大约束&#xff1a; 检查约束&#xff1a;以数据类型以及数据的长度进行约束&#xff0c;在一个表中&#xff0c; 所插入的数据&#xff0c;必须和数据类型匹配&#xff0c;并且范围不能超过指定的长度。非空约束 not null&…...

编程日记 2024/3/5 1:52:04

计算机专业必看的十部电影

计算机专业必看的十部电影 1. 人工智能2. 黑客帝国3. 盗梦空间4. 社交网络5. Her6. 模仿游戏7. 斯诺登8. 头号玩家9. 暗网10. 网络迷踪 计算机专业必看的十部电影&#xff0c;就像一场精彩盛宴&#xff01; 《黑客帝国》让你穿越虚拟世界&#xff0c;感受高科技的魅力《模仿游戏…...

编程日记 2024/3/5 1:51:03

数据库之间数据迁移工具datax

简介 DataX 是阿里云 DataWorks数据集成 的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, databe…...

编程日记 2024/3/5 1:45:55

uniapp：根据环境（开发、测试、生产）选择服务器接口或者业务

一、根据环境&#xff08;开发、测试、生产&#xff09;选择服务器接口或者业务 打开main.js 页面&#xff0c;使用以下代码 const accountInfo wx.getAccountInfoSync(); const envWx accountInfo.miniProgram.envVersion; if (envWx develop) {console.log(开发环境&…...

编程日记 2024/3/5 1:42:51

Leetcode—63. 不同路径 II【中等】

2024每日刷题&#xff08;115&#xff09; Leetcode—63. 不同路径 II 动态规划算法思想 实现代码 class Solution { public:int uniquePathsWithObstacles(vector<vector<int>>& obstacleGrid) {int m obstacleGrid.size();int n obstacleGrid[0].size();…...

编程日记 2024/3/5 1:41:50

Redis 之三：Redis 的发布订阅（pub/sub）

概念介绍 Redis 发布订阅 (pub/sub) 是一种消息通信模式&#xff0c;它允许客户端之间进行异步的消息传递 Redis 客户端可以订阅任意数量的频道。 模型中的角色 在该模型中&#xff0c;有三种角色&#xff1a; 发布者&#xff08;Publisher&#xff09;&#xff1a;负责发送信…...

编程日记 2024/3/5 1:39:48

ngx_waf入门教程：保护你的Nginx服务器

ngx_waf入门教程&#xff1a;保护你的Nginx服务器 在今天的网络环境中&#xff0c;安全性是每个网站和应用程序都必须考虑的关键因素。Nginx作为一款流行的开源Web服务器和反向代理服务器&#xff0c;广泛应用于各种业务场景。为了增强Nginx的安全性&#xff0c;我们可以使用n…...

编程日记 2024/3/5 1:38:47

视觉Transformers中的位置嵌入 - 研究与应用指南

视觉 Transformer 中位置嵌入背后的数学和代码简介。 自从 2017 年推出《Attention is All You Need》以来&#xff0c;Transformer 已成为自然语言处理 (NLP) 领域最先进的技术。 2021 年&#xff0c;An Image is Worth 16x16 Words 成功地将 Transformer 应用于计算机视觉任务…...

编程日记 2024/3/5 1:36:45

真香定律！我用这种模式重构了第三方登录

分享是最有效的学习方式。 博客&#xff1a;https://blog.ktdaddy.com/ 老猫的设计模式专栏已经偷偷发车了。不甘愿做crud boy&#xff1f;看了好几遍的设计模式还记不住&#xff1f;那就不要刻意记了&#xff0c;跟上老猫的步伐&#xff0c;在一个个有趣的职场故事中领悟设计模…...

编程日记 2024/3/5 1:32:41

Linux入门到入土

Linxu Linux 简介 Linux 内核最初只是由芬兰人林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;在赫尔辛基大学上学时出于个人爱好而编写的。 Linux 是一套免费使用和自由传播的类 Unix 操作系统&#xff0c;是一个基于 POSIX&#xff08;可移植操作系统接口&#xff09…...

编程日记 2024/3/5 1:31:41

基础真空技术外国文献Fundamentals of Vacuum Technology

基础真空技术外国文献Fundamentals of Vacuum Technology...

编程日记 2024/3/5 1:29:36

LeetCode每日一题【c++版】- 用队列实现栈与用栈实现队列

用队列实现栈 题目描述 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除…...

编程日记 2024/3/5 1:28:35

深入理解快速排序算法：从原理到实现

目录 1. 引言 2. 快速排序算法原理 3. 快速排序的时间复杂度分析 4. 快速排序的应用场景 5. 快速排序的优缺点分析 5.1 优点&#xff1a; 5.2 缺点&#xff1a; 6. Java、JavaScript 和 Python 实现快速排序算法 6.1 Java 实现&#xff1a; 6.2 JavaScript 实现&#…...

编程日记 2024/3/5 1:27:35

设计模式----装饰器模式

在软件开发过程中&#xff0c;有时想用一些现存的组件。这些组件可能只是完成了一些核心功能。但在不改变其结构的情况下&#xff0c;可以动态地扩展其功能。所有这些都可以釆用装饰器模式来实现。 装饰器模式 允许向一个现有的对象添加新的功能&#xff0c;同时又不改变他的…...

编程日记 2024/3/5 1:24:32

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/9/11 12:54:47

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/7/11 5:22:11

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/9/22 15:00:47

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/24 4:22:09

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/9/23 1:00:09

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/9/25 5:56:27

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/9/22 4:42:05