使用layui框架完成网站后退布局

Original 2019-05-13 15:59:08 242
abstract:<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewp
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css">
    <script type="text/javascript" src="../static/plugins/layui/layui.js"></script>
    <style>
 .header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;line-height:32px;}
        .header{border-bottom: 2px #009688 solid;}
    </style>
</head>
<body>
<div class="header">
    <span>商品添加</span>
</div>
<form class="layui-form" action="" style="margin-top: 10px;">
    <div class="layui-form-item">
        <label class="layui-form-label">商品类目</label>
        <div class="layui-input-inline">
            <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">美食</option>
                <option value="1">美妆</option>
                <option value="2">日用</option>
                <option value="3">电器</option>
                <option value="4">衣服</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="password" name="password" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="password" name="password" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label">描述</label>
        <div class="layui-input-inline">
            <textarea name="" id="" cols="40" rows="12" class="layui-textarea" style="width: 350px;"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="checkbox" name="like[online]" title="上架">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label"></label>
        <div class="layui-input-inline">
            <button class="layui-btn">保存</button>
        </div>
    </div>



</form>
<script>
 layui.use(['form','upload'], function(){
        var form = layui.form;
 var upload = layui.upload;

 //执行实例
 var uploadInst = upload.render({
            elem: '#test1' //绑定元素
 ,url: '/upload/' //上传接口
 ,done: function(res){
                //上传完毕回调
 }
            ,error: function(){
                //请求异常回调
 }
        });
 });
</script>
</body>
</html>


Correcting teacher:查无此人Correction time:2019-05-14 09:29:47
Teacher's summary:完成的不错。还没学习PHP吗?上传接口,可以练习了。继续加油

Release Notes

Popular Entries