纯css面板插件,自适应,多样式
最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家
先上预览图:
默认样式:

绿色:

黄色:

蓝:

红:

使用方法:
引用MoUi.css
HTML中使用为:
<div class="mo-group mo-group-default mo-group-radius">
<div class="mo-group-title mo-group-title-left mo-group-title-sm">
<span class="fa fa-map-marker"></span> 标题
</div>
<div class="mo-group-body">
...
</div>
</div>
圆角样式
mo-group-radius
面板颜色样式为:
默认:mo-group-default
绿色:mo-group-success
蓝色:mo-group-primary
黄色:mo-group-warning
红色:mo-group-danger
标题浮动:
左浮动:mo-group-title-left
其他后续补充。。。
标题宽度:
考虑到标题的实际长度问题,设置百分比宽度在不同的分辨率中会导致太宽或者太窄的问题,很不好看,所以我给标题设定了几个固定宽度,基本能适用于所有场景了。
mo-group-title-xs 宽度100px
mo-group-title-sm 宽度200px
mo-group-title-md 宽度300px
mo-group-title-lg 宽度500px
源码下载:点击
欢迎转载,请注明出处!http://blog.pishiduo.com/content/35
纯css面板插件,自适应,多样式的更多相关文章
- 纯CSS写正方形自适应宽高,且左侧高与正方形高保持一致
先上图 虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈html:<div class="box"> <div class="le ...
- 纯css实现宽度自适应,高度与宽度成比例
html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...
- 纯css背景图自适应
只需要这样设置即可,只要你的图片足够大的话可以无限缩小,当不在缩小的时候则跟你的实际图片大小有关系
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 演示:纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
随机推荐
- CSS z-index在ie67中不起作用
在chrome浏览器中可以看到这样的效果: 但是在ie67中看到的是: 这是z-index在ie浏览器中的一个兼容性问题: 一般来说z-index越大,层级越高,就会越在顶层显示,但是在ie67浏览器 ...
- WINDOWS SERVER 2012标准版密钥
Windows Server 2012 R2 安装密钥(只适用安装,不支持激活) 标准版 = NB4WH-BBBYV-3MPPC-9RCMV-46XCB MMPXK-NBJDQ-JPM34-WX3FM ...
- 微信小程序 没有找到node_modules目录 ,小程序引入vant框架报错。
如果大家是按照官网的引入方法,是否报错如图 不着急,大家就试试我的方法吧!两步走完美搞定! 第一步: 在小程序顶部点击设置->项目设置,会弹出下面的窗口.大家把使用npm模块勾上对勾. 第二步: ...
- python函数参数类型及其顺序
根据inspect模块官文文档中关于函数参数类型的相关说明,python函数参数共有五种类型,按顺序分别为:POSITIONAL_ONLY.POSITIONAL_OR_KEYWORD.VAR_POSI ...
- (转)C++ main函数中参数argc和argv含义及用法
原博地址:https://blog.csdn.net/dcrmg/article/details/51987413 argc 是 argument count的缩写,表示传入main函数的参数个数: ...
- c# 线程,同步,锁
最近在阅读<c#高级编程> 这本书.记录一下关于锁的使用 大致分为三种方法: 方法1:使用 lock 方法2:使用 Interlocked 方法3:使用 Monitor using Sys ...
- 安卓与windows
windows phone 还是PC啊?windows PC的话,应该就是你现在用的电脑系统吧,PC系统和安卓是不一样的,安卓是移动设备系统,基于的构架也不同,意思就是电脑上装不上安卓,移动设备也装不 ...
- CSAPP阅读笔记-数组分配与访问-来自第三章3.8的笔记-P176-P183
这一节比较简单,仅记录几个比较重要的点: 1.C语言允许对指针进行运算,计算出的值会根据该指针引用的数据类型大小进行伸缩. 例子: 其中,xE是数组的起始地址.注意,指针运算时,若最终结果为指针,则指 ...
- C#常用的引用
1.使用ConfigurationManager需要在.net引用中添加System.Configuration引用 2.使用HttpContext需要在.net引用中添加System.Web引用
- oracle dump的使用心得
使用DS开发的时候,有的时候会遇到一个问题:数据库层面定义的空格与DS自已定义的空格概念不一致,导致生成的数据会有一定的问题. 举例来说: 在数据库里面定义CHAR(20),如果插入的字符不足20的时 ...