web前端项目开发重置样式reset.css

news/2024/11/25 8:37:54/

前端项目开发重置样式,包括清空浏览器的默认样式、设置网页主体的背景颜色、外间距、内间距、行高、字体大小、字体家族、页面布局、背景颜色样式、颜色、设置超链接的样式、字体大小、文本处理与对齐方式、行高、鼠标样式、告诉部分浏览器不要给图片添加边框、将超出宽度的文字截字并用省略号表示、浮动公共样式、清除浮动公共样式、显示方式与定位、定位的绝对居中、弹性盒的绝对居中、外间距和内间距公共样式,之后可能还会进行修改和补充。
CSS代码如下:

/*!
* reset - v1.1.0 - 9/21/2020  https://blog.csdn.net/Serena_tz  By Serena 
*//* 清空浏览器的默认样式 */
div,p,ul,ol,li,dd,h1,h2,h3,h4,h5,h6,dt,dl,form,input,textarea,blockquote,th,td {padding: 0; margin: 0}
h1,h2,h3,h4,h5,h6 {font-size: 16px; font-weight: 400}
em,i  {font-style: normal }
ul,ol {list-style: none   }
label {cursor    : pointer}/* 设置网页主体的背景颜色、外间距、内间距、行高、字体大小、字体家族 */
body  {background: #fff; margin: 0; padding: 0; line-height: 1; font-size: 14px; font-family: "Microsoft YaHei","微软雅黑",Tahoma,Arial}/* 页面布局 */
.wt1000 {width: 1000px; margin: 0 auto}
.w220   {width: 220px}
.layout {width: 100%}/* 背景颜色样式 */
.bgblack    {background-color: #000}
.bgwhite    {background-color: #fff}
.bgred      {background-color: #f00}
.bgorange   {background-color: #f90}
.bgyellow   {background-color: #ff0}
.bggreen    {background-color: #393}
.bgblue     {background-color: #00f}
.bgpurple   {background-color: #808}
.bggray     {background-color: #999}/* 颜色 */
.black    ,a.black    {color: #000}
.white    ,a.white    {color: #fff}
.red      ,a.red      {color: #f00}
.orange   ,a.orange   {color: #f90}
.yellow   ,a.yellow   {color: #ff0}
.green    ,a.green    {color: #393}
.blue     ,a.blue     {color: #09f}
.purple   ,a.purple   {color: #808}
.gray     ,a.gray     {color: #999}/* 设置超链接的样式 */
a       {color: #666   ; text-decoration: none}
a:hover {color: #ccc   ; text-decoration: none}/* 字体大小 */
.font12 {font-size: 12px}
.font14 {font-size: 14px}
.font16 {font-size: 16px}
.font18 {font-size: 18px}
.font20 {font-size: 22px}
.font22 {font-size: 22px}
.font24 {font-size: 24px}
.font26 {font-size: 26px}
.font28 {font-size: 28px}
.font30 {font-size: 30px}
.font32 {font-size: 32px}
.font34 {font-size: 34px}
.font36 {font-size: 36px}
.font38 {font-size: 38px}
.font40 {font-size: 40px}/* 文本处理与对齐方式 */
.txj {text-align: justify; color: gray}
.tc  {text-align: center}
.tl  {text-align: left}
.tr  {text-align: right}
.vam {vertical-align: middle}
.fb  {font-weight: bold}/* 行高 */
.lh16 {line-height: 16px}
.lh18 {line-height: 18px}
.lh20 {line-height: 20px}
.lh22 {line-height: 22px}
.lh24 {line-height: 24px}
.lh26 {line-height: 26px}
.lh28 {line-height: 28px}
.lh30 {line-height: 30px}
.lh32 {line-height: 32px}
.lh34 {line-height: 34px}
.lh36 {line-height: 36px}
.lh38 {line-height: 38px}
.lh40 {line-height: 40px}/* 鼠标样式 */
.pointer {cursor: pointer}/* 告诉部分浏览器不要给图片添加边框 */
img         {border: none}
table,th,td {border-collapse: collapse; border-spacing: 0}/* 将超出宽度的文字截字并用省略号表示 */
.cutFont {white-space: nowrap; text-overflow: ellipsis; overflow: hidden}/* 浮动公共样式 */
.fl {float: left}
.fr {float: right}
.cl {clear: both}/* 清除浮动公共样式 */
.clearfix:after {content: "\20"; display: block; height: 0; clear: both; visibility: hidden}
.clearfix       {*zoom: 1}/* 显示方式与定位 */
.pore   {position: relative}
.inline {display : inline-block}
.block  {display : block}
.none   {display : none}/* 定位的绝对居中 */
.mid  {position: absolute; margin: auto;top: 0;bottom: 0;left: 0; right: 0;}
.midx {position: absolute; margin: auto;left: 0; right: 0;}
.midy {position: absolute; margin: auto;top: 0;bottom: 0;}/* 弹性盒的绝对居中 */
.center  {display: flex; justify-content: center; align-items: center}
.centerx {display: flex; justify-content: center}
.centery {display: flex; align-items: center}/* 外间距和内间距公共样式 */
.mt5  {margin-top: 5px }
.mt10 {margin-top: 10px}
.mt15 {margin-top: 15px}
.mt20 {margin-top: 20px}
.mt25 {margin-top: 25px}
.mt30 {margin-top: 30px}
.mt35 {margin-top: 35px}
.mt40 {margin-top: 40px}
.mt45 {margin-top: 45px}
.mt50 {margin-top: 50px}
.mb5  {margin-bottom: 5px }
.mb10 {margin-bottom: 10px}
.mb15 {margin-bottom: 15px}
.mb20 {margin-bottom: 20px}
.mb25 {margin-bottom: 25px}
.mb30 {margin-bottom: 30px}
.mb35 {margin-bottom: 35px}
.mb40 {margin-bottom: 40px}
.mb45 {margin-bottom: 45px}
.mb50 {margin-bottom: 50px}
.ml5  {margin-left: 5px }
.ml10 {margin-left: 10px}
.ml15 {margin-left: 15px}
.ml20 {margin-left: 20px}
.ml25 {margin-left: 25px}
.ml30 {margin-left: 30px}
.ml35 {margin-left: 35px}
.ml40 {margin-left: 40px}
.ml45 {margin-left: 45px}
.ml50 {margin-left: 50px}
.mr5  {margin-right: 5px }
.mr10 {margin-right: 10px}
.mr15 {margin-right: 15px}
.mr20 {margin-right: 20px}
.mr25 {margin-right: 25px}
.mr30 {margin-right: 30px}
.mr35 {margin-right: 35px}
.mr40 {margin-right: 40px}
.mr45 {margin-right: 45px}
.mr50 {margin-right: 50px}
.pt5  {padding-top: 5px }
.pt10 {padding-top: 10px}
.pt15 {padding-top: 15px}
.pt20 {padding-top: 20px}
.pt25 {padding-top: 25px}
.pt30 {padding-top: 30px}
.pt35 {padding-top: 35px}
.pt40 {padding-top: 40px}
.pt45 {padding-top: 45px}
.pt50 {padding-top: 50px}
.pb5  {padding-bottom: 5px }
.pb10 {padding-bottom: 10px}
.pb15 {padding-bottom: 15px}
.pb20 {padding-bottom: 20px}
.pb25 {padding-bottom: 25px}
.pb30 {padding-bottom: 30px}
.pb35 {padding-bottom: 35px}
.pb40 {padding-bottom: 40px}
.pb45 {padding-bottom: 45px}
.pb50 {padding-bottom: 50px}
.pl5  {padding-left: 5px }
.pl10 {padding-left: 10px}
.pl15 {padding-left: 15px}
.pl20 {padding-left: 20px}
.pl25 {padding-left: 25px}
.pl30 {padding-left: 30px}
.pl35 {padding-left: 35px}
.pl40 {padding-left: 40px}
.pl45 {padding-left: 45px}
.pl50 {padding-left: 50px}
.pr5  {padding-right: 5px}
.pr10 {padding-right: 10px}
.pr15 {padding-right: 15px}
.pr20 {padding-right: 20px}
.pr25 {padding-right: 25px}
.pr30 {padding-right: 30px}
.pr35 {padding-right: 35px}
.pr40 {padding-right: 40px}
.pr45 {padding-right: 45px}
.pr50 {padding-right: 50px}

http://www.ppmy.cn/news/256419.html

相关文章

W25Q128FV译文(一)

该文章包括W25Q128FV译文的前六章内容, 第7章状态寄存器翻译及第八章指令部分翻译链接:https://blog.csdn.net/z123canghai/article/details/88726856 第八章指令剩余部分及第九章相关时序翻译链接:https://blog.csdn.net/z123canghai/arti…

GD32f407VE点亮ws2812(一)

ws2812根据芯片手册查看逻辑0与逻辑1的电平设置以及时序按照GRB的顺序高位先发。 在此尝试4种方法点亮: 1.用nop()指令 原理主要是通过GPIO翻转写0或写1实现逻辑0与逻辑1然后利用cpu执行几个空指令产生短延时的效果。也可自己写延时函数让其做加减乘除从而达到延时的…

w25n01g 代码_W25N01

//WriteAddr:开始写入的地址(24bit) //NumByteToWrite:要写入的字节数(最大65535) u8 W25QXX_BUFFER[4096]; void W25QXX_Write(u8* pBuffer,u32 WriteAddr,u16 NumByteToWrite) {u32 secpos; //定义要擦除的删区 u32 secoff; u32 secremain; u32 i; u8 * W25QXX_BUF; W25QXX_…

基于html+css+js+jquery的购物页面设计

1.jQuery介绍 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,…

WK2124

目录 WK系列介绍 WK2124芯片原理 寄存器介绍 硬件连接 驱动框架 驱动移植 驱动源码分析 驱动信息描述和数据结构 串口驱动的底层操作 tty驱动架构 wk2xxx_dowork()和wk2xxx_work函数 修改设备树 驱动调试修改 问题 WK2124 WK系列介绍 WK2124能实现SPI拓展4路U…

大数据开发之Hive案例篇10-大表笛卡尔积优化

文章目录 一. 问题描述二.解决方案2.1 数据倾斜2.2 SQL改写1:由分析函数改为常规写法2.3 分析数据分布2.4 SQL改写2:重写 参考: 一. 问题描述 需求描述: 表概述: dt 时间分区 data_source 数据来源类别 start_date 时间 data_count 当前时间的数量…

SD卡SPI模式入门教程

▼我是阿荣,关注我,在技术路上一起精进!▼ SD卡简介 SD卡是一种基于半导体快闪记忆器的新一代记忆设备,英文全称Secure Digital Memory Card,中文名又称安全数码卡。 尺寸分类 按尺寸分类,SD卡分为&…

华为 java sd卡,手机添加存储卡 内存变大不卡顿——华为SD卡扩容实例

手机的基本功能是接听电话收发短信,电脑是人工智能机器人,二者合并便是智能手机,也就是今天所说的“手机”。 手机用于记忆和工作的“脑海”里拥挤不堪时便会卡顿频发,这”脑海”就是手机的“内存”。 人的脑海分为大脑和小脑&…