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;这里都有一片属于您的天空。让我们在知识的海洋中…

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;…

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

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

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

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

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…

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

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

[论文笔记]LLM.int8(): 8-bit Matrix Multiplication for Transformers at Scale

引言 今天带来第一篇量化论文LLM.int8(): 8-bit Matrix Multiplication for Transformers at Scale笔记。 为了简单&#xff0c;下文中以翻译的口吻记录&#xff0c;比如替换"作者"为"我们"。 大语言模型已被广泛采用&#xff0c;但推理时需要大量的GPU内…

2024年智能录屏解决方案全攻略,从桌面到云端

如果你有过录屏经验那你一定遇到过被限制录制时长或者录制的画面比较模糊之类的情况。这次我我推荐几款免费录屏软件&#xff0c;让我们可以更自由的录制屏幕画面。 1.福晰REC大师 链接&#xff1a;www.foxitsoftware.cn/REC/ 这款软件便捷好操作&#xff0c;而且符合我这次…

post请求中有[]报400异常

序言 在和前端同学联调的时候&#xff0c;发现只要post请求参数里面有[]&#xff0c;就会报400的错误 可以看到日志中&#xff1a; The valid characters are defined in RFC 7230 and RFC 3986 解决办法&#xff1a; 参考了博客&#xff1a; spring boot 中解决post请求中有…

辽宁汇聚公益慈善力量,绿葆网络助力辽宁绿色生态建设,彰显企业大爱

9月5日&#xff0c;于辽宁省沈阳市隆重举行的“中华慈善日”主题宣传活动暨“山海有情 天辽地宁”即开型福利彩票发行、“生态公益林”项目启动仪式上&#xff0c;广州绿葆网络发展有限公司作为受邀企业之一&#xff0c;积极履行社会责任&#xff0c;向辽宁省慈善联合总会捐赠了…

Linxu系统:kill命令

1、命令详解&#xff1a; kill命令是用于向进程发送信号&#xff0c;通常用来终止某个指定PID服务进程&#xff0c;kill命令可以发送不同的信号给目标进程&#xff0c;来实现不同的操作&#xff0c;如果不指定信号&#xff0c;默认会发送 TERM 信号&#xff08;15&#xff09;&…

[论文笔记]Making Large Language Models A Better Foundation For Dense Retrieval

引言 今天带来北京智源研究院(BAAI)团队带来的一篇关于如何微调LLM变成密集检索器的论文笔记——Making Large Language Models A Better Foundation For Dense Retrieval。 为了简单&#xff0c;下文中以翻译的口吻记录&#xff0c;比如替换"作者"为"我们&quo…

Deploying Spring Boot Apps Tips

Java PaaS providers chatter command Efficient deployments See also spring-boot-reference.pdf https://docs.spring.io/spring-framework/reference/integration/checkpoint-restore.html