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