官网：http://www.jeasyui.com/
中文官网：https://www.jeasyui.net/
学习参考：http://www.92ui.net/

仅个人适用：

移动端：vant比较好
pc端：习惯用element
还有些不错的：
pearAdmin、layui、eleAdmin也不错。

能看懂的就收藏吧！~

传送门：

https://segmentfault.com/a/1190000038570822

1.背景颜色图片平铺

background-color   背景颜色
background-image   背景图片地址
background-repeat  是否平铺 默认是平铺
background-position 背景位置  (模式是左上角 0 0) 方位没有顺序
    1.（length 长度 ）写精确单位 或者百分比 第一个值是x坐标 第二个一定是y
    2.（position： top|center | bottom | left | right  方位坐标）
      如果方位名词只写一个  另外一个默认为center
    3.混搭也ok
background-attachment 设置背景图是否固定 默认是scroll, fixed是固定

合写： background： 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: #000 url(image/timg.jpg) no-repeat center -25px fixed;

2.背景缩放

background-size 100px;  等比例缩放  尽量只改一个值 否则图片会是真扭曲也可以写百分比
常用的两个参数：
cover :会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出自动隐藏
contain:图片等比例缩放，如果图片的宽度或者高度有一个和盒子一样大了就不在缩放，不会有缺失的部分，保证了图片的完整性。

多背景图片设置

    width: 800px;    
    height: 500px;    
    background: url(image/harry.jpg) no-repeat left top,
    url(image/denglun.jpg) no-repeat right bottom purple;

以逗号分隔可以设置多背景，课用于自适应布局，注意事项：
1. 一个元素可以设置多重背景图片
2. 每组属性间使用逗号分隔
3. 如果设置了多重背景之间存在交集，前面的图片会覆盖在后面图片之上
4. 为了避免背景色将图片覆盖，背景色通常定义在最后一组上

3.背景缩放

凹凸文字效果,shadow实现
div:first-child {
            text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
}
div:last-child {
    text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}

文本修饰
text-decoration: 
    none 默认 定义标准的文本 取消文本装饰
    underline 定义文本下的一条线
    overline 定义文本上的一条线
    line-through 定义穿过文本下的一条线

设置文字水平居中小tip
设置文字的行高等于盒子的高度
line-height: 50px;

本文转自：https://www.cnblogs.com/guniang/p/11904393.html

废话不多说，传送门：

http://code.ciaoca.com/

常错的地方在此留痕

    layui.use(['form', 'layer','element','upload'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var upload = layui.upload;

    //选完文件后不自动上传
    upload.render({
        elem: '#student-upload-change',
        url: '你的后台api接口',
        accept: 'file', //普通文件
        exts: 'xls|xlsx', //只允许上传excel文件
        auto: false, //是否自动上传
        field: 'student-upload-change', //重点：后台验证的表单名称
        //multiple: true,
        bindAction: '#student-upload-change-action',
        done: function(res){
            if (200 === res.code) {
                layer.msg(res.msg, {icon: 1});
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        },
        error: function () {
            //请求异常回调
        }
    });

上代码：

HTML代码：

<div id="slideTest1" class="demo-slider"></div>
<div id="slideTest2" class="demo-slider"></div>

JS代码：

$(".demo-slider").each(function(index,element){

        console.log(index,element);
        slider.render({
            elem: this, //指定元素  表示当前的元素
            change: function(value){
                console.log(value); //得到结尾值
                console.log(this);
                //do something
                document.getElementById("wslideTest"+index).value = value;

            },
            input: true //输入框
        });
    })

只怪自个太菜了，前端为0呢。

方法一：

<input type='number' autocomplete="off" min="1.0" max="10.0" step="0.5" onkeyup="value=value.replace(/^[\da-z\-\*]+$/i,'')" />

方法二：

<input type="number" class="numbox" oninput="if(value>30)value=30;if(value.length>2)value=value.slice(0,2);if(value<10)value=10" />

style跟上：

<style>
    p{line-height: 30px}
    input[type=number] {
        height: 42px;
        width: 205px;
        font-size:36px;
        background: url("/static/home/images/number_bg.png") no-repeat right center;
    }
</style>

传送门：

https://www.jeasyui.net/