2023年6月20日发(作者：)
html的公共样式,HTML+CSS⼊门CSS公共样式本篇教程介绍了HTML+CSS⼊门 CSS公共样式，希望阅读本篇⽂章以后⼤家有所收获，帮助⼤家HTML+CSS⼊门。<@charset "utf-8";*{margin: 0px;padding: 0px;}body {background: #FFFFFF;color: #333;font-family: "微软雅⿊";font-size: 14px;font-weight: lighter;}ul,li,ol,dl,dt,dd {list-style: none;}a {color: #333;text-decoration: none;cursor: pointer;outline: 0 none;}a:link,a:visited {text-decoration: none;color: #1F376D;}a:hover,a:active {text-decoration: none;color: #BD0A01;border: none;}button,input,select {vertical-align: middle;}button{cursor: pointer;}img {border: 0 none;}table{border-collapse:collapse;}.fl{float: left;}.fr{float: right;}.overflow-h {overflow: hidden;}.cl {clear: both;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.none {display: none}.block {display: block}.inline-block{display: inline-block}.t-l {text-align: left;}.t-c {text-align: center;}.t-r {text-align: right;}.vm {vertical-align: middle}.bg-red {background-color: #FB8B76;}.bg-red:hover{background-color: #FF2525;}.bg-yellow {background-color: #FCBA50;}.bg-yellow:hover{background-color: #FF2525;}.bg-blue {background-color: #3DC5D0;}.bg-blue:hover{background-color: #FF2525;}.bg-green{background-color: #82D745;}.bg-green:hover{background-color: #FF2525;}.bg-gray {background-color: #FDFDFE;}.bg-gray:hover{background-color: #FF2525;}.bg-pink{background-color: #EC6C8D;}.bg-pink:hover{background-color: #F24874;}.F12{font-size: 12px;}.F14{font-size: 14px;}.F16{font-size: 16px;}.F18{font-size: 18px;}.F20{font-size: 20px;}.color1{color: #333;}.color2{color: #666;}.color3{color: #999;}.FB{font-weight: bold;}.FN{font-weight: normal;}.FI{font-style: italic;}.w{width:100%}.h{height:100%}.h30 {height:30px;}.lh30 {line-height: 30px;}.btn{display: inline-block;padding:0px 16px;height:100%;border-radius:4px;cursor: pointer;}/*遮罩层*/.maskLayer{z-index: 9999;display: none;position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);}/*⽂字溢出*/.p-eclipse{width: 100%;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-moz-binding:url(‘#ellipsis‘);}.p-eclipse-2{overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2;}.p-eclipse-3{overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:3;}/*页⾯顶部阴影*/.top-shadow:before {z-index: 100;content: "";position: fixed;top: -10px;left: 0;width: 100%;height: 10px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);}/***********************设置滚动条样式**************************/.scroll{overflow: scroll;}/*滚动条整体部分，* 其中的属性有width,height,background,border* (就和⼀个块级元素⼀样)等。* */.scroll::-webkit-scrollbar{width: 12px;background-color: #eee;}/*外层轨道。* 可以⽤display:none让其不显⽰，* 也可以添加背景图⽚，颜⾊改变显⽰效果。* */.scroll::-webkit-scrollbar-track{background-color: #eee;}/*滚动条⾥⾯可以拖动的那部分*/.scroll::-webkit-scrollbar-thumb{border-radius: 10px;background: #3DB6A4;}/*滚动条两端的按钮。* 可以⽤display:none让其不显⽰，* 也可以添加背景图⽚，颜⾊改变显⽰效果。* */.scroll::-webkit-scrollbar-button:start {background: url(./imgs/) no-repeat;background-size: 12px 12px;}.scroll::-webkit-scrollbar-button:end{background: url(./imgs/) no-repeat;background-size: 12px 12px;}/*内层轨道，滚动条中间部分(除去)。*/.scroll::-webkit-scrollbar-track-piece{};/*边⾓ */.scroll::-webkit-scrollbar-corner{};/*定义右下⾓拖动块的样式*/.scroll::-webkit-resizer{};/*****************************渐变背景颜⾊*********************/.bg-lr{/*⽕狐*/background:-moz-linear-gradient(left, #F68E06, #F45408);/*Safari5.1 Chrome 10+*/background:-webkit-linear-gradient(left, #F68E06, #F45408);/* Safari 4-5, Chrome 1-9*/background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));/*Opera 11.10+*/background: -o-linear-gradient(left, #F68E06, #F45408);/* IE 10 */background:-ms-linear-gradient(left, #F68E06, #F45408);/*IE 6 7 8*/-ms-filter:"progid:nt (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";background:linear-gradient(left, #F68E06, #F45408);+background:#FA7002;}.bg-tb{/*⽕狐*/background:-moz-linear-gradient(top, #F68E06, #F45408);/*Safari5.1 Chrome 10+*/background:-webkit-linear-gradient(top, #F68E06, #F45408);/* Safari 4-5, Chrome 1-9*/background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));/*Opera 11.10+*/background: -o-linear-gradient(top, #F68E06, #F45408);/* IE 10 */background:-ms-linear-gradient(top, #F68E06, #F45408);/*IE 6 7 8*/-ms-filter:"progid:nt (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";background:linear-gradient(top, #F68E06, #F45408);+background:#FA7002;}/*****************************table表格样式**********************/本⽂由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
2023年6月20日发(作者：)
html的公共样式,HTML+CSS⼊门CSS公共样式本篇教程介绍了HTML+CSS⼊门 CSS公共样式，希望阅读本篇⽂章以后⼤家有所收获，帮助⼤家HTML+CSS⼊门。<@charset "utf-8";*{margin: 0px;padding: 0px;}body {background: #FFFFFF;color: #333;font-family: "微软雅⿊";font-size: 14px;font-weight: lighter;}ul,li,ol,dl,dt,dd {list-style: none;}a {color: #333;text-decoration: none;cursor: pointer;outline: 0 none;}a:link,a:visited {text-decoration: none;color: #1F376D;}a:hover,a:active {text-decoration: none;color: #BD0A01;border: none;}button,input,select {vertical-align: middle;}button{cursor: pointer;}img {border: 0 none;}table{border-collapse:collapse;}.fl{float: left;}.fr{float: right;}.overflow-h {overflow: hidden;}.cl {clear: both;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.none {display: none}.block {display: block}.inline-block{display: inline-block}.t-l {text-align: left;}.t-c {text-align: center;}.t-r {text-align: right;}.vm {vertical-align: middle}.bg-red {background-color: #FB8B76;}.bg-red:hover{background-color: #FF2525;}.bg-yellow {background-color: #FCBA50;}.bg-yellow:hover{background-color: #FF2525;}.bg-blue {background-color: #3DC5D0;}.bg-blue:hover{background-color: #FF2525;}.bg-green{background-color: #82D745;}.bg-green:hover{background-color: #FF2525;}.bg-gray {background-color: #FDFDFE;}.bg-gray:hover{background-color: #FF2525;}.bg-pink{background-color: #EC6C8D;}.bg-pink:hover{background-color: #F24874;}.F12{font-size: 12px;}.F14{font-size: 14px;}.F16{font-size: 16px;}.F18{font-size: 18px;}.F20{font-size: 20px;}.color1{color: #333;}.color2{color: #666;}.color3{color: #999;}.FB{font-weight: bold;}.FN{font-weight: normal;}.FI{font-style: italic;}.w{width:100%}.h{height:100%}.h30 {height:30px;}.lh30 {line-height: 30px;}.btn{display: inline-block;padding:0px 16px;height:100%;border-radius:4px;cursor: pointer;}/*遮罩层*/.maskLayer{z-index: 9999;display: none;position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);}/*⽂字溢出*/.p-eclipse{width: 100%;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-moz-binding:url(‘#ellipsis‘);}.p-eclipse-2{overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:2;}.p-eclipse-3{overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:3;}/*页⾯顶部阴影*/.top-shadow:before {z-index: 100;content: "";position: fixed;top: -10px;left: 0;width: 100%;height: 10px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);}/***********************设置滚动条样式**************************/.scroll{overflow: scroll;}/*滚动条整体部分，* 其中的属性有width,height,background,border* (就和⼀个块级元素⼀样)等。* */.scroll::-webkit-scrollbar{width: 12px;background-color: #eee;}/*外层轨道。* 可以⽤display:none让其不显⽰，* 也可以添加背景图⽚，颜⾊改变显⽰效果。* */.scroll::-webkit-scrollbar-track{background-color: #eee;}/*滚动条⾥⾯可以拖动的那部分*/.scroll::-webkit-scrollbar-thumb{border-radius: 10px;background: #3DB6A4;}/*滚动条两端的按钮。* 可以⽤display:none让其不显⽰，* 也可以添加背景图⽚，颜⾊改变显⽰效果。* */.scroll::-webkit-scrollbar-button:start {background: url(./imgs/) no-repeat;background-size: 12px 12px;}.scroll::-webkit-scrollbar-button:end{background: url(./imgs/) no-repeat;background-size: 12px 12px;}/*内层轨道，滚动条中间部分(除去)。*/.scroll::-webkit-scrollbar-track-piece{};/*边⾓ */.scroll::-webkit-scrollbar-corner{};/*定义右下⾓拖动块的样式*/.scroll::-webkit-resizer{};/*****************************渐变背景颜⾊*********************/.bg-lr{/*⽕狐*/background:-moz-linear-gradient(left, #F68E06, #F45408);/*Safari5.1 Chrome 10+*/background:-webkit-linear-gradient(left, #F68E06, #F45408);/* Safari 4-5, Chrome 1-9*/background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));/*Opera 11.10+*/background: -o-linear-gradient(left, #F68E06, #F45408);/* IE 10 */background:-ms-linear-gradient(left, #F68E06, #F45408);/*IE 6 7 8*/-ms-filter:"progid:nt (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";background:linear-gradient(left, #F68E06, #F45408);+background:#FA7002;}.bg-tb{/*⽕狐*/background:-moz-linear-gradient(top, #F68E06, #F45408);/*Safari5.1 Chrome 10+*/background:-webkit-linear-gradient(top, #F68E06, #F45408);/* Safari 4-5, Chrome 1-9*/background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));/*Opera 11.10+*/background: -o-linear-gradient(top, #F68E06, #F45408);/* IE 10 */background:-ms-linear-gradient(top, #F68E06, #F45408);/*IE 6 7 8*/-ms-filter:"progid:nt (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";background:linear-gradient(top, #F68E06, #F45408);+background:#FA7002;}/*****************************table表格样式**********************/本⽂由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
![[elementui]el-table在同时使用固定列和合计行时横向滚动条被遮挡](/uploads/image/0784.jpg)
发布评论