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

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

news 2026/4/6 18:04:47

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

一键隐藏桌面图标任务栏的实用工具

软件介绍 AutoDesktop是一个专门管理桌面图标显示与隐藏的小工具。它的作用很简单&#xff1a;一键把桌面上乱七八糟的图标和底部的任务栏全都藏起来&#xff0c;还你一个干干净净的桌面。 体积小巧运行轻量 整个软件才40K大小&#xff0c;真的非常小。双击运行后会自动关闭…...

编程新知 2026/4/6 16:06:47

Open-AutoGLM自动化测试：用自然语言编写移动应用测试用例

Open-AutoGLM自动化测试&#xff1a;用自然语言编写移动应用测试用例 1. 项目概述 Open-AutoGLM是由智谱AI开源的一款革命性手机端智能助理框架&#xff0c;专为自动化手机操作而设计。该项目基于AutoGLM架构构建&#xff0c;采用Apache-2.0开源协议&#xff0c;完全免费且支…...

编程新知 2026/4/6 15:48:37

智能编码伙伴：基于快马AI与openclaw打造你的AI辅助开发chrome插件

最近在开发一个Chrome插件时&#xff0c;发现结合AI能力可以大幅提升开发效率。于是尝试用openclaw框架和InsCode(快马)平台的AI辅助功能&#xff0c;打造了一个智能开发助手插件。这个项目让我深刻体会到AI如何改变传统插件开发模式&#xff0c;下面分享下具体实现思路和关键点…...

编程新知 2026/4/6 15:38:26

如何快速制作Windows 11启动盘：Rufus终极USB启动盘制作指南

如何快速制作Windows 11启动盘&#xff1a;Rufus终极USB启动盘制作指南 【免费下载链接】rufus The Reliable USB Formatting Utility 项目地址: https://gitcode.com/GitHub_Trending/ru/rufus Rufus是一款专业级USB启动盘制作工具&#xff0c;专门用于创建可启动的USB…...

编程新知 2026/4/6 12:33:59

突破移动端AI交互瓶颈：本地化解决方案全解析

突破移动端AI交互瓶颈&#xff1a;本地化解决方案全解析 【免费下载链接】Duix-Mobile &#x1f680; The best real-time interactive AI avatar(digital human) with on-premise deployment and <1.5 s latency. 项目地址: https://gitcode.com/GitHub_Trending/du/Duix…...

编程新知 2026/4/6 11:45:20

如何高效一键完整导出QQ空间历史说说：GetQzonehistory专业指南

如何高效一键完整导出QQ空间历史说说&#xff1a;GetQzonehistory专业指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory GetQzonehistory是一款专业的开源工具&#xff0c;专门用于自…...

编程新知 2026/4/6 10:46:42

告别‘白边’！用HBuilderX给你的UniApp应用做个全屏SPA：安卓透明导航栏+iOS安全区域配置详解

全屏SPA美学&#xff1a;UniApp应用透明导航栏与安全区域配置实战指南 当你在手机上打开一个视频应用&#xff0c;最影响沉浸感的往往不是内容本身&#xff0c;而是那些挥之不去的系统UI元素——安卓底部的虚拟导航栏、iOS标志性的"刘海"安全区域。这些设计本意是为…...

编程新知 2026/4/6 10:02:20

如何在VMware上运行macOS虚拟机：终极Unlocker完整指南

如何在VMware上运行macOS虚拟机&#xff1a;终极Unlocker完整指南 【免费下载链接】unlocker VMware Workstation macOS 项目地址: https://gitcode.com/gh_mirrors/unloc/unlocker 你是不是一直想在Windows或Linux电脑上体验macOS系统&#xff0c;却被VMware的限制挡在…...

编程新知 2026/4/6 9:58:11

DS4Windows进阶指南：让PlayStation手柄在PC平台发挥极致性能

DS4Windows进阶指南&#xff1a;让PlayStation手柄在PC平台发挥极致性能 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows DS4Windows是一款开源工具&#xff0c;专为解决PlayStation手柄在…...

编程新知 2026/4/6 9:58:04

HY-SRF05超声波模块的5个常见误区及优化技巧（附STM32代码）

HY-SRF05超声波模块的5个常见误区及优化技巧&#xff08;附STM32代码&#xff09; 在嵌入式开发中&#xff0c;HY-SRF05超声波模块因其成本低廉、使用简单而广受欢迎。但很多开发者在使用过程中常会遇到测量不稳定、精度不足等问题。本文将深入剖析五个最常见的误区&#xff0c…...

编程新知 2026/4/6 9:39:59