常常使用的CSS写法，舒克老师整理-大前端-舒克老师的前端

常常使用的CSS写法，舒克老师整理 CSS

shuke 2017-7-11 2043

我们在写CSS时，没有必要每一个盒子给一种特定的写法：我们可以给盒子一些通用的样式；

通过日常的维护与修改能够让开发更强大，更快捷；

@charset "utf-8";
/*style power by shuke*/
*{margin:0;padding:0;list-style:none;}
*html{background-image:url(about:blank);background-attachment:fixed;height: 100%;}
body{font-size:14px;color:333;margin:0 auto;}
a,a:link{color:#113;text-decoration:none;}
a:visited{color:#443;}
a:hover,a:active{color:#f00;text-decoration:underline;}
/*h*/
h6{font-size:10px;}
h5{font-size:11px;}
h4{font-size:12px;}
h3{font-size:14px;line-height:25px;}
h2{font-size:16px;line-height:30px;}
h1{font-size:18px;line-height:35px;}
/*color*/
.text-red{color:red}
.text-blue{color:blue}
.text-green{color:green;}
.text-gray{color:gray;}
.text-black{color:black;}
.text-white{color:white;}
.text-red-light{color:lightred}
.text-blue-light{color:lightblue}
.text-green-light{color:lightgreen;}
.bg-red{background-color: red;}
.bg-blue{background-color: blue;}
.bg-green{background-color: green;}
.bg-black{background-color: black;}
.bg-white{background-color: white;}
.bg-pink{background-color: pink;}
.bg-silver{background-color: silver;}
.bg-yellow{background-color: yellow;}
.bg-gray{background-color: gray;}
/*text*/
.text-left{text-align: left}
.text-right{text-align: right}
.text-center{text-align: center}
.text-indent{text-indent: 2em;}
.text-default{font-size: 14px;}
.text-little{font-size: 10px;}
.text-small{font-size: 12px;}
.text-big{font-size: 16px;}
.text-large{font-size: 18px;}
.height{line-height: 24px;}
.height-little{line-height: 16px;}
.height-small{line-height: 20px;}
.height-big{line-height: 30px;}
.height-large{line-height:40px;}
.text-break{word-break:break-all;}
/*float*/
.float-left{float:left}
.float-right{float:right}
.clear{clear:both}
/*padding margin*/
.padding{padding: 10px;}
.padding-little{padding: 2px;}
.padding-small{padding: 5px;}
.padding-big{padding: 20px;}
.padding-large{padding: 30px;}
.padding-top{padding-top: 10px;}
.padding-bottom{padding-bottom: 10px;}
.padding-left{padding-left: 10px;}
.padding-right{padding-right: 10px;}
.margin{margin:10px;}
.margin-little{margin:2px;}
.margin-small{margin:5px;}
.margin-big{margin:20px;}
.margin-large{margin:30px;}
.margin-left{margin-left:10px;}
.margin-right{margin-right:10px;}
.margin-top{margin-top:10px;}
.margin-bottom{margin-bottom:10px;}
/*block hidden*/
.hidden{display: none}
.block{display: block}
.hand{cursor: pointer;}
.overhidden{overflow: hidden;}
.overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/*border*/
.border{border:solid silver 1px;}
.border-left{border-left:solid silver 1px;}
.border-right{border-right:solid silver 1px;}
.border-top{border-top:solid silver 1px;}
.border-bottom{border-bottom:solid silver 1px;}
.border-gray{border-color: gray;}
.border-red{border-color:red;}
.border-blue{border-color:blue;}
.border-green{border-color:green;}
.border-black{border-color:black;}
.border-white{border-color:white;}
.border-radius{border-radius: 50%;}
.border-rounded{border-radius: 10px;}
/*list*/
.list-inline li{display:inline-block;padding:0 10px;width:auto}
/*img*/
.img-responsive{display:block;max-width:100%;height:auto}
.img-border{border:solid 1px #ddd;padding:4px}
/*form*/
.input{font-size:14px;padding:6px;border:solid 1px #ddd;width:100%;height:34px;line-height:20px;display:block;border-radius:4px;-webkit-appearance:none;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}
.button{border:solid 1px #ddd;background:transparent;border-radius:4px;font-size:14px;padding:6px 15px;margin:0;display:inline-block;line-height:20px;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}
/*border*/
.table{width:100%;max-width:100%;border-collapse:collapse;border-spacing:0}
.table th{border-bottom:2px solid #ddd;vertical-align:bottom;padding:8px;text-align:left}
.table td{border-top:1px solid #ddd;padding:8px;vertical-align:top}
.table-bordered th,.table-bordered td{border:solid 1px #ddd}
.table-bordered th{border-bottom:2px solid #ddd}
.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th{background-color:#f5f5f5}
.table-condensed th,.table-condensed td{padding:5px}
/*opacity*/
.opacity{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
.opacity-middle{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}
.opacity-small{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.opacity-big{filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}
/*ext*/
.container{max-width:1200px; margin:0 auto; clear:both}
.sk_width1000{max-width:1000px; margin:0 auto; clear:both}
.sk_width990{max-width:990px; margin:0 auto; clear:both}
.sk_width980{max-width:980px; margin:0 auto; clear:both}
[class*="sk_ad"]{width:1000px;margin:0 auto; text-align:center;clear:both;overflow:hidden}

最新回复 (1)

全部楼主

shuke 2022-3-6

2 楼

/*!
 * Sui for wxminipro v.1
 *  2019.8.20 shuke
 * web html5兼容性写法
 */
body,ul,li,dt,dl,dd,ol{padding: 0;margin: 0;list-style: none}
.p-0{padding: 0}
.m-0{margin: 0}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*html{background-attachment:fixed;height:100%;}
body{color:#333;margin:0 auto;font:14px/1.5 -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;}
.center-block{margin: auto}
/* ========================================================================
   Component: html5 tag
 ========================================================================== */
div,p,header,nav,article,section,aside,footer,figure,figcaption,ul,li,ol,dt,dd,dl,table,tr,caption,address,blockquote,pre,br,hr,hgroup,form {display:block}
/* ========================================================================
   Component: opacity
 ========================================================================== */
.opacity {filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.opacity-20 {filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2;}
.opacity-50 {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}
.opacity-70 {filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;}
.opacity-80 {filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;}
.opacity-90 {filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;}
.opacity-100 {filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:1;}
/* ========================================================================
   Component: Flex
 ========================================================================== */
.flex {display:-ms-flexbox;display:-webkit-flex;display:flex;}
.flex-inline {display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex;}
.flex > .flex-inline {-ms-flex-negative:1;}
.flex-top {-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;}
.flex-middle {-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.flex-bottom {-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end;}
.flex-center {-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
.flex-right {-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}
.flex-space-between {-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.flex-space-around {-ms-flex-pack:distribute;-webkit-justify-content:space-around;justify-content:space-around;}
.flex-row-reverse {-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}
.flex-column {-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;}
.flex-column-reverse {-ms-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse;}
.flex-nowrap {-ms-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;}
.flex-wrap {-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-wrap-reverse {-ms-flex-wrap:wrap-reverse;-webkit-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;}
.flex-wrap-top {-ms-flex-line-pack:start;-webkit-align-content:flex-start;align-content:flex-start;}
.flex-wrap-middle {-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center;}
.flex-wrap-bottom {-ms-flex-line-pack:end;-webkit-align-content:flex-end;align-content:flex-end;}
.flex-wrap-space-between {-ms-flex-line-pack:justify;-webkit-align-content:space-between;align-content:space-between;}
.flex-wrap-space-around {-ms-flex-line-pack:distribute;-webkit-align-content:space-around;align-content:space-around;}
.flex-order-first {-ms-flex-order:-1;-webkit-order:-1;order:-1;}
.flex-order-last {-ms-flex-order:99;-webkit-order:99;order:99;}
.flex-order-last-small {-ms-flex-order:99;-webkit-order:99;order:99;}
.flex-order-last-medium {-ms-flex-order:99;-webkit-order:99;order:99;}
.flex-order-last-large {-ms-flex-order:99;-webkit-order:99;order:99;}
.flex-order-last-xlarge {-ms-flex-order:99;-webkit-order:99;order:99;}
.flex-item-none {-ms-flex:none;-webkit-flex:none;flex:none;}
.flex-item-auto {-ms-flex:auto;-webkit-flex:auto;flex:auto;-ms-flex-negative:1;}
.flex-item-1 {-ms-flex:1;-webkit-flex:1;flex:1;}
/* ========================================================================
   Component: main
 ========================================================================== */
.text_red{color:#c03}.bg_red{background-color:#c03}.text_orange{color:#630}.bg_orange{background-color:#630}.text_blue{color:#063}.bg_blue{background-color:#063}.text_yellow{color:#fc3}.bg_yellow{background-color:#fc3}.text_blue{color:#036}.bg_blue{background-color:#036}.text_purple{color:#606}.bg_purple{background-color:#606}.text_gray{color:#888}.bg_gray{background-color:#888}.text_silver{color:#efefef}.bg_silver{background-color:#efefef}.text_white{color:#fff}.bg_white{background-color:#fff}.text_active{color:#ccc}.bg_active{background-color:#ccc}.text_black{color:#000}.bg_black{background-color:#000}.padding_little{padding:3px}.margin_little{margin:3px}.padding_small{padding:5px}.margin_small{margin:5px}.padding_default{padding:10px}.margin_default{margin:10px}.padding_big{padding:20px}.margin_big{margin:20px}.padding_large{padding:30px}.margin_large{margin:30px}body{font-size:14px;line-height:1.5em}.bg_inverse{color:white}a{color:#259;text-decoration:none}a :link{color:darkgreen}a :hover{color:darkred}a :visited{color:darkblue}
.text-little{font-size:10px;line-height:1.5em}.padding-little{padding:3px}.margin-little{margin:3px}.height-little{line-height:1em}.padding-little-left{padding-left:3px}.margin-little-left{margin-left:3px}.padding-little-top{padding-top:3px}.margin-little-top{margin-top:3px}.padding-little-right{padding-right:3px}.margin-little-right{margin-right:3px}.padding-little-bottom{padding-bottom:3px}.margin-little-bottom{margin-bottom:3px}.text-small{font-size:12px;line-height:1.5em}.padding-small{padding:5px}.margin-small{margin:5px}.height-small{line-height:1.2em}.padding-small-left{padding-left:5px}.margin-small-left{margin-left:5px}.padding-small-top{padding-top:5px}.margin-small-top{margin-top:5px}.padding-small-right{padding-right:5px}.margin-small-right{margin-right:5px}.padding-small-bottom{padding-bottom:5px}.margin-small-bottom{margin-bottom:5px}.text-middle{font-size:14px;line-height:1.5em}.padding-middle{padding:10px}.margin-middle{margin:10px}.height-middle{line-height:1.5em}.padding-middle-left{padding-left:10px}.margin-middle-left{margin-left:10px}.padding-middle-top{padding-top:10px}.margin-middle-top{margin-top:10px}.padding-middle-right{padding-right:10px}.margin-middle-right{margin-right:10px}.padding-middle-bottom{padding-bottom:10px}.margin-middle-bottom{margin-bottom:10px}.text-big{font-size:16px;line-height:1.5em}.padding-big{padding:15px}.margin-big{margin:15px}.height-big{line-height:2em}.padding-big-left{padding-left:15px}.margin-big-left{margin-left:15px}.padding-big-top{padding-top:15px}.margin-big-top{margin-top:15px}.padding-big-right{padding-right:15px}.margin-big-right{margin-right:15px}.padding-big-bottom{padding-bottom:15px}.margin-big-bottom{margin-bottom:15px}.text-large{font-size:24px;line-height:1.5em}.padding-large{padding:20px}.margin-large{margin:20px}.height-large{line-height:3em}.padding-large-left{padding-left:20px}.margin-large-left{margin-left:20px}.padding-large-top{padding-top:20px}.margin-large-top{margin-top:20px}.padding-large-right{padding-right:20px}.margin-large-right{margin-right:20px}.padding-large-bottom{padding-bottom:20px}.margin-large-bottom{margin-bottom:20px}.margin-auto{margin:auto}.margin{margin:10px}.margin-x{margin:0 10px}.margin-y{margin:10px 0}.padding{padding:10px}.padding-x{padding:0 10px}.padding-y{padding:10px 0}
.show{display:block}.hidden{display:none}.h1{font-size:24px}.h2{font-size:20px}.h3{font-size:18px}.h4{font-size:16px}.h5{font-size:14px}.h6{font-size:12px}.text-indent{text-indent:2em}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}
.opacity{filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}.opacity_10{filter:alpha(opacity=10);-moz-opacity:.1;-khtml-opacity:.1;opacity:.1}.opacity_20{filter:alpha(opacity=20);-moz-opacity:.2;-khtml-opacity:.2;opacity:.2}.opacity_30{filter:alpha(opacity=30);-moz-opacity:.3;-khtml-opacity:.3;opacity:.3}.opacity_40{filter:alpha(opacity=40);-moz-opacity:.4;-khtml-opacity:.4;opacity:.4}.opacity_50{filter:alpha(opacity=50);-moz-opacity:.5;-khtml-opacity:.5;opacity:.5}.opacity_60{filter:alpha(opacity=60);-moz-opacity:.6;-khtml-opacity:.6;opacity:.6}.opacity_70{filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;opacity:.7}.opacity_80{filter:alpha(opacity=80);-moz-opacity:.8;-khtml-opacity:.8;opacity:.8}.opacity_90{filter:alpha(opacity=90);-moz-opacity:.9;-khtml-opacity:.9;opacity:.9}.opacity_100{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}
.text-indigo{color:#6610f2}.bg-indigo{background-color:#6610f2}.border-indigo{border-color:#6610f2}.text-purple{color:#6f42c1}.bg-purple{background-color:#6f42c1}.border-purple{border-color:#6f42c1}.text-pink{color:#e83e8c}.bg-pink{background-color:#e83e8c}.border-pink{border-color:#e83e8c}.text-red{color:#dc3545}.bg-red{background-color:#dc3545}.border-red{border-color:#dc3545}.text-orange{color:#fd7e14}.bg-orange{background-color:#fd7e14}.border-orange{border-color:#fd7e14}.text-yellow{color:#ffc107}.bg-yellow{background-color:#ffc107}.border-yellow{border-color:#ffc107}.text-green{color:#28a745}.bg-green{background-color:#28a745}.border-green{border-color:#28a745}.text-teal{color:#20c997}.bg-teal{background-color:#20c997}.border-teal{border-color:#20c997}.text-cyan{color:#17a2b8}.bg-cyan{background-color:#17a2b8}.border-cyan{border-color:#17a2b8}.text-white{color:#fff}.bg-white{background-color:#fff}.border-white{border-color:#fff}.text-gray{color:#6c757d}.bg-gray{background-color:#6c757d}.border-gray{border-color:#6c757d}.text-darkgray{color:#343a40}.bg-darkgray{background-color:#343a40}.border-darkgray{border-color:#343a40}.text-primary{color:#007bff}.bg-primary{background-color:#007bff}.border-primary{border-color:#007bff}.text-secondary{color:#6c757d}.bg-secondary{background-color:#6c757d}.border-secondary{border-color:#6c757d}.text-success{color:#28a745}.bg-success{background-color:#28a745}.border-success{border-color:#28a745}.text-info{color:#17a2b8}.bg-info{background-color:#17a2b8}.border-info{border-color:#17a2b8}.text-warning{color:#ffc107}.bg-warning{background-color:#ffc107}.border-warning{border-color:#ffc107}.text-danger{color:#dc3545}.bg-danger{background-color:#dc3545}.border-danger{border-color:#dc3545}.text-light{color:#f8f9fa}.bg-light{background-color:#f8f9fa}.border-light{border-color:#f8f9fa}.text-dark{color:#343a40}.bg-dark{background-color:#343a40}.border-dark{border-color:#343a40}.text-silver{color:#efefef}.bg-silver{background-color:#efefef}.border-silver{border-color:#efefef}.text-black{color:#000}.bg-black{background-color:#000}.border-black{border-color:#000}.bg-inverse{color:white}
.border{border-color:#eee;border-style:solid;border-width:1px}.border-top{border-top-color:#eee;border-top-style:solid;border-top-width:1px}.border-left{border-left-color:#eee;border-left-style:solid;border-left-width:1px}.border-right{border-right-color:#eee;border-right-style:solid;border-right-width:1px}.border-bottom{border-bottom-color:#eee;border-bottom-style:solid;border-bottom-width:1px}.border-little{border-width:1px}.border-radius-little{border-radius:2px}.border-small{border-width:2px}.border-radius-small{border-radius:5px}.border-middle{border-width:4px}.border-radius-middle{border-radius:10px}.border-big{border-width:6px}.border-radius-big{border-radius:20px}.border-large{border-width:10px}.border-radius-large{border-radius:50%}

发新帖

shuke

主题数
263

帖子数
79

注册排名
1

常常使用的CSS写法，舒克老师整理 CSS

shuke

作者最近主题：