information management system

1. Book Information Management System

2. Student Information Management System

3. Course information management system

4. Archives information management system

5. Score information management system

Many computer science students who are about to graduate do not know how to make a user login interface. After completing a simple page, they feel that it is too low and plain text is not beautiful. Now I will teach you a method. The login interface is both beautiful and simple,
as long as it is simple information management. Front-end interface design that can be used by the system

User login home page interface

insert image description here
Of course, if you log in for the first time, you can log in after registering

User registration interface

insert image description here
A very simple login registration page is completed.
The following is the program code:

<!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>

All codes and others

print(q:917267119)

Front-end interface design of information management system project