这就是一个前端的html文件，用到了部分Javascript的内容，以及超链接的跳转
<!DOCTYPE html>标签：body,color,50%,系统,height,background,人口普查,Copy,border From： https://www.cnblogs.com/copyjames/p/16848817.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人口信息调查系统</title>
</head>
<style type="text/css">
/* 清除默认样式 同时给所有元素设置样式 */
* {
margin: 0;
padding: 0;
font-family: "Open Sans Light";
letter-spacing: .07em;
/* 字母间隔大小 */
}
/* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置
这里得注意 body 和 html 的区别
1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html
2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口
*/
html {
height: 100%;
}
body {
height: 100%;
}
/* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */
.wrap {
height: 100%;
background-image: linear-gradient(to right, #f3fafa, #f7f3fa);
}
/* 这个是登录区域 */
.chuze-wrap {
width: 400px;
height: 600px;
background-color: rgb(232, 232, 238);
/* 居中开始 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中结束 */
border-radius: 10px;
padding: 0 50px;
/* 左右留出空余 */
}
.button6 {
background: rgb(10, 10, 10);
color: rgb(250, 252, 247);
border: 1px solid rgb(246, 248, 250);
transition-duration: 1s;
/*过渡时间*/
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, #808181, #959496);
font-size: 16px;
text-align: center;
cursor: pointer;
color: #f5f0f8;
font-weight: bold;
}
.button6:hover {
background: #f6f5f7;
color: #f7f5f8;
transition-duration: 1s;
}
</style>
<body>
<div class="wrap">
<div class="chuze-wrap">
<class class="chuze-title">
<br>
<div>
<br>
<br>
<a href="Add.jsp"><button class="button6">人口信息登记</button></a><br>
<a href="lookone.jsp"><button class="button6">修改人口信息</button></a><br>
<a href="looktwo.jsp"><button class="button6">删除人口信息</button></a><br>
<a href="lookbycondition.jsp"><button class="button6">查询人口信息</button></tr></a>
<a href="/people/selectAllServlet"><button class="button6">人口信息浏览</button></a><br>
</div>
</class>
</div>
</div>
</body>
</html>