按钮样式库:buttons.css

  1. /* vue */
  2. [v-cloak]{display: none}
  3.  
  4. /* 滚动条 */
  5. ::-webkit-scrollbar {
  6. width: 6px;
  7. height: 6px;
  8. background-color: transparent;
  9. }
  10. ::-webkit-scrollbar-thumb {
  11. background: linear-gradient(-90deg, rgba(215, 215, 215, 0.95), rgba(225, 228, 228, 0.95));
  12. border-radius: 2px;
  13. }
  14. ::-webkit-scrollbar-track {
  15. background-color: transparent;
  16. }
  17.  
  18. /* 全局 */
  19. /**
  20. * -webkit-overflow-scrolling: touch; //有回弹效果
  21. * -webkit-overflow-scrolling: auto; //滑到哪停到哪
  22. **/
  23. *{padding:;margin:;font-style: normal;outline: none;box-sizing: border-box;-webkit-overflow-scrolling: touch;-webkit-tap-highlight-color:transparent;}
  24. ul,ol{list-style: none;}
  25. a{text-decoration: none;}
  26. table{border-collapse: collapse;}
  27. html,body{position: relative;}
  28.  
  29. /* 定位 */
  30. .por{position: relative;}
  31. .poa{position: absolute;}
  32. .pof{position: fixed;}
  33. .left{left:;}
  34. .top{top:;}
  35. .right{right:;}
  36. .bottom{bottom:;}
  37. .left_50{left: 50%;}
  38. .top_50{top: 50%;}
  39. .right_50{right: 50%;}
  40. .bottom_50{bottom: 50%;}
  41. .transform_center{transform: translate(-50%,-50%);}
  42. .transform_X{transform: translateX(-50%);}
  43. .transform_Y{transform: translateY(-50%);}
  44. .z-1{z-index: -1;}
  45. .z0{z-index:;}
  46. .z1{z-index:;}
  47. .z2{z-index:;}
  48. .z3{z-index:;}
  49. .z4{z-index:;}
  50. .z5{z-index:;}
  51. .z6{z-index:;}
  52. .z9999{z-index:;}
  53. .z99999{z-index:;}
  54.  
  55. /* 浮动 */
  56. .L{float: left;}
  57. .R{float: right;}
  58. .clear::before,
  59. .clear::after{content: '';clear: both;display: block;}
  60.  
  61. /* 块级、文本元素 */
  62. .inblock{display: inline-block;}
  63. .grid{display: grid;}
  64. .block{display: block;}
  65. .inline{display: inline;}
  66. .webkitbox{display: -webkit-box;}
  67.  
  68. /* 图片填充 */
  69. .of_cover{object-fit: cover;}
  70. .of_contain{object-fit: contain;}
  71.  
  72. /* 背景图片填充 */
  73. .bgs_cover{background-size: cover;}
  74. .bgp_center{background-position: center;}
  75.  
  76. /* 文本 */
  77. .txt_normal{font-weight:;font-style: normal;}
  78. .pointer{cursor: pointer;}
  79. .txt_left{text-align: left;}
  80. .txt_center{text-align: center;}
  81. .txt_nowrap{white-space: nowrap;}
  82. .txt_ellipsis{text-overflow: ellipsis;}
  83. .txt_justify{text-align: justify;}
  84. .b{font-weight: bolder;}
  85. .middle{vertical-align: middle;}
  86.  
  87. /* 溢出 */
  88. .overhidden{overflow: hidden;}
  89. .overauto{overflow: auto;}
  90. .overhidden-x{overflow-x: hidden;overflow-y: auto;}
  91. .overhidden-y{overflow-y: hidden;overflow-x: auto;}
  92.  
  93. /* flex弹性布局 */
  94. .flex{display: flex;}
  95. .jc_start{justify-content: flex-start;}
  96. .jc_center{justify-content: center;}
  97. .jc_between{justify-content: space-between;}
  98. .ai_center{align-items: center;}
  99. .ai_end{align-items: flex-end;}
  100. .flex1{flex:;}
  101.  
  102. /* border */
  103. .border{border:;}
  104. .border_l{border-left:;}
  105. .border_t{border-top:;}
  106. .border_r{border-right:;}
  107. .border_b{border-bottom:;}
  108.  
  109. /* border-radius */
  110. .radius1{border-radius: 1px;}
  111. .radius2{border-radius: 2px;}
  112. .radius3{border-radius: 3px;}
  113. .radius4{border-radius: 4px;}
  114. .radius5{border-radius: 5px;}
  115. .radius6{border-radius: 6px;}
  116. .radius7{border-radius: 7px;}
  117. .radius8{border-radius: 8px;}
  118. .radius9{border-radius: 9px;}
  119. .radius10{border-radius: 10px;}
  120. .radius_tl{border-top-left-radius:;}
  121. .radius_tr{border-top-right-radius:;}
  122. .radius_br{border-bottom-right-radius:;}
  123. .radius_bl{border-bottom-left-radius:;}
  124.  
  125. /* font-size */
  126. .f8{font-size: 8px;}
  127. .f9{font-size: 9px;}
  128. .f10{font-size: 10px;}
  129. .f11{font-size: 11px;}
  130. .f12{font-size: 12px;}
  131. .f13{font-size: 13px;}
  132. .f14{font-size: 14px;}
  133. .f15{font-size: 15px;}
  134. .f16{font-size: 16px;}
  135. .f17{font-size: 17px;}
  136. .f18{font-size: 18px;}
  137. .f19{font-size: 19px;}
  138. .f20{font-size: 20px;}
  139.  
  140. /* 宽度 */
  141. .w_10{width: 10%;}
  142. .w_20{width: 20%;}
  143. .w_30{width: 30%;}
  144. .w_333{width: 33.3%;}
  145. .w_40{width: 40%;}
  146. .w_50{width: 50%;}
  147. .w_60{width: 60%;}
  148. .w_70{width: 70%;}
  149. .w_80{width: 80%;}
  150. .w_90{width: 90%;}
  151. .w_100{width: 100%;}
  152. .w100{width: 100px;}
  153.  
  154. /* 高度 */
  155. .h_10{height: 10%;}
  156. .h_20{height: 20%;}
  157. .h_30{height: 30%;}
  158. .h_333{height: 33.3%;}
  159. .h_40{height: 40%;}
  160. .h_50{height: 50%;}
  161. .h_60{height: 60%;}
  162. .h_70{height: 70%;}
  163. .h_80{height: 80%;}
  164. .h_90{height: 90%;}
  165. .h_100{height: 100%;}
  166. .h100{height: 100px;}
  167. .lh100{line-height: 100px;}
  168.  
  169. /* color */
  170. .color333{color: #333;}
  171. .color666{color: #666;}
  172. .color999{color: #999;}
  173. .colorccc{color: #ccc;}
  174. .coloreee{color: #eee;}
  175. .colorfff{color: #fff;}
  176.  
  177. /* background-color */
  178. .bgcolor333{background-color: #333;}
  179. .bgcolor666{background-color: #666;}
  180. .bgcolor999{background-color: #999;}
  181. .bgcolorccc{background-color: #ccc;}
  182. .bgcoloreee{background-color: #eee;}
  183. .bgcolorfff{background-color: #fff;}
  184.  
  185. /* opacity */
  186. .opa0{opacity:;}
  187. .opa1{opacity: 0.1;}
  188. .opa2{opacity: 0.2;}
  189. .opa3{opacity: 0.3;}
  190. .opa4{opacity: 0.4;}
  191. .opa5{opacity: 0.5;}
  192. .opa6{opacity: 0.6;}
  193. .opa7{opacity: 0.7;}
  194. .opa8{opacity: 0.8;}
  195. .opa9{opacity: 0.9;}
  196.  
  197. /* padding */
  198. .pad10{padding: 10px;}
  199. .pad15{padding: 15px;}
  200. .pad20{padding: 20px;}
  201. .pad24{padding: 24px;}
  202. .pad30{padding: 30px;}
  203. .pad{padding:;}
  204. .pad_l{padding-left:;}
  205. .pad_t{padding-top:;}
  206. .pad_r{padding-right:;}
  207. .pad_b{padding-bottom:;}
  208.  
  209. /* margin */
  210. .mar_auto{margin: 0 auto;}
  211. .mar10{margin: 10px;}
  212. .mar15{margin: 15px;}
  213. .mar20{margin: 20px;}
  214. .mar24{margin: 24px;}
  215. .mar30{margin: 30px;}
  216. .mar{margin:;}
  217. .mar_l{margin-left:;}
  218. .mar_t{margin-top:;}
  219. .mar_r{margin-right:;}
  220. .mar_b{margin-bottom:;}
  221.  
  222. /* 解决ios-button圆角问题 */
  223. .ios_btn{-webkit-appearance : none ;}

OOCSS(面向对象的CSS)总结的更多相关文章

  1. 面向对象的 CSS (OOCSS)

    原文链接:来自smashing magazine 译文 你是否听说过一个词语叫“内容就是王道”?作为一个 Web 开发者,我们的工作与内容创作有着频繁的联系.这是一条经常被引用,并且正确地解释了什么因 ...

  2. 面向对象的css less 和sass

    Css 初始化   reset.css      或者  normalise .   Near.css兼容IE6以及现代浏览器. Oocss  也就是面向对象的css         面向对象是将cs ...

  3. 面向对象的CSS

    原文 简书原文:https://www.jianshu.com/p/cb5e9f56ddcc 大纲 1.面向对象的CSS(OOCSS)概念 2.面向对象的CSS的作用 3.面向对象的CSS的注意事项 ...

  4. CSS在工程中改变之面向对象的 CSS

    oocss的概念 众多开发者忽视了css的表现(认为它) oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例. oocss的作用 1.加强代码 ...

  5. CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)

    一.OO  CSS 的概念解读 (一)众多开发者忽视了CSS的表现,认为其太过简单,是一种机械的工作,而把更多关注在JS的性能或者其他方面. (二)OO CSS 将页面可重用元素抽象成一个类,用cla ...

  6. OOCSS学习(一)

    OOCSS —— 面向对象CSS 搜集一些该搜集的,然后汇总一下. 1.OOCSS 概念篇: 1)什么是面向对象 确定“对象”,并给这个对象创建CSS样式规则. 2)面向对象的CSS理论 OOCSS最 ...

  7. 如何去组织你的CSS代码

    1.Object Oriented CSS (OOCSS) 面向对象的 CSS.OOCSS 的想法首先要明白 CSS 的 “Object” 是个毛线玩意. CSS的样式是需要应用到页面的结构上的.通俗 ...

  8. 运用 CSS methodologies 去实现模块化

    一.什么是 CSS methodologies CSS methodologies,可以理解成 设计模式,也可以理解成 css 规范,市面使用情况如下图: 上图来源:https://2019.stat ...

  9. 面向对象CSS (OOCSS)

    新版 OOCSS 请关注 http://www.oocss.cc/ 时下流行面向对象,那么有没有可能把样式表也面向对象一下呢,将现在的CSS(Cascading Style Sheets层叠样式表)进 ...

随机推荐

  1. 一·PTA实验作业

    本周要求挑选3道题目写设计思路,调试过程.设计思路用伪代码描述.题目选做要求: 顺序表选择一题(6-2,6-3,7-1选一题) 单链表选择一题(6-1不能选) 有序表选择一题 一.题目 6-3 jmu ...

  2. easyui自定义皮肤及缺陷修改

    引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...

  3. Python学习笔记【Nginx】:Nginx使用与完全卸载

      安装与启动nginx 第一步:通过指令安装包 sudo apt  install nginx  sudo apt install nginx 第二步:安装成功后查看相关配置文件 ls /etc/n ...

  4. Docker for windows : 安装Redis

    一.拉取Redis镜像 docker pull hub.c..com/library/redis: 二.创建并运行Redis docker run -d -it --name redis d4f259 ...

  5. ThinkPHP 数据库操作(二) : 增删改查

    基本使用 可以直接使用数据库运行原生SQL操作了,支持 query (查询操作)和 execute (写入操作)方法,并且支持参数绑定. Db::query('select * from think_ ...

  6. python传入不确定个数参数

    Python3自带的一个函数为 zip ,使用方式如下: In: print zip([1, 2],[3, 4]) Out: [(1, 3), (2, 4)] In: print zip([1, 2] ...

  7. pytorch学习:准备自己的图片数据

    图片数据一般有两种情况: 1.所有图片放在一个文件夹内,另外有一个txt文件显示标签. 2.不同类别的图片放在不同的文件夹内,文件夹就是图片的类别. 针对这两种不同的情况,数据集的准备也不相同,第一种 ...

  8. JVM基础系列第15讲:JDK性能监控命令

    查看虚拟机进程:jps 命令 jps 命令可以列出所有的 Java 进程.如果 jps 不加任何参数,可以列出 Java 程序的进程 ID 以及 Main 函数短名称,如下所示. $ jps 6540 ...

  9. 一段奇葩Javascript代码引发的思考

    今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论.缩减后的js代码如下,你是否能准确说明他的输出值呢? fu ...

  10. 『Two 树的直径求解及其运用』

    树的直径 我们先来认识一下树的直径. 树是连通无环图,树上任意两点之间的路径是唯一的.定义树上任意两点\(u, v\)的距离为\(u\)到\(v\)路径上边权的和.树的直径\(MN\)为树上最长路径, ...