初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形

顔色

sass顔色变量声明

在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置。

module.exports = {    // ...    css: { sourceMap: true, loaderOptions: { sass: { prependData: `@import "@/assets/styles/variable.scss";` } } }}

主题色

    $color-red: #ff3333;$color-purple: #ff33a9;$color-orange: #ff8833;$color-blue: #3377ff;

文字色

    $color-black: #000;$color-dark: #333;$color-deep: #555;$color-pl: #999999;$color-weak: #B3B3B3;$color-white: #fff;

####### 背景色

    $bg-bar: #F9F9F9;$bg-page: #F3F3F3;$bg-page-light: #F9F9F9;

颜色样式，需使用颜色变量

.bg-red {background-color: $color-red !important;}.bg-purple {background-color: $color-purple !important;}.bg-orange {background-color: $color-orange !important;}.bg-blue {background-color: $color-blue !important;}.color-red {color: $color-red !important;}.color-purple {color: $color-purple !important;}.color-orange {color: $color-orange !important;}.color-blue {color: $color-blue !important;}.text-black {color: #000;}.text-dark {color: #333;}.text-deep {color: #555;}.text-weak {color: #B3B3B3;}.text-white {color: #fff;}

字体

.f10 {font-size: 10px;}.f12 {font-size: 12px;}.f14 {font-size: 14px;}.f15 {font-size: 15px;}.f17 {font-size: 17px;}.f20 {font-size: 20px;}.f24 {font-size: 24px;}/* // 文字对齐 */.tl {text-align: left;}.tc {text-align: center;}.tr {text-align: right;}

浮动与清除浮动

    .fl {float: left;}.fr {float: right;}.fix {*zoom: 1;}.fix:after {display: table;content: '';clear: both;}

显示

    .dn {display: none;}.di {display: inline;}.db {display: block;}.dib {display: inline-block;}.dt {display: table;}div.dib {*display: inline;*zoom: 1;}.vm {vertical-align: middle;}.vib {display: inline-block;vertical-align: middle;}

定位

    .pr {position: relative;}.pa {position: absolute;}.pf {position: fixed;}

盒子模型

    .ml4 {margin-left: 4px;}.mr4 {margin-right: 4px;}.mt4 {margin-top: 4px;}.mb4 {margin-bottom: 4px;}.ml8 {margin-left: 8px;}.mr8 {margin-right: 8px;}.mt8 {margin-top: 8px;}.mb8 {margin-bottom: 8px;}.ml12 {margin-left: 12px;}.mr12 {margin-right: 12px;}.mt12 {margin-top: 12px;}.mb12 {margin-bottom: 12px;}.ml16 {margin-left: 16px;}.mr16 {margin-right: 16px;}.mt16 {margin-top: 16px;}.mb16 {margin-bottom: 16px;}.ml20 {margin-left: 20px;}.mr20 {margin-right: 20px;}.mt20 {margin-top: 20px;}.mb20 {margin-bottom: 20px;}.ml24 {margin-left: 24px;}.mr24 {margin-right: 24px;}.mt24 {margin-top: 24px;}.mb24 {margin-bottom: 24px;}.ml10 {margin-left: 10px;}.mr10 {margin-right: 10px;}.mt10 {margin-top: 10px;}.mb10 {margin-bottom: 10px;}.ml15 {margin-left: 15px;}.mr15 {margin-right: 15px;}.mt15 {margin-top: 15px;}.mb15 {margin-bottom: 15px;}

按钮禁用

    .disabled {outline: 0 none;cursor: default !important;opacity: .4;filter: alpha(opacity=40);-ms-pointer-events: none;pointer-events: none;}

CSS画圆半圆扇形三角梯形

div{margin: 50px;width: 100px;height: 100px;background: red;
}
/* 半圆 */
.half-circle{height: 50px;border-radius: 50px 50px 0 0;
}
/* 扇形 */
.sector{border-radius: 100px 0 0;
}
/* 三角 */
.triangle{width: 0px;height: 0px;background: none;border: 50px solid red;border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder{width: 50px;height: 0px;background: none;border: 50px solid red;border-color: red transparent transparent transparent;
}

初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形相关推荐

CSS画圆半圆扇形三角梯形
直接上代码: div{margin: 50px;width: 100px;height: 100px;background: red; } /* 半圆 */ .half-circle{height: ...
css宋体代码_css字体样式
css字体样式 font-size : 字体大小 font-size属性用于设置字号,该属性的值可以使用相对单位长度,也可以使用绝对单位长度. 相对长度单位说明 em 相对当前对象内文本的字体尺寸 ...
设计网页字体css,CSS样式设计网页字体与用户体验
CSS样式设计网页字体与用户体验互联网发布时间:2009-04-02 19:36:06 作者:佚名我要评论网页制作Webjx文章简介:在设计网页时,没有比页面的外观更重要的了.所以 ...
css样式的颜色表达方式+彩虹小人
css样式的颜色表达方式+彩虹小人 css样式的颜色表达方式有三种. 第一种就是直接用英文的颜色来表达. 第二种就是通过16进制来表示,具体的颜色是什么样的代码,请自行解决,我也不知道,我是通过在火狐 ...
我优化了李笑来的MarkdownHere，附css样式代码，文章排版再也不用愁了
Markdownhere 是李笑来制作的一套 CSS 主题,已开源在 GitHub 上,对于中文的显示效果比较友好,字距.行距比直接套用英文模板更加自然,是为数不多的优质中文 CSS 主题. 使用Ma ...
微软雅黑html中怎么写,css样式怎么设置字体为微软雅黑？
css样式怎么设置字体为微软雅黑?下面本篇文章就来给大家介绍一下使用CSS设置字体为微软雅黑的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 首先要了解css中是如何控制字体的 ...
css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（）...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅甘肃蚤缀.垫状棘豆垫状驼绒藜 ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
根据html除去多余css样式在线,利用css-redundancy-checker去除冗余、无用、废弃的css样式代码...
背景为网站写CSS样式的时候,经常会遇到CSS样式的修改或者网页设计的改变,而这些网页在经过无数次的修改之后,可能有些样式已经用不到了,css文件中可能存在着一些没用的CSS代码.这些无用的CSS代 ...

初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形

顔色

sass顔色变量声明

在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置。

主题色

文字色

颜色样式，需使用颜色变量

字体

浮动与清除浮动

显示

定位

盒子模型

按钮禁用

CSS画圆半圆扇形三角梯形

初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形相关推荐

最新文章

热门文章