zoukankan      html  css  js  c++  java
  • 纯css面板插件,自适应,多样式

    最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家

    先上预览图:

    默认样式:

    QQ截图20180917105235.jpg

    绿色:

    绿.jpg

    黄色:

    黄 .jpg

    蓝:

    蓝.jpg

    红:

    红.jpg

    使用方法:

    引用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

  • 相关阅读:
    asp.net 启动关闭iis
    vue 界面关闭触发事件 ---实例销毁之前调用
    ElmentUI 设置禁止点击遮罩关闭 el-dialog 弹窗
    C#反射
    SQL Server 创建游标(cursor)
    文件解压缩
    文件流操作
    Linq查询
    C#线程 多线程 进程
    匿名类型和反射
  • 原文地址:https://www.cnblogs.com/sanjuantianshu/p/9661050.html
Copyright © 2011-2022 走看看