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

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

news 2026/2/10 21:31:22

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

Linux链表操作全解析

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

编程新知 2025/12/3 20:14:32

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/2/6 1:00:25

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/11/19 18:06:51

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19