????：作業(yè)：https://www.xh8.shop 上傳頁面布局。<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet"&
作業(yè)：
上傳頁面布局。
<!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"></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">狀態(tài)</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;
//執(zhí)行實例
var uploadInst = upload.render({
elem: '#test1' //綁定元素
,url: '/upload/' //上傳接口
,done: function(res){
//上傳完畢回調(diào)
}
,error: function(){
//請求異常回調(diào)
}
});
});
</script>
</body>
</html>layui給網(wǎng)站布局帶來了極大的便利，非常貼近原生編碼，應該是css，js的庫，用戶只需要把class設置為layui提供的class就能快速的得到想要的css樣式效果，只要正確的引入layui.js，然后復制layui網(wǎng)站的js代碼，也能快速的得到動畫效果。我覺得layui最重要的是細心，要學會熟讀文檔，正確的引用layui,就能極大縮短布局時間。
?? ???：韋小寶?? ??：2019-01-11 09:22:34
???? ??：整個后臺項目寫的很不錯 但是好像少了登錄啊 直接就進去了啊 layui的確是可以帶來很大的便利 但是簡單使用是很舒服 遇到有寫功能需要修改layui本身就很麻煩了