网站后台管理布局_PHP中文网手记

摘要：作业：https://www.xh8.shop 上传页面布局。<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet"&

作业：

https://www.xh8.shop

上传页面布局。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css">
	<script type="text/javascript" src="../../static/layui/layui.js"></script>
	<style type="text/css">
		.header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;line-height: 32px;}
		.header{border-bottom: 2px solid #009688;}
    form{margin-top: 10px;}
	</style>
</head>
<body style="padding: 10px">
<div class="header">
	<span>商品添加</span>
</div>
<form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">商品类目</label>
      <div class="layui-input-inline">        
        <select name="city" lay-verify="">
          <option value="">请选择</option>
           <option value="010">北京</option>
            <option value="021">上海</option>
            <option value="0571">杭州</option>
        </select> 
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">商品名称</label>
      <div class="layui-input-inline">
        <input type="text" name="title" class="layui-input">    
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">价格</label>
      <div class="layui-input-inline">
        <input type="text" name="title" 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 class="layui-form-label">描述</label>
      <div class="layui-input-inline" >
        <textarea name="" required lay-verify="required" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline" >
        <input type="checkbox" name="" title="上传">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-inline">
         <button class="layui-btn">保存</button>
      </div>
    </div>
    
</form>

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

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


	</script>
</body>
</html>

layui给网站布局带来了极大的便利，非常贴近原生编码，应该是css，js的库，用户只需要把class设置为layui提供的class就能快速的得到想要的css样式效果，只要正确的引入layui.js，然后复制layui网站的js代码，也能快速的得到动画效果。我觉得layui最重要的是细心，要学会熟读文档，正确的引用layui,就能极大缩短布局时间。

批改老师：韦小宝批改时间：2019-01-11 09:22:34
老师总结：整个后台项目写的很不错但是好像少了登录啊直接就进去了啊 layui的确是可以带来很大的便利但是简单使用是很舒服遇到有写功能需要修改layui本身就很麻烦了

网站后台管理布局

热门词条