自定义的全局公共样式
生活随笔
收集整理的這篇文章主要介紹了
自定义的全局公共样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
/* by zuoluo 2021-08-06 ========================================================================== *//* 全局padding、border、margin、font設置 */html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
address,
em,
img,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
i,
b,
s {margin: 0;padding: 0;border: 0;font-weight: inherit;font-style: inherit;font-family: Helvetica, Arial;word-break: break-all;
}body {word-wrap: break-word;font-size: 14px;color: #000;line-height: 1.5;font-family: Helvetica
}html, body, #app {border: 0;padding: 0;margin: 0;width: 100%;height: 100%;
}.font-yahei {font-family: "微軟雅黑";
}/* 輸入框 */textarea,
input {background: none;padding: 0;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;
}/* 無外框 */
textarea:focus,
input:focus,
button:focus {outline: none
}/* 清除ie瀏覽器input自帶的icon */
::-ms-clear,::-ms-reveal{display: none;
}/* input標簽聚焦不出現默認邊框: */
input{border: none;appearance:none;-moz-appearance:none;outline:none;-webkit-appearance: none;
}/* 共用樣式 */
/* 行或塊狀元素 */.inline{display: inline-block;*display: inline;*zoom: 1;
}.block {display: block;
}/* 背景圖全部填充 */
/* 結合背景圖一起使用 background: url("~@/assets/images/globalMonitor/sideItem-devide-bg.png") no-repeat center; */
.bg-size-fill {background-size: 100% 100%;-webkit-background-size: 100% 100%;-o-background-size: 100% 100%;
}/* 鼠標hover指針變化 */
.point-hover {cursor: pointer;
}/* 基礎字體 */
.basic-txt {font-size: 16px;color: #ccf2ff;
}/* 基礎字體-亮色 */
.basic-txt-light {color: #00eaff;font-size: 16px;
}/* 左右側浮動*/
.fl{float: left;
}
.fr {float: right;
}/* 文本水平居中*/
.tl {text-align: left;
}
.tc {text-align: center
}
.tr {text-align: right;
}/* 基礎字體-小 ，可設置小于12px*/
small {font-size: 80%;
}/* 基礎字體-上下標 */
sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}
sub {bottom: -0.25em;
}
sup {top: -0.5em;
}/*去掉列表前面的小點*/
ul,
ol,
li {list-style: none
}/*圖片沒有邊框 去掉圖片底側的空白縫隙*/img {border: 0;/*ie6*/vertical-align: middle;
}/*讓button 按鈕 變成小手*/button {cursor: pointer;
}/*鏈接的下劃線*/a {color: #ffffff;text-decoration: none;
}a:hover {color: #00ffff;cursor: pointer;
}/* 使所有a標簽的四種狀態都和本身顏色保持一致，樣式代碼自己寫 */
a:hover, a:visited, a:link, a:active {}/*隱藏*/.hide,
.none {display: none;
}/*使用after偽元素清除浮動*/.clearfix:after {visibility: hidden;clear: both;display: block;content: " ";height: 0;
}.clearfix {*zoom: 1;
}/*IE6,7*//*使用雙偽元素清楚浮動*/.clearfix:bofore,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}/* 文字超出范圍使用省略號 */.txt-overflow-llipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-word;
}/*多行溢出(超出省略)*/.text-two-dot {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-word;
}/*漸變色背景*/
.gradient-bg-toright {background-image: linear-gradient(to right, rgba(0,234,255,.3) , #00eaff);
}/*常用flex布局*/
.flex_dom {display: flex !important;display: -webkit-box !important;display: -webkit-flex !important;
}
.flex_column{flex-direction: column;-webkit-flex-direction: column;}
.flex_item_between{justify-content: space-between;-webkit-justify-content: space-between;}
.flex_item_center{ justify-content:center;-webkit-justify-content:center;}
.flex_item_around{justify-content: space-around;-webkit-justify-content: space-around;}
.flex_item_mid{align-items:center;-webkit-align-items: center;}
.flex_item_stretch{align-items: stretch;-webkit-align-items: stretch;}
.flex_wrap{flex-wrap: wrap;-webkit-flex-wrap: wrap;}/* 圖片圖標反轉 */
.transformX{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);
}/*字體和背景顏色庫*/.bg-fff {background-color: #fff;
}.bg-f1 {background-color: #f1f1f1;
}.bg-f7 {background-color: #F7F7F7;
}.bg-000 {background-color: #000000;
}.bg-333 {background-color: #333333;
}.bg-ddd {background-color: #DDDDDD;
}.bg-666 {background-color: #666666;
}.bg-999 {background-color: #999999;
}.bg-eee {background-color: #EEEEEE;
}.bg-f5 {background-color: #f5f5f5;
}.bg-red {background-color: #FF0000;
}.bg-orange {background-color: #ffa127;
}.bg-yellow {background-color: #f5bc24;
}.bg-green {background-color: #008000;
}.bg-lightgreen {background-color: #90EE90;
}.bg-blue {background-color: #0a669b;
}.bg-purple {background-color: #800080;
}.bg-mengban {background-color: rgba(68, 68, 68, 0.6);
}/**********陰影色***********/.shadow_fff {box-shadow: 0px 2px 3px #fff;
}.shadow_f1 {box-shadow: 0px 2px 3px #f1f1f1;
}.shadow_f7 {box-shadow: 0px 2px 3px #f7f7f7;
}.shadow_000 {box-shadow: 0px 2px 3px #000;
}.shadow_333 {box-shadow: 0px 2px 3px #333;
}.shadow_ddd {box-shadow: 0px 2px 3px #ddd;
}.shadow_666 {box-shadow: 0px 2px 3px #666;
}.shadow_999 {box-shadow: 0px 2px 3px #999;
}.shadow_red {box-shadow: 0px 2px 3px #FF0000;
}.shadow_orange {box-shadow: 0px 2px 3px #f8b03f;
}.shadow_yellow {box-shadow: 0px 2px 3px #f5bc24;
}.shadow_green {box-shadow: 0px 2px 3px #008000;
}.shadow_lightgreen {box-shadow: 0px 2px 3px #90EE90;
}.shadow_purple {box-shadow: 0px 2px 3px #800080;
}.shadow_orange {box-shadow: 0px 2px 3px #f8b03f;
}
總結
以上是生活随笔為你收集整理的自定义的全局公共样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【考研】2022温州大学计算机学硕招收调
- 下一篇： 一文读懂中国互联网的30年（整合版）