最近在做公司的系统后台,用的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. Orleans MultiClient 多个Silo复合客户端

    目录 介绍 使用 简单例子 配置 注入到 DI 容器 添加多个 Client 全局 Orleans 服务配置 介绍 Orleans.MultiClient 是一个 Orleans 复合客户端,只需要简 ...

  2. [原创]PHP 异常错误处理

    目录 错误与异常 异常类 错误类(PHP >= 7) 错误 错误报告级别 错误报告设置 全局异常处理程序 全局错误处理函数 无法捕获的错误类型 范例代码 开发/生产环境处理错误和异常 开发环境 ...

  3. yolov3源码分析keras(二)损失函数计算

    一.前言 损失函数计算主要分析两部分一部分是yolo_head函数的分析另一部分为ignore_mask的生成的分析. 二.重要细节分析 2.1损失函数计算具体代码及部分分析 def yolo_los ...

  4. python高级(四)—— 文本和字节序列(编码问题)

    本文主要内容 字符 字节 结构体和内存视图 字符和字节之间的转换——编解码器 BOM鬼符  标准化Unicode字符串 Unicode文本排序 python高级——目录 文中代码均放在github上: ...

  5. springboot设置日志级别时报错

    配置springboot日志,输出级别为info,运行时报错: Caused by: org.springframework.boot.context.properties.bind.BindExce ...

  6. js高级程序设计 笔记 --- 面向对象的程序设计

    1,理解对象 通过对象字面量的方式,创建一个对象,为它添加属性和方法: var obj = { a: 1, b:2, sayA(){ console.log(this.a)}} 1,属性类型: 数据属 ...

  7. 使用 json_serializable (flutter packages pub run build_runner build) 问题

    命令: flutter packages pub run build_runner build 使用 build_runner 生成 .g.dart 文件 flutter packages pub r ...

  8. Java Web基础——Controller+Service +Dao三层的功能划分

    转自:https://www.cnblogs.com/cielosun/articles/5752272.html 1. Controller/Service/DAO简介: Controller是管理 ...

  9. C语言中malloc函数与free函数

    - malloc函数 全称是memory allocation,中文叫动态内存分配,用于申请一块连续的.指定大小的内存块区域以void*类型返回分配的内存区域地址,当无法知道内存具体位置的时候,想要绑 ...

  10. Zookeeper选举算法原理

    Zookeeper选举算法原理 Leader选举 Leader选举是保证分布式数据一致性的关键所在.当Zookeeper集群中的一台服务器出现以下两种情况之一时,需要进入Leader选举. (1) 服 ...