css 个人喜欢的样式 速查笔记

起因, 目的:

记录自己喜欢的, 觉得比较好看的 css.
下次用的时候,直接复制,很方便。

1. 个人 html 模板, 导入常用的 link

  • 设置英语字体: Noto
  • 导入默认的 css
  • 使用网络 icon 图标
  • 导入 Bootstrap css 框架

html

<!-- 设置英语字体: Noto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><!--     使用 icon, 比如 <i class="fa-solid fa-info"></i>      -->
<!--     打开,https://fontawesome.com/icons, 然后搜索 info    -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="crossorigin="anonymous" referrerpolicy="no-referrer" /><!-- 导入自己的 css 文件 -->
<link rel="stylesheet" type="text/css" href="styles.css"><!-- 导入 Bootstrap 的 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
2. 常用 css 模板

todo, 以后再增加。

* {font-family: "Noto Serif", system-ui;font-optical-sizing: auto;
}

Noto 字体效果:
在这里插入图片描述

走过路过,支持一下啊。

zfb

wx

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单好用的OCR API

现如今&#xff0c;越来越多的科技产品可以帮助我们改善和提高相应的工作效率。OCR技术的出现&#xff0c;提高了人们的工作效率&#xff0c;其应用领域及其广泛。就拿应用了OCR技术的翔云文档识别服务来说&#xff0c;只需上传文档图片便可自动识别并返回文档中相应的内容。翔…

vue+IntersectionObserver + scrollIntoView 实现电梯导航

一、电梯导航 电梯导航也被称为锚点导航&#xff0c;当点击锚点元素时&#xff0c;页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧&#xff0c;类似电梯一样。 二、scrollIntoView() 介绍 scrollIntoView() 方法会…

erlang学习: Mnesia Erlang数据库2

Mnesia数据库增加与查询学习 -module(test_mnesia).-record(shop, {item, quantity, cost}). -record(cost, {name, price}). -record(design, {info, plan}). %% API -export([insert/3,select/1,start/0]). start() ->mnesia:start().insert(Name, Quantity, Cost) ->…

k8s的Ingress控制器安装

Ingress文档地址&#xff1a;Ingress文档 1.安装helm 官网地址&#xff1a;helm官网安装 wget https://get.helm.sh/helm-v3.2.3-linux.amd64.tar.gz tar -zxvf helm-v3.2.3-linux-amd64.tar.gz cp linux-amd64/helm /usr/local/bin/ rootmaster01:~# helm version version.B…

《python语言程序设计》2018版第8章第14题金融:信用卡号合法性 利用6.29题

一、之前6.29题我做的代码 这是用数字来进行分辨的 is_txt 4383576018402626 #合法def split_the_data_even(vis_n):current_a1 vis_n // 10000a_t1 vis_n % 10000# print("1th", a_t1)a_t2 current_a1 % 10000# print("2th", a_t2)current_a3 curre…

Python设计模式实战:开启软件设计的精进之旅

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

Elasticsearch7.x 集群迁移文档

一、集群样例信息 集群名称&#xff1a;escluster-ali-test 1、源集群:&#xff08;source_cluster&#xff09; 节点IP节点名称节点角色是否为master节点10.200.112.149es2.gj1.china-job.cndata,master是10.200.112.151es1.gj1.china-job.cndata,master否10.200.112.153es…

【VUE】11、安装nvm管理多个版本的node.js

1、简介 nvm 全称为 Node Version Manager&#xff0c;即 Node.js 版本管理器。它是一个用于在同一台机器上管理多个 Node.js 版本的工具。通过 nvm&#xff0c;用户可以轻松地安装、切换、卸载不同版本的 Node.js&#xff0c;而无需担心版本冲突或环境变量配置问题。这使得开…

python绘制3D瀑布图

成品&#xff1a; 代码&#xff1a; def line_3d(x, y, z, x_label_indexs):"""在y轴的每个点&#xff0c;向x轴的方向延伸出一个折线面&#xff1a;展示每个变量的时序变化。x: x轴&#xff0c;时间维&#xff0c;右边。y: y轴&#xff0c;变量维&#xff0c;…

Ubuntu20.04 Docker中换apt源实录 (安装vim过慢解决方案)

1. 查看/etc/os-release $ cat /etc/os-releasePRETTY_NAME"Debian GNU/Linux 12 (bookworm)" NAME"Debian GNU/Linux" VERSION_ID"12" VERSION"12 (bookworm)" VERSION_CODENAMEbookworm IDdebian HOME_URL"https://www.debian…

《OpenCV计算机视觉》—— 图像形态学(腐蚀、膨胀等)

文章目录 一、图像形态学基本概念二、基本运算1.简单介绍2.代码实现 三、高级运算1.简单介绍2.代码实现 一、图像形态学基本概念 图像形态学是图像处理科学的一个独立分支&#xff0c;它基于集合论和数学形态学的理论&#xff0c;专门用于分析和处理图像中的形状和结构。图像形…

linux学习之线程2:线程控制与使用

铺垫 之前我们提到&#xff0c;Linux不直接对线程进行调度&#xff0c;而是对轻量级进程进行调度。但用户就想像Windows那样直接对线程进程控制。所以&#xff0c;就有了pthread库来封装了一层。 那么想要进行线程控制&#xff0c;要用pthread库。&#xff08;pthread库是原生…

Java面试题-基础和框架-Java面试题三

JMM 8 Q1&#xff1a;JMM 的作用是什么&#xff1f; Java 线程的通信由 JMM 控制&#xff0c;JMM 的主要目的是定义程序中各种变量的访问规则。变量包括实例字段、静态字段&#xff0c;但不包括局部变量与方法参数&#xff0c;因为它们是线程私有的&#xff0c;不存在多线程竞…

Spire.PDF for .NET【文档操作】演示:创比较 PDF 文档

PDF 已成为跨不同平台共享和保存文档的标准格式&#xff0c;在专业和个人环境中都发挥着无处不在的作用。但是&#xff0c;创建高质量的 PDF 文档需要多次检查和修订。在这种情况下&#xff0c;了解如何有效地比较 PDF 文件并找出它们的差异变得至关重要&#xff0c;这使文档编…

《Python编程:从入门到实践》外星人入侵

一、规划 在游戏《外星人入侵》中&#xff0c;玩家控制着一艘最初出现在屏幕底部中央的飞船。玩家可以使用箭头键左右移动飞船&#xff0c;还可使用空格键进行射击。游戏开始时&#xff0c;一群外星人出现在天空中&#xff0c;他们在屏 幕中向下移动。玩家的任务是射杀这些外星…

潘多拉的盒子还是阿拉丁的神灯:揭示RAG噪声在大语言模型中的作用

一、结论写在前面 论文来自清华大学、北京国家信息科学与技术研究中心 论文标题&#xff1a;Pandora’s Box or Aladdin’s Lamp: A Comprehensive Analysis Revealing the Role of RAG Noise in Large Language Models 论文链接&#xff1a;https://arxiv.org/pdf/2408.135…

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式&#xff0c;需要不断条件和优化提示词。记录一下调整好的提示词&#xff0c;以后在继续优化迭代。 1. 提示词 英文版本&#xff1a; You are an AI as…

C/C++ let __DATE__ format to “YYYY-MM-DD“

C/C let DATE format to “YYYY-MM-DD” code&#xff1a; #include <iostream> #include <string>class compileDate {// 静态函数&#xff0c;用来格式化并返回编译日期 static std::string formatCompileDate() {// 编译时的日期&#xff0c;格式为 "MMM…

【包教包会】CocosCreator3.x拖尾MotionStreak威力加强版(支持3.x、支持原生、可合批)

将去年写的2.x拖尾升级到3.x 完美适配Web、原生平台&#xff08;其余平台没测过&#xff09;。 保留原版功能&#xff08;拖尾会跟随节点位移、缩放、受节点透明度影响&#xff0c;但不会跟随节点旋转&#xff09; 支持世界坐标 / 本地坐标切换&#xff08;至于为什么需要这…

10.Shell 截取字符串

Shell 截取字符串通常有两种方式&#xff1a;从指定位置开始截取和从指定字符&#xff08;子字符串&#xff09;开始截取。 从指定位置开始截取 这种方式需要两个参数&#xff1a;除了指定起始位置&#xff0c;还需要截取长度&#xff0c;才能最终确定要截取的字符串。 既然…