当前位置: 首页 > 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的pyttsx3库打造你的专属语音助手

1. 从零认识pyttsx3&#xff1a;你的代码会说话 第一次听到电脑用标准播音腔朗读出我写的文字时&#xff0c;那种感觉就像小时候收到会说话的生日贺卡。pyttsx3这个神奇的Python库&#xff0c;能让任何文本通过声卡变成人声。不同于需要联网的语音合成服务&#xff0c;它完全离…...

PX4飞控解锁失败?别慌!手把手教你用QGroundControl地面站排查15种常见黄灯警报

PX4飞控解锁失败&#xff1f;别慌&#xff01;手把手教你用QGroundControl地面站排查15种常见黄灯警报 当你满怀期待地准备让无人机起飞&#xff0c;却发现PX4飞控持续闪烁黄灯拒绝解锁时&#xff0c;那种挫败感我深有体会。作为从菜鸟阶段一路摸爬滚打过来的飞手&#xff0c;我…...

基于MPC模型预测的两轮差速移动机器人多种轨迹跟踪控制(带参考文献)

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f34e; 往期回顾关注个人主页&#xff1a;Matlab科研工作室&#x1f447; 关注我领取海量matlab电子书和…...

突破视频内容壁垒:B站视频转文字的智能解决方案

突破视频内容壁垒&#xff1a;B站视频转文字的智能解决方案 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 在信息爆炸的时代&#xff0c;视频已成为知识传播…...

【软件部署】在docker环境部署vsftpd

说明 vsftp官网https://security.appspot.com/vsftpd.html 配置文件说明https://security.appspot.com/vsftpd/vsftpd_conf.html 注意 因优化更新&#xff0c;文件内容可能变化&#xff0c;具体参考 https://github.com/zhuyifeiRuichuang/work-script/tree/main/vsftp 适用场景…...

腾讯云记忆服务,让智能助理进化升级

4月3日消息&#xff0c;腾讯云近日推出“Agent Memory”记忆服务&#xff0c;为智能助理OpenClaw补全长期记忆能力。接入该服务后&#xff0c;OpenClaw回答准确率大幅提升&#xff0c;还支持多种部署方式。创新记忆服务诞生腾讯云数据库团队自主研发了“Agent Memory”记忆服务…...

高并发接口总被打崩?我用 ArrayBlockingQueue + 底层源码深度剖析搞定流控

一、实现原理⚠️注意 ✔️有界阻塞队列&#xff1a;容量固定&#xff0c;必须在初始化时指定长度&#xff0c;无自动扩容机制。 ✔️先进先出&#xff08;FIFO&#xff09;&#xff1a;入队元素从队尾添加&#xff0c;出队元素从队首取出。 ✔️存取互斥&#xff1a;所有读写操…...

leetcode 1590. 使数组和能被 P 整除-Make Sum Divisible by P

Problem: 1590. 使数组和能被 P 整除-Make Sum Divisible by P 耗时100%&#xff0c;求出前缀和&#xff0c;若总和sum < p返回-1&#xff0c;若sum % p0返回0 否则&#xff0c;考察长度从小到大0 - n-1的子数组累加和&#xff0c;若满足条件直接返回 最后返回-1&#xff…...

Agent在财务场景有哪些核心应用?深度解析2026企业智能化转型路径

站在2026年的技术节点回望&#xff0c;财务部门早已从传统的“记账中心”转型为企业的“战略决策大脑”。AI Agent&#xff08;人工智能助手/智能体&#xff09;的爆发式应用&#xff0c;彻底终结了繁琐的表单时代。与2024年的实验性尝试不同&#xff0c;当下的财务Agent具备了…...

终极指南:使用SMU Debug Tool释放AMD Ryzen处理器的隐藏性能

终极指南&#xff1a;使用SMU Debug Tool释放AMD Ryzen处理器的隐藏性能 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: http…...