亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

layui登錄頁面

Original 2019-03-21 16:27:14 549
abstract：基本思路：    首先要引入layui的核心樣式文件和基礎核心庫兩個部分。之后借助layui工具在設計的網(wǎng)頁中依次加入后臺管理系統(tǒng)以及通過表單欄添加的用戶名、密碼、以及登錄和驗證碼部分，最后完成相關(guān)布局。全部代碼：<!DOCTYPE html> <html> <head> <title>登錄<

基本思路：

    首先要引入layui的核心樣式文件和基礎核心庫兩個部分。之后借助layui工具在設計的網(wǎng)頁中依次加入后臺管理系統(tǒng)以及通過表單欄添加的用戶名、密碼、以及登錄和驗證碼部分，最后完成相關(guān)布局。

全部代碼：

<!DOCTYPE html>
<html>
<head>
	<title>登錄</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>
</head>
<body style="background:#1E9FFF">
	<div style="width: 500px;margin:270px auto 0px; ">
		<div style="background: #fff; border-radius: 4px;box-shadow: 5px 5px 20px #4444;padding: 20px;">
			<form class="layui-form">
				 <div class="layui-form-item" style="color: gray" >
				 	<h2>后臺管理系統(tǒng)</h2>
				 </div>
				 <hr>
				 <div class="layui-form-item">
					  <label class="layui-form-label">用戶名</label>
					  <div class="layui-input-block">
					      <input type="text"  placeholder="請輸入用戶名" class="layui-input">
					  </div>
				</div>
				 <div class="layui-form-item">
					  <label class="layui-form-label">密碼</label>
					  <div class="layui-input-block">
					      <input type="password"  placeholder="請輸入密碼" class="layui-input">
					  </div>
				</div>
				 <div class="layui-form-item">
					  <label class="layui-form-label">驗證碼</label>
					  <div class="layui-input-inline">
					      <input type="text" class="layui-input">
					  </div>
					  <img src="../yz.png">
				</div>
				<div class="layui-form-item">
				    <div class="layui-input-block">
				      <button class="layui-btn" lay-submit lay-filter="formDemo">登錄</button>
				    </div>
				</div>
			</form>
		</div>
	</div>
	
</body>
</html>

小結(jié):

    layui，是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式。外在很簡單但是其中設計的部分樣式很精美，體積輕盈，組件也十分豐富，非常適合界面的快速開發(fā)。在編寫前端程序的時候可能會在一些地方需要樣式精美的設計，而layui所提供的部分可以有效解決，可以在自身編寫的同時借鑒layui進行編寫，從而使網(wǎng)頁觀看和使用起來更為方便且美觀。


Correcting teacher：天蓬老師Correction time：2019-03-22 09:02:13
Teacher's summary：layUI是近年來在國內(nèi)比較流行的前端框架, 但是有越來越商業(yè)化的趨勢, 建議多了解幾個, 以備用

Release Notes

Popular Entries