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

【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;
}

相关文章:

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

一般来说,每一个项目初始化阶段都需要样式重置和样式定制化。样式重置最常用的就是 normalize.css 和 reset.css 这两个文件。 他们的区别: Normalize.css更加注重保留有用的浏览器默认样式,仅修复浏览器之间的不一致性,适用于需…...

自动化机器学习(AutoML)详解

自动化机器学习(AutoML)详解 引言 在数据驱动的时代,将庞大的数据集转化为有价值的洞察和预测模型是众多组织的首要任务。然而,传统的机器学习流程复杂且耗时,包括数据预处理、特征选择、模型选择、调参以及模型评估…...

Linux: network:erspan0

文章目录 问题介绍生成时间:代码Linux引入后面NONE是怎么生成的问题 最近看到一个网卡是erspan0,不知道是做什么用的: # ip -d link show erspan0 7: erspan0@NONE: <BROADCAST,MULTICAST> mtu 1450 qdisc noop state DOWN mode DEFAULT group default qlen 10000...

第11课 计算思维

从二级考试开始&#xff0c;计算思维基本上以编程题的形式考察。为了避免一看就会&#xff0c;一写就废的情况&#xff0c;需要我们加强编程练习&#xff0c;把学到的知识&#xff0c;通过实战练习&#xff0c;变成自己的本领。 同一道题&#xff0c;一般会有多种解决方法&…...

ACL, ACL Workshop, ACL Findings 解释

ACL&#xff08;Annual Conference of the Association for Computational Linguistics&#xff09;是自然语言处理&#xff08;NLP&#xff09;领域的顶级会议之一&#xff0c;但确实有多个与ACL相关的会议和出版物&#xff0c;具体如下&#xff1a; ACL Main Conference&…...

《使用Gin框架构建分布式应用》阅读笔记:p272-p306

《用Gin框架构建分布式应用》学习第15天&#xff0c;p272-p306总结&#xff0c;总35页。 一、技术总结 1.TDD(test-driven development) 虽然经常看到TDD这个属于&#xff0c;从本人的工作经历看&#xff0c;实际开发中用得相对较少。 2.unitest(单元测试) go语言开发中&a…...

【搜索引擎】俄罗斯搜索引擎yandex

俄罗斯搜索引擎yandex 1997年&#xff0c;俄罗斯搜索引擎Yandex&#xff08;俄语意为&#xff1a;语言目录&#xff09;首次上线&#xff0c;已发展成为全球第四大搜索引擎和第二大非英语搜索引擎 https://yandex.com/...

加密源代码|html代码如何加密保护?3分钟学会4种源代码加密妙招,代码人必看

你是否曾担心过自己的源代码被轻易复制或篡改&#xff1f; 在这个开源和共享盛行的时代&#xff0c;如何加密源代码&#xff0c;成为了每个开发者不得不面对的问题。 古人云&#xff1a;“工欲善其事&#xff0c;必先利其器。”今天&#xff0c;我们就来探讨一下如何加密保护你…...

Jetson Orin NX平台自研载板 IMX477相机掉线问题调试记录

1. 前言 平台: NVIDIA Orin NX 硬件: 自研载板 相机: 3个IMX477树莓派HQ摄像头通过CSI接口连接 版本: L4T 35.4.1(我们也在35.5.0上测试了一些东西) 参数: 30fps,4032x3040 问题描述: 其中一个IMX477相机在录制过程中出现可变时间后退出 短则10秒,长则5小时,…...

spring-boot(整合mybatisplus、及常见注解)

介绍 在日常开发中单表的CRUD功能代码重复度很高,也没有什么难度。而这部分代码量往往比较大,开发起来比较费时。 目前企业中都会使用一些组件来简化或省略单表的CRUD开发工作。目前在国内使用较多的一个组件就是MybatisPlus. MyBatisPlus是针对于Mybatis框架的增强,即合…...

深度学习:yolov3的使用--建立模型

使用argparse模块来定义和解析命令行参数 创建一个ArgumentParser对象 parser argparse.ArgumentParser() 训练的轮数&#xff0c;每批图像的大小&#xff0c;更新模型参数之前累积梯度的次数,模型定义文件的路径。 parser.add_argument("--epochs", typeint, d…...

关于我、重生到500年前凭借C语言改变世界科技vlog.13——深入理解指针(3)

文章目录 1.字符指针变量2.数组指针变量3.函数指针变量4.函数指针数组5.二维数组传参本质6.拓展补充希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力&#xff01; 本章节接着学习常见的指针变量类型 1.字符指针变量 字符指针变量&#xff0c;顾名思义就是字…...

每日算法一练:剑指offer——数组篇(6)

1.点名 某班级 n 位同学的学号为 0 ~ n-1。点名结果记录于升序数组 records。假定仅有一位同学缺席&#xff0c;请返回他的学号。 示例 1: 输入: records [0,1,2,3,5] 输出: 4示例 2: 输入: records [0, 1, 2, 3, 4, 5, 6, 8] 输出: 7提示&#xff1a; 1 < records.le…...

【环境搭建】Apache ZooKeeper 3.8.4 Stable

软件环境 Ubuntu 20.04 、OpenJDK 11 OpenJDK 11&#xff08;如果已经安装&#xff0c;可以跳过这一步&#xff09; 安装OpenJDK 11&#xff1a; $ sudo apt-get update$ sudo apt-get install -y openjdk-11-jdk 设置 JAVA_HOME 环境变量&#xff1a; $ sudo gedit ~/.bash…...

算法练习——双指针

前言&#xff1a;大佬写博客给别人看&#xff0c;菜鸟写博客给自己看&#xff0c;我是菜鸟。 学前须知&#xff08;对自己&#xff09;&#xff1a;这里的指针不一定指地址&#xff01;也可能是数组下标。 1&#xff1a;移动零(双指针) 题目要求&#xff1a; 解题思路&#x…...

vue中el-table显示文本过长提示

1.el-table设置轻提示:show-overflow-tooltip“true“&#xff0c;改变轻提示宽度...

JS 字符串拼接并去重

1、includes 循环数组将某个字段拼接成新的字符串并去重&#xff08;数组里面包含的一个对象&#xff0c;或者其他都OK&#xff09; // 定义一个数组 let arr[.......] // 定义拼接的字符串 let a //循环数组将里面某个字段拼接在一起并去重 arr.forEach(item > {if(!a.in…...

opencv 图像预处理

图像预处理 ​ 在计算机视觉和图像处理领域&#xff0c;图像预处理是一个重要的步骤&#xff0c;它能够提高后续处理&#xff08;如特征提取、目标检测等&#xff09;的准确性和效率。OpenCV 提供了许多图像预处理的函数和方法&#xff0c;以下是一些常见的图像预处理操作&…...

SAP B1 功能模块字段介绍 - 价格清单(下)

目录 背景 五、业务伙伴的特殊价格 1. 单据逻辑功能 2. 部分字段解释 3. 操作流程 3.1 时间相关 3.2 数量相关 4. 实例 六、复制特殊价格到选择标准 1. 单据逻辑功能 2. 部分字段解释 七、全局更新特殊价格 ​编辑 1. 单据逻辑功能 2. 部分字段解释 八、价格更…...

传智杯 第六届-复赛-D

题目描述&#xff1a; 小红定义两个字符串同构&#xff0c;当且仅当对于i∈[1,n],b[i]−a[i]i∈[1,n],b[i]-a[i]i∈[1,n],b[i]−a[i]是定值。例如&#xff0c;"bacd"和"edfg"是同构的。 现在小红拿到了一个长度为n的字符串a&#xff0c;她想知道&a…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

土建施工员考试:建筑施工技术重点知识有哪些?

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...