【CSS】CSS 样式重置 (normalize.css 和 reset.css) 和通用样式配置

一般来说,每一个项目初始化阶段都需要样式重置和样式定制化。样式重置最常用的就是 normalize.css 和 reset.css 这两个文件。

他们的区别:

  • Normalize.css更加注重保留有用的浏览器默认样式,仅修复浏览器之间的不一致性,适用于需要一致性、可访问性和可用性的项目。
  • Reset CSS则取消了所有浏览器的默认样式,并使用开发者自己定义的样式来构建网页,适用于需要更多自定义的项目。

上述来源:normalizecss_and_reset_css

所以我再项目中一般会安装 normalize.css

npm i normalize.css

之后全局引入:

import "normalize.css";

然后手动创建 reset.css :

body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: top;
}

ul, li {
  list-style: none;
}

button {
  outline: none;
  border: none;
}

在这里插入图片描述

还有一个文件:common.css 是配置全局通用 css 文件,比如:

body,
textarea,
select,
input,
button {
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f5f5;
}

.wrap-v1 {
  width: 1100px;
  margin: 0 auto;
}

.wrap-v2 {
  width: 980px;
  margin: 0 auto;
}

.sprite_01 {
  background: url(../img/sprite_01.png) no-repeat 0 9999px;
}

.sprite_02 {
  background: url(../img/sprite_02.png) no-repeat 0 9999px;
}

.sprite_cover {
  background: url(../img/sprite_cover.png) no-repeat 0 9999px;
}

.sprite_icon {
  background: url(../img/sprite_icon.png) no-repeat 0 9999px;
}

.sprite_icon2 {
  background: url(../img/sprite_icon2.png) no-repeat 0 9999px;
}

.sprite_icon3 {
  background: url(../img/sprite_icon3.png) no-repeat 0 9999px;
}

.sprite_button {
  background: url(../img/sprite_button.png) no-repeat 0 9999px;
}

.sprite_button2 {
  background: url(../img/sprite_button2.png) no-repeat 0 9999px;
}

.sprite_table {
  background: url(../img/sprite_table.png) no-repeat 0 9999px;
}

.sprite_playbar {
  background: url(../img/playbar_sprite.png) no-repeat 0 9999px;
}

.sprite_playlist {
  background: url(../img/playlist_sprite.png) no-repeat 0 9999px;
}
.ant-message {
  left: 0 !important;
  transform: none !important;
}
.ant-message-notice-content {
  position: fixed !important;
  left: 50% !important;
  bottom: 60px;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #fff;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

动态规划——两个数组的dp问题

目录 一、最长公共子序列 二、不同的子序列 三、通配符匹配 四、正则表达式匹配 五、两个字符串的最小ASCII删除和 六、最长重复子数组 七、交错字符串 一、最长公共子序列 最长公共子序列 第一步:确定状态表示 dp[i][j]:表示字符串 s1 的 [0&am…

安卓13默认连接wifi热点 android13默认连接wifi

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析4.代码修改5.编译6.彩蛋1.前言 有时候我们需要让固件里面内置好,相关的wifi的ssid和密码,让固件起来就可以连接wifi,不用在手动操作。 2.问题分析 这个功能,使用普通的安卓代码就可以实现了。 3.代…

Kubernetes:(三)Kubeadm搭建K8s 1.20集群

文章目录 一、Kubeadm安装流程二、实验1.环境准备2.所有节点安装kubeadm,kubelet和kubectl(除了Harbor节点)3.部署 Dashboard4.安装Harbor私有仓库 一、Kubeadm安装流程 集群名称IP地址安装软件master(2C/4G,cpu核心数…

杨传辉:云+AI 时代的一体化数据库|OceanBase发布会实录

在 2024 OceanBase 年度发布会 上, OceanBase CTO 杨传辉进行了主题为《云和 AI 时代的一体化数据库战略思考》的演讲,本文为演讲实录,欢迎阅读。 视频观看可点击:https://www.oceanbase.com/video/9001825 各位 OceanBase 的客…

ChatGPT变AI搜索引擎!以后还需要谷歌吗?

前言 在北京时间11月1日凌晨,正值ChatGPT两岁生日之际,OpenAI宣布推出最新的人工智能搜索体验!具备实时网络功能!与 Google 展开直接竞争。 ChatGPT搜索的推出标志着ChatGPT成功消除了即时信息这一最后的短板。 这项新功能可供 …

QT——记事本项目

目录 1.给pushButton按键添加图片 1.1 首先复制存放图片的文件夹,打开Qt回到编辑页面,右键单击pro文件选择在Explorer中显示,将图片文件夹粘贴进去你的代码同目录即可 1.2 创建一个新的文件夹 1.3 点击Add Files,将所有图片添加…

【在Linux世界中追寻伟大的One Piece】Socket编程TCP(续)

目录 1 -> V2 -Echo Server多进程版本 2 -> V3 -Echo Server多线程版本 3 -> V3-1 -多线程远程命令执行 4 -> V4 -Echo Server线程池版本 1 -> V2 -Echo Server多进程版本 通过每个请求,创建子进程的方式来支持多连接。 InetAddr.hpp #pragma…

为什么可视化大屏要有动态效果,都有哪些类型的效果。

可视化大屏已成为企业和组织展示关键信息的重要工具。这些大屏不仅需要清晰地传达数据,还要吸引观众的注意力并提供深刻的洞察。动态效果在这一过程中扮演着至关重要的角色。 动态效果的重要性 动态效果在可视化大屏中的应用,基于以下几个核心原因 吸…

【C/C++】字符/字符串函数(0)(补充)——由ctype.h提供

零.导言 除了字符分类函数,字符转换函数也是一类字符/字符串函数。 C语言提供了两种字符转换函数,分别是 toupper , tolower。 一.什么是字符转换函数? 顾名思义,即转换字符的函数,如大写字母转小写字母&am…

Hive数据库操作语法

数据类型 内部表和外部表 内部表 (CREATE TABLE table_name ......)未被external关键字修饰的即是内部表, 即普通表。 内部表又称管理表,内部表数据存储的位置由hive.metastore.warehouse.dir参数决定(默认:/user/h…

线程基础知识、jmm(Java内存模型)

目录 线程基础知识 并发与并行 进程和线程 线程优先级 创建线程的方式主要有三种 休眠 作出让步 join() 方法 线程协作注意什么 理解线程状态 选择合适的协作工具 共享资源的访问控制 避免竞争条件 创建线程几种方式 线程状态,状态之间切换 新建&…

图解大模型训练系列:序列并行2,DeepSpeed Ulysses

最近已有不少大厂都在秋招宣讲,也有一些已在 Offer 发放阶段了。 节前,我们邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对新手如何入门算法岗、该如何准备面试攻略、面试常考点、大模型技术趋势、算法项目落地经验分享等热门话题进行…

MP4650模块改为固定电压记录

目标 这种电源模块,可调电位器质量不太好,可调输出电压改为固定电压。 方法 步骤 按照下图,将计算得到的R1 补到 待添加电阻处。 结论 作者使用输出5V,R1电阻使用5.1K,得到输出电压4.8V; 测试输出电流1A…

51单片机教程(二)- 创建项目

1 创建项目 创建项目存储文件夹:C51Project 打开Keil5软件,选择 Project -> New uVision Project: 选择项目路径,即刚才创建的文件夹 选择芯片,选择 Microchip(微型集成电路)&#xff0…

STM32 HAL库 SPI驱动1.3寸 OLED屏幕

目录 参考硬件引脚与接线 点亮屏幕CubeMX 配置OLED 驱动程序代码 参考 基于STM32F103C8T6最小系统板HAL库CubeMX SPI驱动7针 OLED显示屏(0.96寸 1.3寸通用)0.96 oled HAL库驱动 SPI STM32SPI驱动0.96/1.3寸 OLED屏幕,易修改为DMA控制STM32驱…

通过分解质因数求若干个数的最小公倍数

求最小公倍数的常规方法回顾 暴力枚举法 long long work(long long a,long long b) {for(long long imax(a,b);;i)if(i%a0&&i%b0)return i; }大数翻倍法 long long work(long long a,long long b) {if(a<b) swap(a,b);for(long long ia;;ia) // i 是 a 的倍数&#…

突出显示与条件匹配的列值

Goto Appearance and Conditional Formatting 外观和条件格式 突出显示与条件匹配的列值 本教程说明如何将条件格式应用于 GridControl 中的 Market Share 列&#xff0c;以突出显示与特定条件匹配的单元格。此示例突出显示小于 20% 的 Market Share 列值。 要在设计时创建新…

node.js下载、安装、设置国内镜像源(永久)(Windows11)

目录 node-v20.18.0-x64工具下载安装设置国内镜像源&#xff08;永久&#xff09; node-v20.18.0-x64 工具 系统&#xff1a;Windows 11 下载 官网https://nodejs.org/zh-cn/download/package-manager 版本我是跟着老师选的node-v20.18.0-x64如图选择 Windows、x64、v20.18…

嵌入式开发教程之Linux下IO流

一、文件的概念和类型 文件基础&#xff1a; 概念&#xff1a;一组相关数据的有序集合&#xff0c;文件名、路径。通过文件名指定访问什么文件。 文件类型&#xff1a; 常规文件 r&#xff0c;分为&#xff1a;普通文件&#xff0c;文本文件&#xff08;可见字符&#xff09…

【Python】Python自习课:第一个python程序

【Python】Python自习课&#xff1a;第一个python程序