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

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

news 2026/1/14 10:04:40

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/1/13 13:50:39

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/4 15:07:07

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/10 4:51:27

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/10 10:57:47

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/2 13:21:11