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

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

news 2026/5/23 9:10:29

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

国产芯片独角兽IPO热潮来袭，百度昆仑芯与阿里平头哥角逐RISC-V弯道超车机遇

国产芯片好消息不断&#xff0c;长鑫科技与长江存储启动IPO&#xff0c;百度昆仑芯、阿里平头哥也有相关动作。互联网大厂钟情自研AI芯片&#xff0c;昆仑芯与平头哥发展路径不同&#xff0c;RISC-V或是弯道超车关键。国产芯片独角兽登场被誉为“存储双雄”的长鑫科技与长江存储…...

编程新知 2026/5/23 9:07:32

安科士（AndXe）SPF-10G-T ：10G 电口模块，重塑短距网络升级性价比

数字化转型浪潮下&#xff0c;企业园区、数据中心对10Gbps 高速互联的需求呈爆发式增长。但传统 10G 升级方案深陷困境&#xff1a;光纤布线成本高昂、施工周期长且需专业运维技能&#xff0c;而多数企业机架内、相邻机架间及办公楼层内的链路距离普遍低于 30 米&#xff0c;光…...

编程新知 2026/5/23 7:55:28

数字孪生赋能设备预测性维护：构建工业设备全生命周期智能运维新模式

在智能制造加速推进的今天&#xff0c;工业设备作为生产体系的核心资产&#xff0c;其稳定运行直接决定着企业的生产效率、产品质量与经济效益。但据行业统计&#xff0c;全球制造业每年因设备非计划停机造成的损失超过 5000 亿美元&#xff0c;单台关键设备每分钟停机损失可达…...

编程新知 2026/5/23 7:31:35

APT32F110 RTC实战：从配置校准到低功耗应用全解析

1. 项目概述与核心价值最近在捣鼓爱普特APT32F110这块开发板&#xff0c;发现它内置的RTC&#xff08;实时时钟&#xff09;模块挺有意思。对于很多嵌入式项目来说&#xff0c;时间戳记录、定时唤醒、低功耗运行这些功能都离不开一个靠谱的RTC。APT32F110作为一款主打高性价比和…...

编程新知 2026/5/23 7:25:12

DownloadButton与Auto Layout完美结合：适配各种屏幕尺寸的下载按钮布局

DownloadButton与Auto Layout完美结合&#xff1a;适配各种屏幕尺寸的下载按钮布局 【免费下载链接】DownloadButton Customizable App Store style download button 项目地址: https://gitcode.com/gh_mirrors/do/DownloadButton DownloadButton是一款高度可定制的App …...

编程新知 2026/5/23 4:49:23

用 shell 命令做 AI Agent 的插件系统：为什么 Hook 不是函数调用

用 shell 命令做 AI Agent 的插件系统&#xff1a;为什么 Hook 不是函数调用 这是 《写完一个 AI 编程助手之后&#xff0c;我才确定 prompt 工程不是重点》 系列的第七篇&#xff08;最后一篇&#xff09;。前六篇讲了进程模型、权限、并发调度、上下文压缩、记忆系统。这一篇…...

编程新知 2026/5/23 4:06:41

深入LTPI状态机：为什么你的链路配置总失败？Advertise与Configure状态详解

深入LTPI状态机&#xff1a;为什么你的链路配置总失败&#xff1f;Advertise与Configure状态详解 在LTPI协议的实际部署中&#xff0c;许多工程师都会遇到一个令人困惑的现象&#xff1a;明明按照规范完成了链路训练&#xff0c;却在配置阶段频繁出现回退到Link Detect状态的情…...

编程新知 2026/5/23 2:45:46

论软件系统建模方法及其应用——以飞秒激光加工控制系统为例

摘要 2024年1月，我参与了某精密制造企业“高精度飞秒激光加工控制系统”项目的研发，担任系统架构设计师，主要负责系统建模、核心模块设计与集成测试。该项目旨在开发一套用于航空叶片微孔加工的数控系统，要求实现1μm的定位精度、实时补偿与工艺自适应调整。系统具有强实时…...

编程新知 2026/5/23 2:25:03

哈尔滨除甲醛本地推荐

新房装修完工本是喜事&#xff0c;但刺鼻异味与甲醛却令人困扰。哈尔滨冬季供暖期长&#xff0c;室内密闭时间长&#xff0c;甲醛释放周期可达3-15年&#xff0c;仅靠通风难以根除。许多业主在除甲醛时踩坑&#xff1a;要么找了不靠谱的游击队治理无效&#xff0c;要么被低价套…...

编程新知 2026/5/23 1:50:21

Vue/React/Svelte通用Lovable实践框架（内部首发）：1套配置+4个插件=自动注入用户喜爱度

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Vue/React/Svelte通用Lovable实践框架&#xff08;内部首发&#xff09;&#xff1a;1套配置4个插件自动注入用户喜爱度 Lovable 是一套面向用户体验&#xff08;UX&#xff09;可量化提升的前端工程化实践框架…...

编程新知 2026/5/23 1:32:36