web前端項目開發重置樣式reset.css

/*!
* reset - v1.1.0 - 9/21/2020    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}