人口信息普查系统-JavaWeb-三
今天给大家分享前端主页面的代码，设有五个功能。涉及到增删改查，用到了超链接的跳转。
<!DOCTYPE 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>Document</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="人口登记.jsp"><button class="button6">人口信息登记</button></a><br> <a href="查询人口信息.html"><button class="button6">修改人口信息</button></a><br> <a href="删除人口信息.jsp"><button class="button6">删除人口信息</button></a><br> <a href="查询人口信息.jsp"><button class="button6">查询人口信息</button></tr></a> <a href="/人口普查系统HtmlJsp/servlet?method=chaxun"><button class="button6">人口信息浏览</button></a><br></div> </div> </body> </html>
