纯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年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
随机推荐
- java使用freemarker导出复杂的excel表格
正常导出excel表格使用的poi,但是导出复杂的excel有点困难,但是可以使用freemaker模板来导出复杂的excel. 1.都是先生成一个Excel表格的模板,最好是增加一行数据.具体看图里 ...
- 实验三敏捷开发与XP实践《Java开发环境的熟悉》实验报告
一.实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报 ...
- python之类与对象(1)
面向对象编程是最有效的软件编写方法之一.编写类时,定义一群对象都有的通用行为.基于类创建对象时,每个对象都自动具备这种通用行为,然后可以根据需要赋予每个对象的独特的个性. 1. 类与对象的语法规范 关 ...
- python logging模块的使用
logging 专门用于记录日志的模块,相对于print来说,logging 提供了日志信息的分级.格式化.过滤等功能.在程序中定义丰富有条理的log信息,可以方便分析程序的运行状态,在发生问题是可有 ...
- iview tree 之如何获取已勾选的节点
1.记得添加 ref 2.用 this.$refs.tree.getCheckNodes()
- vue html页面打印功能vue-print
vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 使用方式 安装 npm install vue-print-nb --save ...
- decode 和 encode 区别
字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unicode编码(en ...
- mysql故障总结
MYSQL故障排查 https://zhuanlan.zhihu.com/p/27834293
- JS框架设计之加载器所在路径的探知一模块加载系统
1.要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很简单,强加个约定,URL的合成规则是为: ...
- Oracle给Select结果集加锁,Skip Locked(跳过加锁行获得可以加锁的结果集)
1.通过select for update或select for update wait或select for update nowait给数据集加锁 具体实现参考select for update和 ...