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.rhkb.cn/news/425031.html

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

相关文章

【Python】谷歌浏览器总是自动更新,使用selenium跟chromedriver版本不匹配怎么办?

我发现&#xff0c;我的电脑对谷歌浏览器的禁止自动更新无效&#xff0c;哪怕是在任务计划程序里&#xff0c;禁止谷歌浏览器更新&#xff0c;也没有用。而且有时候点开右上角的三个点&#xff0c;也会自动更新版本。 但是往往chromedriver的更新版本更不上浏览器的版本哇&…

RPC远程调用的序列化框架

序列化框架对比&#xff1a; 一、Java Serialiazer 字段serialVersionUID的作用是为了在序列化时保持版本的兼容性&#xff0c;即版本升级时反序列化仍保持对象的唯一性。 //序列化 ByteArrayOutputStream bout new ByteArrayOutputStream(); ObjectOutoutStream out new O…

测试-Gatling 与性能测试

Gatling 与性能测试详解 一、什么是性能测试&#xff1f; 性能测试是一种软件测试类型&#xff0c;旨在评估系统在负载下的响应时间、吞吐量和资源利用率等性能指标。通过性能测试&#xff0c;开发者和运维团队能够识别出系统的瓶颈、优化系统性能&#xff0c;并确保其在实际…

使用kkFileView的几个问题

经测试&#xff0c;可以正常的预览&#xff1a;pdf&#xff0c;png&#xff0c;pptx&#xff0c;psd&#xff0c;zip&#xff0c;word&#xff0c;dcm(医学片子 dr ct等) 部署发布&#xff08;Linux&#xff09; 一、上传到服务器 上传jar包&#xff08;或者官方社区提供的包…

【Linux】精通GDB:打造你的Linux调试超能力

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;C从入门到精通 目录 一&#xff1a; &#x1f525; 什么是GDB / CGDB 二&#xff1a; &#x1f525; CGDB的安装 &#x1f34a; Linux-centos 三&#xff1a; &#x1f525; cgdb的使用背景 &#…

深度剖析iOS渲染

iOS App 图形图像渲染的基本流程&#xff1a; 1.CPU&#xff1a;完成对象的创建和销毁、对象属性的调整、布局计算、文本的计算和排版、图片的格式转换和解码、图像的绘制。 2.GPU&#xff1a;GPU拿到CPU计算好的显示内容&#xff0c;完成纹理的渲染&#xff0c; 渲染完成后将渲…

界面控件DevExpress中文教程:如何PDF图形对象的可见性?

DevExpress拥有.NET开发需要的所有平台控件&#xff0c;包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress 近期重要版本v24.1已正式发布&#xff0c;该版本拥有众多新产…

STM32与ESP8266的使用

串口透传 “透传”通常指的是数据的透明传输&#xff0c;意思是在不对数据进行任何处理或修改的情况下&#xff0c;将数据从一个接口转发到另一个接口。值得注意的是要避免串口之间无限制的透明&#xff0c;可以采用互斥锁的方式进行限制使用方法 对USART1和USART3(用他俩举例…

word文档无损原样转pdf在windows平台使用python调用win32com使用pip安装pywin32

前提&#xff1a; windows环境下&#xff0c;并且安装了office套装&#xff0c;比如word,如果需要调用excel.也需要安装。在另外的文章会介绍。这种是直接调用word的。所以还原度会比较高。 需求&#xff1a; word文档转pdf,要求使用命令行形式&#xff0c;最终发布为api接口…

基于高通主板的ARM架构服务器

一、ARM架构服务器的崛起 &#xff08;一&#xff09;市场需求推动 消费市场寒冬&#xff0c;全球消费电子需求下行&#xff0c;服务器成半导体核心动力之一。Arm 加速布局服务器领域&#xff0c;如 9 月推出 Neoverse V2。长久以来&#xff0c;x86 架构主导服务器市场&#…

QTreeView模糊查询

本文代码效果如下&#xff1a; 本文代码&#xff1a; https://download.csdn.net/download/Sakuya__/89759410https://download.csdn.net/download/Sakuya__/89759410 代码之路 MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #incl…

基于Ant-Design-Vue设计的配置化表单

适用vue 3.4 版本以上 在日常的前端开发中&#xff0c;表单开发必不可少&#xff0c;尤其是在遇到一些大型的复杂的表单&#xff0c;这往往会变成一个痛点。于是就想着开发一个可以list来配置的表单组件。 先上组件代码 <!-- 该组件 VUE 版本在 3.4 以上可使用--> <…

【QT】定时器使用

文章目录 关于 Qt 定时器使用的注意细节总结实例-检查工具使用周期时间是否合理UI设计头文件 remind.h源文件 remind.cpp实现效果 关于 Qt 定时器使用的注意细节总结 一、创建与初始化 使用 QTimer 类来创建定时器。可以在构造函数中指定父对象&#xff0c;确保定时器在正确的…

JavaDS —— B树

前言 本章节将带领大家进入B树的学习&#xff0c;主要介绍B树的概念和B树的插入代码的实现&#xff0c;删除代码不做讲解&#xff0c;最后简单介绍B树和B*树。 B树的概念 1970年&#xff0c;R.Bayer和E.mccreight提出了一种适合外查找的树&#xff0c;它是一种平衡的多叉树&…

【制作100个unity游戏之32】unity开发属于自己的一个2d/3d桌面宠物,可以实时计算已经获取的工资

最终效果 文章目录 最终效果一、实现Windows消息弹窗二、将窗口扩展到工作区三、穿透能点击到其他区域四、模型交互1、我们可以新增ObjectDrag 代码控制人物拖拖动2、实现模型交互五、最终代码六、其他七、游玩地址七、源码参考完结一、实现Windows消息弹窗 参考:https://lear…

WEB打点

目录 web打点概述打点流程打点中的问题getshell手法汇总web打点批量检测端口扫描POC扫描指纹识别漏洞扫描 手工检测开源框架漏洞通用框架漏洞基础web漏洞商用系统漏洞 WAF绕过waf分类常见waf拦截界面WAF绕过思路侧面绕&#xff1a;适合云WAF直面WAF web打点概述 打点流程 资产…

QT模型视图结构2

文章目录 Qt 模型视图结构——模型类(二)1.基本概念1.1.模型的基本结构1.2.模型索引1.3.行号和列号1.4.父项1.5.项的角色 Qt 模型视图结构——模型类(二) ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模型存储数据&#xff0c;视图组件显示模型中的数据&#…

【AI赋能医学】基于深度学习和HRV特征的多类别心电图分类

一、数据集简介 论文中使用了来自三类不同心电图记录的162条数据&#xff0c;这些数据来自三个公开的数据库&#xff1a; MIT-BIH 心律失常数据库 (ARR) 96条记录&#xff0c;主要包含不同类型的心律失常样本。 MIT-BIH 正常窦性心律数据库 (NSR) 36条记录&#xff0c;包含健…

Gitlab实现多项目触发式自动CICD

工作中可能会遇到这种场景&#xff0c;存在上游项目A和下游项目B&#xff0c;项目B的功能依赖项目A&#xff08;比如B负责日志解析&#xff0c;A是日志描述语言代码&#xff09;&#xff0c;这种相互依赖的项目更新流程一般如下&#xff1a; A项目更新&#xff0c;通知B项目开发…

Unity中InputField一些属性的理解

先看代码&#xff1a; using UnityEngine; using UnityEngine.UI;public class TestInput : MonoBehaviour {[SerializeField]InputField inputField;void Start(){Debug.Log(inputField.text);Debug.Log(inputField.text.Length);Debug.Log(inputField.preferredWidth);Debug…