OOCSS(面向对象的CSS)总结
按钮样式库:buttons.css
- /* vue */
- [v-cloak]{display: none}
- /* 滚动条 */
- ::-webkit-scrollbar {
- width: 6px;
- height: 6px;
- background-color: transparent;
- }
- ::-webkit-scrollbar-thumb {
- background: linear-gradient(-90deg, rgba(215, 215, 215, 0.95), rgba(225, 228, 228, 0.95));
- border-radius: 2px;
- }
- ::-webkit-scrollbar-track {
- background-color: transparent;
- }
- /* 全局 */
- /**
- * -webkit-overflow-scrolling: touch; //有回弹效果
- * -webkit-overflow-scrolling: auto; //滑到哪停到哪
- **/
- *{padding:;margin:;font-style: normal;outline: none;box-sizing: border-box;-webkit-overflow-scrolling: touch;-webkit-tap-highlight-color:transparent;}
- ul,ol{list-style: none;}
- a{text-decoration: none;}
- table{border-collapse: collapse;}
- html,body{position: relative;}
- /* 定位 */
- .por{position: relative;}
- .poa{position: absolute;}
- .pof{position: fixed;}
- .left{left:;}
- .top{top:;}
- .right{right:;}
- .bottom{bottom:;}
- .left_50{left: 50%;}
- .top_50{top: 50%;}
- .right_50{right: 50%;}
- .bottom_50{bottom: 50%;}
- .transform_center{transform: translate(-50%,-50%);}
- .transform_X{transform: translateX(-50%);}
- .transform_Y{transform: translateY(-50%);}
- .z-1{z-index: -1;}
- .z0{z-index:;}
- .z1{z-index:;}
- .z2{z-index:;}
- .z3{z-index:;}
- .z4{z-index:;}
- .z5{z-index:;}
- .z6{z-index:;}
- .z9999{z-index:;}
- .z99999{z-index:;}
- /* 浮动 */
- .L{float: left;}
- .R{float: right;}
- .clear::before,
- .clear::after{content: '';clear: both;display: block;}
- /* 块级、文本元素 */
- .inblock{display: inline-block;}
- .grid{display: grid;}
- .block{display: block;}
- .inline{display: inline;}
- .webkitbox{display: -webkit-box;}
- /* 图片填充 */
- .of_cover{object-fit: cover;}
- .of_contain{object-fit: contain;}
- /* 背景图片填充 */
- .bgs_cover{background-size: cover;}
- .bgp_center{background-position: center;}
- /* 文本 */
- .txt_normal{font-weight:;font-style: normal;}
- .pointer{cursor: pointer;}
- .txt_left{text-align: left;}
- .txt_center{text-align: center;}
- .txt_nowrap{white-space: nowrap;}
- .txt_ellipsis{text-overflow: ellipsis;}
- .txt_justify{text-align: justify;}
- .b{font-weight: bolder;}
- .middle{vertical-align: middle;}
- /* 溢出 */
- .overhidden{overflow: hidden;}
- .overauto{overflow: auto;}
- .overhidden-x{overflow-x: hidden;overflow-y: auto;}
- .overhidden-y{overflow-y: hidden;overflow-x: auto;}
- /* flex弹性布局 */
- .flex{display: flex;}
- .jc_start{justify-content: flex-start;}
- .jc_center{justify-content: center;}
- .jc_between{justify-content: space-between;}
- .ai_center{align-items: center;}
- .ai_end{align-items: flex-end;}
- .flex1{flex:;}
- /* border */
- .border{border:;}
- .border_l{border-left:;}
- .border_t{border-top:;}
- .border_r{border-right:;}
- .border_b{border-bottom:;}
- /* border-radius */
- .radius1{border-radius: 1px;}
- .radius2{border-radius: 2px;}
- .radius3{border-radius: 3px;}
- .radius4{border-radius: 4px;}
- .radius5{border-radius: 5px;}
- .radius6{border-radius: 6px;}
- .radius7{border-radius: 7px;}
- .radius8{border-radius: 8px;}
- .radius9{border-radius: 9px;}
- .radius10{border-radius: 10px;}
- .radius_tl{border-top-left-radius:;}
- .radius_tr{border-top-right-radius:;}
- .radius_br{border-bottom-right-radius:;}
- .radius_bl{border-bottom-left-radius:;}
- /* font-size */
- .f8{font-size: 8px;}
- .f9{font-size: 9px;}
- .f10{font-size: 10px;}
- .f11{font-size: 11px;}
- .f12{font-size: 12px;}
- .f13{font-size: 13px;}
- .f14{font-size: 14px;}
- .f15{font-size: 15px;}
- .f16{font-size: 16px;}
- .f17{font-size: 17px;}
- .f18{font-size: 18px;}
- .f19{font-size: 19px;}
- .f20{font-size: 20px;}
- /* 宽度 */
- .w_10{width: 10%;}
- .w_20{width: 20%;}
- .w_30{width: 30%;}
- .w_333{width: 33.3%;}
- .w_40{width: 40%;}
- .w_50{width: 50%;}
- .w_60{width: 60%;}
- .w_70{width: 70%;}
- .w_80{width: 80%;}
- .w_90{width: 90%;}
- .w_100{width: 100%;}
- .w100{width: 100px;}
- /* 高度 */
- .h_10{height: 10%;}
- .h_20{height: 20%;}
- .h_30{height: 30%;}
- .h_333{height: 33.3%;}
- .h_40{height: 40%;}
- .h_50{height: 50%;}
- .h_60{height: 60%;}
- .h_70{height: 70%;}
- .h_80{height: 80%;}
- .h_90{height: 90%;}
- .h_100{height: 100%;}
- .h100{height: 100px;}
- .lh100{line-height: 100px;}
- /* color */
- .color333{color: #333;}
- .color666{color: #666;}
- .color999{color: #999;}
- .colorccc{color: #ccc;}
- .coloreee{color: #eee;}
- .colorfff{color: #fff;}
- /* background-color */
- .bgcolor333{background-color: #333;}
- .bgcolor666{background-color: #666;}
- .bgcolor999{background-color: #999;}
- .bgcolorccc{background-color: #ccc;}
- .bgcoloreee{background-color: #eee;}
- .bgcolorfff{background-color: #fff;}
- /* opacity */
- .opa0{opacity:;}
- .opa1{opacity: 0.1;}
- .opa2{opacity: 0.2;}
- .opa3{opacity: 0.3;}
- .opa4{opacity: 0.4;}
- .opa5{opacity: 0.5;}
- .opa6{opacity: 0.6;}
- .opa7{opacity: 0.7;}
- .opa8{opacity: 0.8;}
- .opa9{opacity: 0.9;}
- /* padding */
- .pad10{padding: 10px;}
- .pad15{padding: 15px;}
- .pad20{padding: 20px;}
- .pad24{padding: 24px;}
- .pad30{padding: 30px;}
- .pad{padding:;}
- .pad_l{padding-left:;}
- .pad_t{padding-top:;}
- .pad_r{padding-right:;}
- .pad_b{padding-bottom:;}
- /* margin */
- .mar_auto{margin: 0 auto;}
- .mar10{margin: 10px;}
- .mar15{margin: 15px;}
- .mar20{margin: 20px;}
- .mar24{margin: 24px;}
- .mar30{margin: 30px;}
- .mar{margin:;}
- .mar_l{margin-left:;}
- .mar_t{margin-top:;}
- .mar_r{margin-right:;}
- .mar_b{margin-bottom:;}
- /* 解决ios-button圆角问题 */
- .ios_btn{-webkit-appearance : none ;}
OOCSS(面向对象的CSS)总结的更多相关文章
- 面向对象的 CSS (OOCSS)
原文链接:来自smashing magazine 译文 你是否听说过一个词语叫“内容就是王道”?作为一个 Web 开发者,我们的工作与内容创作有着频繁的联系.这是一条经常被引用,并且正确地解释了什么因 ...
- 面向对象的css less 和sass
Css 初始化 reset.css 或者 normalise . Near.css兼容IE6以及现代浏览器. Oocss 也就是面向对象的css 面向对象是将cs ...
- 面向对象的CSS
原文 简书原文:https://www.jianshu.com/p/cb5e9f56ddcc 大纲 1.面向对象的CSS(OOCSS)概念 2.面向对象的CSS的作用 3.面向对象的CSS的注意事项 ...
- CSS在工程中改变之面向对象的 CSS
oocss的概念 众多开发者忽视了css的表现(认为它) oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例. oocss的作用 1.加强代码 ...
- CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
一.OO CSS 的概念解读 (一)众多开发者忽视了CSS的表现,认为其太过简单,是一种机械的工作,而把更多关注在JS的性能或者其他方面. (二)OO CSS 将页面可重用元素抽象成一个类,用cla ...
- OOCSS学习(一)
OOCSS —— 面向对象CSS 搜集一些该搜集的,然后汇总一下. 1.OOCSS 概念篇: 1)什么是面向对象 确定“对象”,并给这个对象创建CSS样式规则. 2)面向对象的CSS理论 OOCSS最 ...
- 如何去组织你的CSS代码
1.Object Oriented CSS (OOCSS) 面向对象的 CSS.OOCSS 的想法首先要明白 CSS 的 “Object” 是个毛线玩意. CSS的样式是需要应用到页面的结构上的.通俗 ...
- 运用 CSS methodologies 去实现模块化
一.什么是 CSS methodologies CSS methodologies,可以理解成 设计模式,也可以理解成 css 规范,市面使用情况如下图: 上图来源:https://2019.stat ...
- 面向对象CSS (OOCSS)
新版 OOCSS 请关注 http://www.oocss.cc/ 时下流行面向对象,那么有没有可能把样式表也面向对象一下呢,将现在的CSS(Cascading Style Sheets层叠样式表)进 ...
随机推荐
- 一·PTA实验作业
本周要求挑选3道题目写设计思路,调试过程.设计思路用伪代码描述.题目选做要求: 顺序表选择一题(6-2,6-3,7-1选一题) 单链表选择一题(6-1不能选) 有序表选择一题 一.题目 6-3 jmu ...
- easyui自定义皮肤及缺陷修改
引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...
- Python学习笔记【Nginx】:Nginx使用与完全卸载
安装与启动nginx 第一步:通过指令安装包 sudo apt install nginx sudo apt install nginx 第二步:安装成功后查看相关配置文件 ls /etc/n ...
- Docker for windows : 安装Redis
一.拉取Redis镜像 docker pull hub.c..com/library/redis: 二.创建并运行Redis docker run -d -it --name redis d4f259 ...
- ThinkPHP 数据库操作(二) : 增删改查
基本使用 可以直接使用数据库运行原生SQL操作了,支持 query (查询操作)和 execute (写入操作)方法,并且支持参数绑定. Db::query('select * from think_ ...
- python传入不确定个数参数
Python3自带的一个函数为 zip ,使用方式如下: In: print zip([1, 2],[3, 4]) Out: [(1, 3), (2, 4)] In: print zip([1, 2] ...
- pytorch学习:准备自己的图片数据
图片数据一般有两种情况: 1.所有图片放在一个文件夹内,另外有一个txt文件显示标签. 2.不同类别的图片放在不同的文件夹内,文件夹就是图片的类别. 针对这两种不同的情况,数据集的准备也不相同,第一种 ...
- JVM基础系列第15讲:JDK性能监控命令
查看虚拟机进程:jps 命令 jps 命令可以列出所有的 Java 进程.如果 jps 不加任何参数,可以列出 Java 程序的进程 ID 以及 Main 函数短名称,如下所示. $ jps 6540 ...
- 一段奇葩Javascript代码引发的思考
今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论.缩减后的js代码如下,你是否能准确说明他的输出值呢? fu ...
- 『Two 树的直径求解及其运用』
树的直径 我们先来认识一下树的直径. 树是连通无环图,树上任意两点之间的路径是唯一的.定义树上任意两点\(u, v\)的距离为\(u\)到\(v\)路径上边权的和.树的直径\(MN\)为树上最长路径, ...