css公共样式插入音乐,【超全】常用的css公共样式
自己做前端也3年了，每次写项目的时候都会遇到一个简单的样式修改却要自己去取一个类名，然后添加样式。而且不同的地方又要复用。所以干脆静下心整理了一下自己在做项目的时候经常用到的样式。直接添加类名就可以得到自己希望的样式了，既简单也方便维护。大家需要可以保留，直接使用。此份不是基础默认设置。因为基础默认设置网上太多了。看后面是不是需要再整理一份全面的基础默认样式设置。
@mainColor: #609af5;
@red: #ff6a70;
@yellow: #fe930e;
@green: #52c424;
// 字体颜色
.c9 {
color: #999;
}
.c6 {
color: #666;
}
.c-fff,
.c-white {
color: #fff;
}
.c-blue {
color: @mainColor !important;
}
.c-red {
color: @red !important;
}
.c-yellow {
color: @yellow !important;
}
.c-green {
color: @green !important;
}
// 字重
.bold,
.f600 {
font-weight: bold !important;
}
.normal,
.f400 {
font-weight: normal !important;
}
// 字体尺寸
.fz10 {
font-size: 10;
}
.fz12 {
font-size: 12px;
}
.fz14 {
font-size: 14px;
}
.fz16 {
font-size: 16px;
}
.fz18 {
font-size: 18px;
}
.fz20 {
font-size: 20px;
}
.fz22 {
font-size: 22px;
}
.fz24 {
font-size: 24px;
}
.fz26 {
font-size: 26px;
}
.fz28 {
font-size: 28px;
}
.fz30 {
font-size: 30px;
}
.fz32 {
font-size: 32px;
}
// 背景颜色
.bgc-white,
.bgc-fff {
background-color: #fff;
}
.bgc-gery {
background-color: #f2f2f2;
}
.bgc-blue {
background-color: blue;
}
.bgc-yellow {
background-color: @yellow;
}
.bgc-red {
background-color: @red;
}
.bgc-green {
background-color: @green;
}
// 圆角
.bdr2 {
border-radius: 2px;
}
.bdr4 {
border-radius: 4px;
}
.bdr8 {
border-radius: 8px;
}
.bdr50p {
border-radius: 50%;
}
// 布局方式
.flex {
display: flex;
align-items: center;
}
.zhong {
display: flex;
align-items: center;
justify-content: center;
}
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.space-around {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-warp {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.flex-col {
display: flex;
flex-direction: column;
align-items: flex-start !important;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.flex-center {
display: flex;
justify-content: center;
}
.db,
.show {
display: block;
}
.dib {
display: inline-block;
}
.hide {
display: none;
}
.fl,
.pull-left {
float: left;
}
.fr,
.pull-right {
float: right;
}
// margin值
.m-5 {
margin: -5px !important;
}
.mt-5 {
margin-top: -5px !important;
}
.mb-5 {
margin-bottom: -5px !important;
}
.ml-5 {
margin-left: -5px !important;
}
.mr-5 {
margin-right: -5px !important;
}
.m0 {
margin: 0px !important;
}
.mt0 {
margin-top: 0px !important;
}
.mb0 {
margin-bottom: 0px !important;
}
.ml0 {
margin-left: 0px !important;
}
.mr0 {
margin-right: 0px !important;
}
.m5 {
margin: 5px !important;
}
.mt5 {
margin-top: 5px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.ml5 {
margin-left: 5px !important;
}
.mr5 {
margin-right: 5px !important;
}
.m10 {
margin: 10px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.ml10 {
margin-left: 10px !important;
}
.mr10 {
margin-right: 10px !important;
}
.m15 {
margin: 15px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.ml15 {
margin-left: 15px !important;
}
.mr15 {
margin-right: 15px !important;
}
.m20 {
margin: 20px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.ml20 {
margin-left: 20px !important;
}
.mr20 {
margin-right: 20px !important;
}
.m25 {
margin: 25px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mb25 {
margin-bottom: 25px !important;
}
.ml25 {
margin-left: 25px !important;
}
.mr25 {
margin-right: 25px !important;
}
.m30 {
margin: 30px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.ml30 {
margin-left: 30px !important;
}
.mr30 {
margin-right: 30px !important;
}
.m50 {
margin: 50px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.ml50 {
margin-left: 50px !important;
}
.mr50 {
margin-right: 50px !important;
}
// padding值
.p0 {
padding: 0 !important;
}
.pt0 {
padding-top: 0 !important;
}
.pr0 {
padding-right: 0 !important;
}
.pb0 {
padding-bottom: 0 !important;
}
.pl0 {
padding-left: 0 !important;
}
.p5 {
padding: 5px;
}
.pt5 {
padding-top: 5px;
}
.pr5 {
padding-right: 5px;
}
.pb5 {
padding-bottom: 5px;
}
.pl5 {
padding-left: 5px;
}
.p10 {
padding: 10px;
}
.pt10 {
padding-top: 10px;
}
.pr10 {
padding-right: 10px;
}
.pb10 {
padding-bottom: 10px;
}
.pl10 {
padding-left: 10px;
}
.p15 {
padding: 15px;
}
.pt15 {
padding-top: 15px;
}
.pr15 {
padding-right: 15px;
}
.pb15 {
padding-bottom: 15px;
}
.pl15 {
padding-left: 15px;
}
.p20 {
padding: 20px;
box-sizing: border-box;
}
.pt20 {
padding-top: 20px;
}
.pr20 {
padding-right: 20px;
}
.pb20 {
padding-bottom: 20px;
}
.pl20 {
padding-left: 20px;
}
.p30 {
padding: 30px;
box-sizing: border-box;
}
.pt30 {
padding-top: 30px;
}
.pr30 {
padding-right: 30px;
}
.pb30 {
padding-bottom: 30px;
}
.pl30 {
padding-left: 30px;
}
.pb50 {
padding-bottom: 50px;
}
.pl50 {
padding-left: 50px;
}
.pl120 {
padding-left: 120px;
}
.pl150 {
padding-left: 150px;
}
.pt50 {
padding-top: 50px;
}
// 文本线格式
.overline {
text-decoration: overline
}
.line-through {
text-decoration: line-through
}
.underline {
text-decoration: underline
}
.blink {
text-decoration: blink
}
// 字体对齐方式
.tac {
text-align: center;
justify-content: center;
}
.tal {
text-align: left !important;
}
.tar {
text-align: right !important;
}
// 宽度
.w10p {
width: 10%;
}
.w20p {
width: 20%;
}
.w25p {
width: 25%;
}
.w30p {
width: 30%;
}
.w40p {
width: 40%;
}
.w50p {
width: 50%;
}
.w60p {
width: 60%;
}
.w70p {
width: 70%;
}
.w75p {
width: 75%;
}
.w80p {
width: 80%;
}
.w90p {
width: 90%;
}
.w100p {
width: 100%;
}
.w20 {
width: 20px;
}
.w25 {
width: 25px;
}
.w50 {
width: 50px;
}
.w75 {
width: 75px;
}
.w100 {
width: 100px;
}
.w125 {
width: 125px;
}
.w150 {
width: 150px;
}
.w175 {
width: 175px;
}
.w200 {
width: 200px;
}
.w210 {
width: 210px;
}
.w220 {
width: 220px;
}
.w250 {
width: 250px;
}
.w275 {
width: 275px;
}
.w300 {
width: 300px;
}
.w325 {
width: 325px;
}
.w350 {
width: 350px;
}
.w375 {
width: 375px;
}
.w400 {
width: 400px;
}
.w450 {
width: 450px;
}
.w500 {
width: 500px;
}
.w600 {
width: 600px;
}
.w750 {
width: 750px;
}
.w1000 {
width: 1000px;
}
// 高度
.h15 {
height: 15px;
}
.h10 {
height: 10px !important;
}
.h20 {
height: 20px !important;
}
.h25 {
height: 25px !important;
}
.h30 {
height: 30px !important;
}
.h40 {
height: 40px !important;
}
.h50 {
height: 50px !important;
}
.h60 {
height: 60px !important;
}
.h70 {
height: 70px !important;
}
.h75 {
height: 75px !important;
}
.h80 {
height: 80px !important;
}
.h90 {
height: 90px !important;
}
.h100 {
height: 100px !important;
}
.h125 {
height: 125px !important;
}
.h150 {
height: 150px !important;
}
.h10p {
height: 10%;
}
.h20p {
height: 20%;
}
.h30p {
height: 30%;
}
.h40p {
height: 40%;
}
.h50p {
height: 50%;
}
.h60p {
height: 60%;
}
.h70p {
height: 70%;
}
.h80p {
height: 80%;
}
.h90p {
height: 90%;
}
.h100p {
height: 100%;
}
.h10vh {
height: 10vh;
}
.h20vh {
height: 20vh;
}
.h30vh {
height: 30vh;
}
.h40vh {
height: 40vh;
}
.h50vh {
height: 50vh;
}
.h60vh {
height: 60vh;
}
.h70vh {
height: 70vh;
}
.h80vh {
height: 80vh;
}
.h90vh {
height: 90vh;
}
.h100vh {
height: 100vh;
}
.h600 {
height: 600px;
}
.h800 {
height: 800px;
}
// 行高
.lh16 {
line-height: 16px;
}
.lh18 {
line-height: 18px;
}
.lh20 {
line-height: 20px;
}
.lh22 {
line-height: 22px;
}
.lh25 {
line-height: 25px;
}
.lh30 {
line-height: 30px;
}
// 定位
.relative {
position: relative;
}
.point {
cursor: pointer !important;
user-select: none;
}
// 文字竖向排列
.column {
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;
/从左向右 从右向左是 writing-mode: vertical-rl;/
writing-mode: tb-lr;
/IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；/
}
/* 解决文字超出溢出问题 */
.text-cut {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
css公共样式插入音乐,【超全】常用的css公共样式相关推荐
- 超全的echarts折线图样式整理
超全的echarts折线图样式整理 本次记录了echarts的折线颜色修改.自定义展示折线最后一个数值内容.自定义折线内容颜色.自定义折线图缩放展示.x轴线条粗细调整.x轴箭头单箭头调整.y轴线条粗细 ...
- css默认的font-size是什么意思,常用的css属性：font-size等
原标题:常用的css属性:font-size等 今天给大家介绍一些常用的css属性: 1 font-size:用于设置字体大小 font-size:20px; font-size:150% 2 fon ...
- 自学生物信息学（思维+超全常用网站）
如果你有以下情况,你可以做什么? 一个基因或一种蛋白质 1.在DNA水平上 2.在转录层面 3.在蛋白质水平上 一组基因/蛋白质 芯片 高通量测序数 一系列测序数据 生物学问题 一个基因或一种蛋白质 ...
- html css布局大全,史上最全Html与CSS布局技巧
水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是p ...
- Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
目录 一.CSS文本属性 二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性 三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
- CSS超全笔记（适合新手入门）
CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等 ...
- 史上最全的Linux常用——目录和文件管理命令——收藏这一篇就够了！（超全，超详细）
史上最全的Linux常用--目录和文件管理命令--收藏这一篇就够了!(超全,超详细) Linux目录结构 命令 查看文件内容:-cat 查看文件内容:-more 查看文件内容:-less 查看文件内容 ...
- 北京常用电话！超全！！！
北京常用电话!超全!!! 市长热线:12345 65128088 反扒热线:64011327 火警:119 交通伤急救热线:6 ...
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
最新文章
- IFeature接口
- 华为北大等打造的Transformer竟在CV上超过CNN
- 安装、连接MS SQL Server 2000的问题
- ISIS建立邻居的条件
- 统计学习方法第十章作业：HMM模型—概率计算问题、Baum-Welch学习算法、维特比预测算法 代码实现
- eclipse html自动编译,eclipse不自动编译解决方法 不编译要怎么办
- xxxx is not found in PojoType＜Order, fields = [amount: Integer, product: String, user: Long]＞
- 思科设备snmp配置。
- php post 漏洞_WordPress漏洞分析
- 搭建安卓开发环境 GIT配色 terminator SecureCRT source insight Notepad++安装
- postman如何使用mockserver？
- Kubernetes 健康状态检查liveness和readiness
- 人工智能传奇——关于AI起源与发展的故事
- 基于STM32单片机采集数据数据上云
- 复选框判断是否选中及获取值
- Excel文件的下载
- 中控服务器PDS系统,bss中控服务器主机
- 人在外省想在老家装监控，在手机上能看，要什么条件和材料？
- 彩色图像转灰度图像原理python
- java分割图片_OpenCV3 Java分割图像 提取图像的RGB三原色（Core.split）
热门文章
- 决战平安京解包--专有模型格式转换成PMX
- 梦回2008样式原子化:Tailwind是如何让Facebook拜倒在她的石榴裙下？
- 计算机组成原理唐朔飞第二版答案第六章,计算机组成原理第六章部分课后题答案(唐朔飞版)...
- 钉钉网页版入口，存档
- android 阅读 翻页,极速PDF安卓版如何翻页、阅读模式修改等操作详解
- 网工学习 第十一章 网络管理 网络管理基础 网络管理协议五大标准 SNMP协议 RMON
- 20190605学习日记
- AI元宇宙敲门砖【3.2】：太好听了吧，和AI一起唱，一起做虚拟偶像
- Cocos2d-js cc.director介绍
- NEON码农指导 Chapter 4 : NEON Intrinsics