人口信息普查系统-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>
巴特西

人口信息普查系统-JavaWeb-三

最新文章

热门文章
