生活随笔
收集整理的這篇文章主要介紹了
信息管理系统项目前端界面设计
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
信息管理系統
1.圖書信息管理系統
2.學生信息管理系統
3.課程信息管理系統
4.檔案信息管理系統
5.成績信息管理系統
??許多即將畢業的計算機專業學生不知道如何去做用戶登錄界面,做完簡單頁面之后又覺得太low了純文字不夠美觀,現在我教你一個方法,既美觀又簡單的登錄界面
??只要是簡單信息管理系統都可以使用的前端界面設計
用戶登錄首頁界面
當然了,如第一次登錄可注冊之后再登錄
用戶注冊界面
一個非常簡單的登錄注冊頁面就完成了
以下是程序代碼:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>前端簡單登錄界面 由冷小曰制作
</title>
<link rel='stylesheet' href='css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css"></head>
<body><div class="container"><div class="card"></div><div class="card"><h1 class="title">用戶登錄
</h1><form><div class="input-container"><input type="#{type}" id="#{label}" required="required" /><label for="#{label}">用戶名
</label><div class="bar"></div></div><div class="input-container"><input type="#{type}" id="#{label}" required="required" /><label for="#{label}">密碼
</label><div class="bar"></div></div><div class="button-container"><button><span>登錄
</span></button></div></form></div><div class="card alt"><div class="toggle"></div><h1 class="title">用戶注冊
<div class="close"></div></h1><form><div class="input-container"><input type="#{type}" id="#{label}" required="required" /><label for="#{label}">用戶名
</label><div class="bar"></div></div><div class="input-container"><input type="#{type}" id="#{label}" required="required" /><label for="#{label}">密碼
</label><div class="bar"></div></div><div class="input-container"><input type="#{type}" id="#{label}" required="required" /><label for="#{label}">確認密碼
</label><div class="bar"></div></div><div class="button-container"><button><span>提交注冊
</span></button></div></form></div>
</div><script src='js/jquery.min.js'></script>
<script src="js/script.js"></script>
<div style="text-align:center;">
<p>作者:冷小曰
</a></p>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的信息管理系统项目前端界面设计的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。