• 纯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

  • 相关阅读:
    前端工程师入门的阶段
    学习能力与思考能力
    翻译 前端面试题目
    css规范
    html规范
    javascript中apply、call和bind的区别
    Javascript高级程序设计学习笔记一
    css学习笔记四
    [LC] 23. Merge k Sorted Lists
    [LC] 234. Palindrome Linked List
  • 原文地址:https://www.cnblogs.com/sanjuantianshu/p/9661050.html
Copyright © 2020-2023  润新知