纯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年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
随机推荐
- 快速上手日期插件laydate
1.laydate 这款插件有独立版的,也有作为layui模块的,两种使用方式差不多,就引入有区别而已 <!--这是作为模块使用--><!DOCTYPE html> <h ...
- 安装ubuntu server时候的多网卡问题
安装的时候看到多个网卡,eth0,eth1,到系统中后只看见eth0 1.输入 ifconfig -a,这个时候如果能够看到多网卡,则在/etc/network/.interfaces中配置一下网卡就 ...
- JavaScript DOM编程艺术 笔记(一)
探测浏览器品牌版本代码-----浏览器嗅探 代码 JavaScript==ECMAScript java几乎可以部署在任何环境,js只应用于web浏览器 API是一组得到各方面共同认同的基本约定(元素 ...
- UICollectionView 自定义横向排版
.h #import <UIKit/UIKit.h> @interface JHCollectionViewFlowLayout : UICollectionViewFlowLayout ...
- 大数据-hadoop HA集群搭建
一.安装hadoop.HA及配置journalnode 实现namenode HA 实现resourcemanager HA namenode节点之间通过journalnode同步元数据 首先下载需要 ...
- BZOJ - 3263 三维偏序
题意:定义元素为有序组(a,b,c),若存在x组(a_i,b_i,c_i)分别小于等于(a,b,c),则该元素的等级为x,求[0,n-1]等级的个数 cdq分治练手题,对a简单排序并去重,对b进行分治 ...
- 溶解shader
玩神界原罪2,感觉人物被建筑遮挡时,建筑的“溶解”效果很有意思,想实现一下.然后发现连溶解都没实现过,emmmmm....先来把溶解实现了~ 原理就是根据一张噪声图的值是否大于某个阈值,来判断是否丢弃 ...
- MySQL初始化与用户配置
数据库初始化 默认情况下,数据已经初始化好,数据可参见默认配置文件/etc/my.cnf 在其他位置重新初始化MySQL数据库: basedir是mysql的安装根目录,ldata是数据初始化的目录 ...
- Netty构建Http服务器
Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性.换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络 ...
- jquery metadata 详解
1.0的版本是这样的$.meta 2.0的版本是这样的$.metadata 很多插件的编写都用到了这个插件,个人感觉这个东西应该是jquery官方的.推荐使用2.0的版本, 因为现在官方上就是2.0的 ...