最近在做公司的系统后台,用的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面板插件,自适应,多样式的更多相关文章

  1. 纯CSS写正方形自适应宽高,且左侧高与正方形高保持一致

    先上图 虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈html:<div class="box">            <div class="le ...

  2. 纯css实现宽度自适应,高度与宽度成比例

    html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...

  3. 纯css背景图自适应

    只需要这样设置即可,只要你的图片足够大的话可以无限缩小,当不在缩小的时候则跟你的实际图片大小有关系

  4. 简单而兼容性好的Web自适应高度布局,纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  5. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  6. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  9. 如何用纯CSS布局两列,一列固定宽度,另一列自适应?

    大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...

随机推荐

  1. [原创] Shell 参数传递 与 默认值

    目录 简介 基本传参 $* 与 $@ 区别 默认参数(变量默认值) if 繁琐方式 - 变量为null = 变量为null时, 同时改变变量值 :- 变量为null 或 空字符串 := 变量为null ...

  2. restful api上传文件(基础)-springboot

    基于restful api格式的文件上传(只是上传到本地): package com.nxz.controller; import com.nxz.entity.FileInfo; import or ...

  3. 基础篇:6.5)形位公差-基本规则 Basic Rules

    本章目的:述说形位公差的基本规则 1.代表规则的修正符号与使用情况: 使用情况举例: 2  有关术语 为了明确线性尺寸公差与形位公差之间关系,对尺寸术语将作进一步论述与定义. //无需强记,但希望现有 ...

  4. ios真机测试问题

    前端页面在ios端真机测试出现的问题 由于苹果对于性能的要求是近乎苛刻,如果没有可点的特性的元素系统默认不会给它响应事件,因此真机测试时容易添加不上绑定事件 解决办法: 1.通过js判断当前是否为苹果 ...

  5. web服务的简单介绍及apache服务的安装

    一,web服务的作用:  是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档.可以放置网站文件,让全世界浏览:   可以放置数据让全世界下载.目前最主流的三个Web服务器是Ap ...

  6. 剑指offer——链表

    #include"stdio.h" #include"stdlib.h" #include"iostream" using namespac ...

  7. oracle12c之一 控制-PDB的磁盘I/O(IOPS,MBPS)资源管理

    在以前的版本中,没有简单的方法来控制单个PDB使用的磁盘I / O量. 因此,某个PDB可能耗尽大量磁盘I / O,并影响同一实例中的其他PDB的性能. Oracle 12c R2可以控制PDB使用的 ...

  8. SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送

    代码全部复制,仅供自己学习用 1.环境搭建 因为在上一篇基于STOMP协议实现的WebSocket里已经有大概介绍过Web的基本情况了,所以在这篇就不多说了,我们直接进入正题吧,在SpringBoot ...

  9. Python学习 day14

    一.生成器函数进阶 1.最后一个yield后的代码 先看示例: def generator(): print(123) yield 'a' print(456) yield 'b' print(789 ...

  10. Oracle 如何修改列的数据类型

    链接:http://www.cnblogs.com/david-zhang-index/archive/2012/04/10/2441015.html 对字段操作 操作方法 更新字段名 alter t ...