前面的教程中，已经详细讲解了HTML的基础知识。在本节教程中，将介绍如何使用简单的HTML代码创建一个图书管理系统的前端界面，包括主页面、添加图书信息、显示图书信息列表、删除图书信息、修改图书信息、查询图书信息、登录以及注册的HTML界面。该前端界面没有连接到后端数据库，在实际应用中，你需要将数据存储逻辑连接到后端数据库，实现对图书的管理。
1、图书管理系统前端概述
这个图书管理系统的前端界面主要包括：
-
主页面。
-
用户注册和登录界面。
-
添加图书信息界面。
-
显示图书信息列表界面。
-
删除图书信息界面。
-
修改图书信息界面。
-
查询图书信息界面。
2、创建前端界面文件
首先，我们在任意位置创建一个“book-manager”文件夹，然后进入“book-manager”文件夹创建如下文件：
book-manager/
├── home.html
├── login.html
├── register.html
├── addbook.html
├── deletebook.html
├── searchbook.html
├── show.html
└── updatebook.html
（1）在“book-manager”文件夹内的home.html文件中添加以下代码：
home.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书管理系统主页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变*/
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.main-wrap {
width: 400px;
height: 600px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
.button1{
background: plum;
color: greenyellow;
border: 1px solid dodgerblue;
border-radius: 12px;
padding: 13px 18px;
margin-top: 20px;
outline-style: none;/*去除点击时外部框线*/
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
line-height: 30px;
border: 0;
border-radius: 3px;
margin-top: 20px;
background-image: linear-gradient(to right, #5ee7df, #b490ca);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #aa00ff;
font-weight: bold;
}
.button1:hover{
background: #aa00ff;
color: #ffffff;
}
/* 给最上面的main-title这个标题设置样式 */
.main-title {
font-size: 25px;
text-align: center;
line-height: 25px;
color: #fff;
font-weight: bold;
}
/* tip 区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main-wrap"><br /><br />
<div class="main-title">
欢迎使用图书管理系统
</div><br /><br />
<div>
<a href="show.html" ><button class="button1">浏览图书信息</button></a><br />
<a href="addbook.html" ><button class="button1">添加图书信息</button></a><br />
<a href="updatebook.html"><button class="button1">修改图书信息</button></a><br />
<a href="searchbook.html"><button class="button1">查询图书信息</button></a><br />
<a href="deletebook.html"><button class="button1">删除图书信息</button></tr></a>
</div><br />
<p class="tip">
<a href="login.html">登录</a>
|
<a href="home.html">首页</a>
</p>
</div>
</div>
</body>
</html>
（2）在“book-manager”文件夹内的addbook.html文件中添加以下代码：
addbook.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加图书信息页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.main-wrap {
width: 400px;
height: 600px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
/* 给最上面的main-title这个标题设置样式 */
.main-title {
font-size: 25px;
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
}
.main-title1 {
font-size: 18px;
text-align: left;
line-height: 80px;
color: #fff;
font-weight: bold;
}
/* 输入设置样式 */
.main-form .main-input{
float: right;
display: block; /* input 标签是行内元素 */
width: 68%;
border: 0;
font-size: 16px;
border-bottom: 1px solid #ccc;
padding: 12px 0 4px 10px;
margin-top: 16px;
outline: none; /* 输入框边框去掉 */
background-color: transparent; /* 透明色 */
}
.main-form .main-input::placeholder {
text-transform: uppercase; /* 设置placeholder内容的大小写 */
color: #bdbdbd;
}
/* 给登录提交按钮设置样式 */
.main-form .main-submit {
width: 100%;
line-height: 30px;
border: 0;
border-radius: 3px;
margin-top: 20px;
background-image: linear-gradient(to right, #5ee7df, #b490ca);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #aa00ff;
font-weight: bold;
}
.main-form .main-submit:hover {
color: #ffffff;
}
/* tip区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main-wrap">
<div class="main-title">
添加图书信息
</div>
<div class="main-form">
<form action="" method="POST">
<div class="main-title1">
<label for="number">书 籍 编 号 : </label><input type="text" id="number" name="number" placeholder="请输入书籍编号" class="main-input">
<label for="bookname">书 籍 名 称 : </label><input type="text" id="bookname" name="bookname" placeholder="请输入书籍名称" class="main-input">
<label for="writer">作 者 名 称 : </label><input type="text" id="writer" name="writer" placeholder="请输入作者名称" class="main-input">
<label for="quantity">可借阅数量 : </label><input type="text" id="quantity" name="quantity" placeholder="请输入可借阅数量" class="main-input">
<input type="submit" name="提交" value="提交" class="main-submit"/>
</div>
</form>
</div><br />
<p class="tip">
<a href="login.html">登录</a>
|
<a href="home.html">首页</a>
</p>
</div>
</div>
</body>
</html>
（3）在“book-manager”文件夹内的deletebook.html文件中添加以下代码：
deletebook.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除图书信息页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.main-wrap {
width: 400px;
height: 600px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
/* 给最上面的main-title这个标题设置样式 */
.main-title {
font-size: 25px;
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
}
.main-title1 {
font-size: 18px;
text-align: left;
line-height: 80px;
color: #fff;
font-weight: bold;
}
/* 输入设置样式 */
.main-form .main-input{
float: right;
display: block; /* input 标签是行内元素 */
width: 68%;
border: 0;
font-size: 16px;
border-bottom: 1px solid #ccc;
padding: 12px 0 4px 10px;
margin-top: 16px;
outline: none; /* 输入框边框去掉 */
background-color: transparent; /* 透明色 */
}
.main-form .main-input::placeholder {
text-transform: uppercase; /* 设置placeholder内容的大小写 */
color: #bdbdbd;
}
/* 给登录提交按钮设置样式 */
.main-form .main-submit {
width: 100%;
line-height: 30px;
border: 0;
border-radius: 3px;
margin-top: 20px;
background-image: linear-gradient(to right, #5ee7df, #b490ca);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #aa00ff;
font-weight: bold;
}
.main-form .main-submit:hover {
color: #ffffff;
}
/* tip区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main-wrap">
<div class="main-title">
删除图书信息
</div>
<div class="main-form">
<form action="" method="post">
<div class="main-title1">
<label for="number">书 籍 编 号 : </label><input type="text" id="number" name="number" placeholder="请输入书籍编号" class="main-input">
<label for="bookname">书 籍 名 称 : </label><input type="text" id="bookname" name="bookname" placeholder="请输入书籍名称" class="main-input">
<input type="submit" name="main" value="提交" class="main-submit"/>
</div>
</form>
</div><br />
<p class="tip">
<a href="login.html">登录</a>
|
<a href="home.html">首页</a>
</p>
</div>
</div>
</body>
</html>
（4）在“book-manager”文件夹内的login.html文件中添加以下代码：
login.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.login-wrap {
width: 400px;
height: 600px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
/* 给最上面的login-title这个标题设置样式 */
.login-title {
font-size: 25px;
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
}
/* 输入设置样式 */
.login-form .login-input{
display: block; /* input 标签是行内元素 */
width: 100%;
border: 0;
border-bottom: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin-bottom: 20px;
outline: none; /* 输入框边框去掉 */
background-color: transparent; /* 透明色 */
}
.login-form .login-input::placeholder {
text-transform: uppercase; /* 设置placeholder内容的大小写 */
color: #bdbdbd;
}
/* 给登录提交按钮设置样式 */
.login-form .login-submit {
width: 100%;
line-height: 30px;
border: 0;
border-radius: 3px;
margin-top: 20px;
background-image: linear-gradient(to right, #5ee7df, #b490ca);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #aa00ff;
font-weight: bold;
}
.login-form .login-submit:hover {
color: #ffffff;
}
/* tip区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="login-wrap">
<div class="login-title">
登录图书管理系统
</div>
<form action="" method="post">
<div class="login-form">
<input type="text" name="username" placeholder="用户名" class="login-input">
<input type="password" name="password" placeholder="密码" class="login-input">
<input type="checkbox" id="agree" value="agree">记住密码<br />
<input type="submit" name="login" value="登录" class="login-submit"/>
</div><br />
<p class="tip">
<a href="register.html">注册</a>
|
<a href="home.html">首页</a>
</p>
</form>
</div>
</div>
</body>
</html>
（5）在“book-manager”文件夹内的register.html文件中添加以下代码：
register.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.main-wrap {
width: 400px;
height: 600px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
/* 给最上面的main-title这个标题设置样式 */
.main-title {
font-size: 25px;
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
}
/* 输入设置样式 */
.main-form .main-input{
display: block; /* input 标签是行内元素 */
width: 100%;
border: 0;
border-bottom: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin-bottom: 20px;
outline: none; /* 输入框边框去掉 */
background-color: transparent; /* 透明色 */
}
.main-form .main-input::placeholder {
text-transform: uppercase; /* 设置placeholder内容的大小写 */
color: #bdbdbd;
}
/* 给登录提交按钮设置样式 */
.main-form .main-submit {
width: 100%;
line-height: 30px;
border: 0;
border-radius: 3px;
margin-top: 20px;
background-image: linear-gradient(to right, #5ee7df, #b490ca);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #aa00ff;
font-weight: bold;
}
.main-form .main-submit:hover {
color: #ffffff;
}
/* tip区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main-wrap">
<div class="main-title">
注册
</div>
<form action="" method="post">
<div class="main-form">
<input type="text" name="username" placeholder="用户名" class="main-input">
<input type="password" name="password" placeholder="密码" class="main-input">
<input type="submit" name="main" value="确认注册" class="main-submit"/>
</div><br />
<p class="tip">
<a href="login.html">登录</a>
|
<a href="home.html">首页</a>
</p>
</form>
</div>
</div>
</body>
</html>
（6）在“book-manager”文件夹内的searchbook.html文件中添加以下代码：
searchbook.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查询图书信息页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.main-wrap {
width: 400px;
height: 500px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
/* 给最上面的main-title这个标题设置样式 */
.main-title {
font-size: 25px;
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
}
.main-title1 {
font-size: 18px;
text-align: left;
line-height: 80px;
color: #fff;
font-weight: bold;
}
/* 输入设置样式 */
.main-form .main-input{
float: right;
display: block; /* input 标签是行内元素 */
width: 68%;
border: 0;
font-size: 16px;
border-bottom: 1px solid #ccc;
padding: 12px 0 4px 10px;
margin-top: 16px;
outline: none; /* 输入框边框去掉 */
background-color: transparent; /* 透明色 */
}
.main-form .main-input::placeholder {
text-transform: uppercase; /* 设置placeholder内容的大小写 */
color: #bdbdbd;
}
/* 给登录提交按钮设置样式 */
.main-form .main-submit {
width: 100%;
line-height: 30px;
border: 0;
border-radius: 3px;
margin-top: 20px;
background-image: linear-gradient(to right, #5ee7df, #b490ca);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #aa00ff;
font-weight: bold;
}
.main-form .main-submit:hover {
color: #ffffff;
}
/* tip区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main-wrap">
<div class="main-title">
查询图书信息
</div>
<div class="main-form">
<form action="" method="post">
<div class="main-title1">
<label for="number">书 籍 编 号 : </label><input type="text" id="number" name="number" placeholder="请输入书籍编号" class="main-input">
<input type="submit" name="main" value="提交" class="main-submit"/>
</div>
</form>
</div><br />
<p class="tip">
<a href="login.html">登录</a>
|
<a href="home.html">首页</a>
</p>
</div>
</div>
</body>
</html>
（7）在“book-manager”文件夹内的show.html文件中添加以下代码：
show.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书信息页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.main-wrap {
width: 600px;
height: 600px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
/* 给最上面的main-title这个标题设置样式 */
.main-title {
font-size: 25px;
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
}
/* tip区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
table.reference {
border-collapse: collapse;
width: 100%;
margin-bottom: 4px;
margin-top: 4px;
}
table.reference td {
color: #fff;
line-height: 32px;
min-width: 24px;
border: 1px solid #05328e;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
text-align: center;
}
table.reference th {
color: #fff;
background-color: #3c55d0;
border: 1px solid #05328e;
padding: 3px;
line-height: 32px;
vertical-align: top;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main-wrap">
<div class="main-title">
图书信息
</div>
<table class="reference">
<tbody>
<tr>
<th width="30%">图书编号</th>
<th width="30%">图书名称</th>
<th width="20%">作者</th>
<th width="20%">可借阅数量</th>
</tr>
<tr>
<td>001</td>
<td>图书名称1</td>
<td>作者1</td>
<td>100000</td>
</tr>
<tr>
<td>002</td>
<td>图书名称2</td>
<td>作者2</td>
<td>200000</td>
</tr>
<tr>
<td>003</td>
<td>图书名称3</td>
<td>作者3</td>
<td>300000</td>
</tr>
<tr>
<td>004</td>
<td>图书名称4</td>
<td>作者4</td>
<td>400000</td>
</tr>
<tr>
<td>005</td>
<td>图书名称5</td>
<td>作者5</td>
<td>500000</td>
</tr>
</tbody>
</table><br />
<p class="tip">
<a href="login.html">登录</a>
|
<a href="home.html">首页</a>
</p>
</div>
</div>
</body>
</html>
（8）在“book-manager”文件夹内的updatebook.html文件中添加以下代码：
updatebook.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改图书信息页面</title>
<style>
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: 0.07em; /* 字母间隔大小 */
}
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
/* 这个是主区域 */
.main-wrap {
width: 400px;
height: 700px;
background-color: rgba(170, 170, 255, 0.3);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px; /* 左右留出空余 */
}
/* 给最上面的main-title这个标题设置样式 */
.main-title {
font-size: 25px;
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
}
.main-title1 {
font-size: 18px;
text-align: left;
line-height: 80px;
color: #fff;
font-weight: bold;
}
/* 输入设置样式 */
.main-form .main-input{
float: right;
display: block; /* input 标签是行内元素 */
width: 68%;
border: 0;
font-size: 16px;
border-bottom: 1px solid #ccc;
padding: 12px 0 4px 10px;
margin-top: 16px;
outline: none; /* 输入框边框去掉 */
background-color: transparent; /* 透明色 */
}
.main-form .main-input::placeholder {
text-transform: uppercase; /* 设置placeholder内容的大小写 */
color: #bdbdbd;
}
/* 给登录提交按钮设置样式 */
.main-form .main-submit {
width: 100%;
line-height: 30px;
border: 0;
border-radius: 3px;
margin-top: 20px;
background-image: linear-gradient(to right, #5ee7df, #b490ca);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #aa00ff;
font-weight: bold;
}
.main-form .main-submit:hover {
color: #ffffff;
}
/* tip区域样式 */
.tip {
text-align:center;
color: #aa00ff;
}
.tip a {
text-decoration: none;
color: #aa00ff;
}
.tip a:hover {
text-decoration: none;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main-wrap">
<div class="main-title">
修改图书信息
</div>
<div class="main-form">
<form action="" method="post">
<div class="main-title1">
<label for="number0">原 有 编 号 : </label><input type="text" name="number0" placeholder="请输入原有书籍编号" class="main-input">
<label for="number">书 籍 编 号 : </label><input type="text" id="number" name="number" placeholder="请输入新的书籍编号" class="main-input">
<label for="bookname">书 籍 名 称 : </label><input type="text" id="bookname" name="bookname" placeholder="请输入新的书籍名称" class="main-input">
<label for="writer">作 者 名 称 : </label><input type="text" id="writer" name="writer" placeholder="请输入新的作者名称" class="main-input">
<label for="quantity">可借阅数量 : </label><input type="text" id="quantity" name="quantity" placeholder="请输入新的可借阅数量" class="main-input">
<input type="submit" name="main" value="提交" class="main-submit"/>
</div>
</form>
</div><br />
<p class="tip">
<a href="login.html">登录</a>
|
<a href="home.html">首页</a>
</p>
</div>
</div>
</body>
</html>
最后，我们通过浏览器运行以上HTML文件。鼠标右键点击home.html文件后，选择打开方式为“Microsoft Edge”或者其它任意浏览器。效果如下图所示：
