这就是一个前端的html文件，用到了部分Javascript的内容，以及超链接的跳转

<!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>人口信息调查系统</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>

原文地址：http://www.cnblogs.com/copyjames/p/16848817.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性