css重置

作者: 云桃桃 | 来源:发表于2019-12-04 10:14 被阅读0次

CSS:认识 css reset
HTML对默认样式进行重置或标准化
查询类布局模板
Css3解决塌陷和元素居中的代码
CSS Reset 的来龙去脉
Html5课堂总结
CSS重置
CSS 重置
css重置
css重置

电脑端


*{margin: 0; padding: 0; font-size: 12px; line-height:2; font-family: "微软雅黑"; color: #000 /*视项目情况而定*/
;}
a{text-decoration: none;}
body{overflow-x: hidden;}
.container{margin: 0px auto;}
li{list-style: none;}
textarea{resize: none;}
textarea::-webkit-scrollbar{width: 0px;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
.v-none{visibility: hidden;}
img{display: block; border: none 0; width: 100%;}
input{display: block;}
input[type="radio"] {border: 0 none;}
input[type="submit"],input[type="button"] {cursor: pointer;}
.d-block{display: block;}
/*定位*/
.rel{position: relative;}
.abs{position: absolute;}
.fl{float: left;}
.fr{float: right;}
.clear:after{clear:both;overflow:hidden;content:"";display:block;}
.clear{*zoom:1;}
/*位置间距*/
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml40{margin-left: 40px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr40{margin-right: 40px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb100{margin-bottom: 100px;}
.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 24px;}
.pt29{padding-top: 29px;}
.pt50{padding-top: 50px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.plr5{padding: 0 3px;}
/*字体样式*/
.f-second{font-family: "宋体";}   /*第二字体*/
/* 字体图标*/
@font-face {font-family: "iconfont";
  src: url('../font/iconfont.eot'); 
  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), 
  url('../font/iconfont.woff') format('woff'),
  url('../font/iconfont.ttf') format('truetype'),
  url('../font/iconfont.svg#iconfont') format('svg'); 
}

.iconfont {
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-add:before{content: "\e603";}
/*字体大小*/
.f-12{font-size: 12px;}
.f-14{font-size: 14px;}
.f-16{font-size: 16px;}
.f-18{font-size: 18px;}
.f-20{font-size: 20px;}
.f-24{font-size: 24px;}
/*字体修饰*/
.en-icon{font-family: "sans-serif";}
.f-black{color:#000;}
.f-lgray{color:#999;}
.f-mgray{color:#4c4d4d;}
.f-dgray{color:#333;}
.f-white{color:#fff;}
.f-red{color: #f00;}
.f-blue{color: #47b9fb;}
.f-underline{text-decoration: underline;}
.f-bold{font-weight: bold;}
.t-over1{white-space:nowrap;text-overflow:ellipsis; overflow:hidden;}
.t-over2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;white-space:normal!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/*行高*/
.lh-26{line-height: 26px;}
.lh-28{line-height: 28px;}
.lh-30{line-height: 30px;}
.lh-32{line-height: 32px;}
.lh-40{line-height: 40px;}
.lh-44{line-height: 44px;}
.lh-48{line-height: 48px;}
.lh-50{line-height: 50px;}
.lh-80{line-height: 80px;}

/*字体对齐方式*/
.t-indent{text-indent: 24px;}
.t-center{text-align: center;}
.t-left{text-align: left;}
.t-right{text-align: right;}
.t-just{text-align: justify;}
.t-break{word-break:break-all;}
.t-space3{letter-spacing: 3px;}
/*着重字体样式*/
.black-mark{color:#000; padding:0 3px; font-family:"微软雅黑"; font-weight:bold;}
.mark{color:#f00; padding:0 3px; font-family:"微软雅黑"; font-weight:bold;}
.yellow-mark{color:#f8ad16; padding:0 3px; font-family:"微软雅黑"; font-weight:bold;}

手机端

*{margin: 0; padding: 0; font-size: 12px; line-height:24px; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; }
body{}
a, img {   -webkit-touch-callout: none; }
body{-webkit-overflow-scrolling:touch;}
body::-webkit-scrollbar{width: 0px;}
textarea::-webkit-scrollbar{width: 0px;}
div::-webkit-scrollbar{width:0px;}
a:focus,input:focus,div:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);}
img{display: block; border: none 0; width: 100%;}
input,textarea{border: 0 none; display: block;}
.d-block{display: block;}
.d-none{display: none;}
.v-none{visibility: hidden;}
/*文字和li重置*/
h1,h2,h3,h4,h5,h6{font-weight: normal;}
a{text-decoration: none;}
li{list-style: none;}
/*浮动和定位*/
.fl{float: left;}
.fr{float: right;}

.clear:after{clear:both;overflow:hidden;content:"";display:block;}
.rel{position: relative;}
.abs{position: absolute;}
/*字体大小*/
.f-14{font-size: 14px;}
.f-16{font-size: 16px;}
.f-18{font-size: 18px;}
.f-20{font-size: 20px;}
.f-30{font-size: 30px;}
/*字体颜色和样式*/
.f-black{color: #000;}
.f-white{color: #fff;}
.f-bold{font-weight: bold;}
.f-underline{text-decoration: underline;}
.lh-24{line-height: 24px;}
.lh-30{line-height: 30px;}
.lh-50{line-height: 50px;}
.t-center{text-align: center;}
.t-right{text-align: right;}
.t-just{text-align:justify;}
.t-over2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;white-space:normal!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.t-over1{white-space:nowrap;text-overflow:ellipsis; overflow:hidden;}
/*间距*/
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb100{margin-bottom: 100px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.pb5{padding-bottom: 5px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pt10{padding-top: 10px;}
.pt30{padding-top: 30px;}
.pl10{padding-left: 10px;}
.p5{padding: 5px;}
.p10{padding: 10px;}
/*边框*/
.bb-black{border-bottom: 1px solid #04190e;}
.bd-black{border: 1px solid #004333;}
/*背景色*/
.green{background-color: #e0f4f7;}
/*宽度百分比*/
.per30{width: 30%;}
.per40{width: 40%;}
.per36{width: 36%;}
.per80{width: 80%;}
/*间距百分比*/
.mr-per12{margin-right: 12%;}
/*字体*/
@font-face {font-family: "iconfont";
  src: url('../font/iconfont.ttf') format('truetype'), 
  url('../font/iconfont.svg#iconfont') format('svg'); 
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:24px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
}
.icon-xxx:before { content: "\e600"; }