[html+js]实现表单页面居中

最新推荐文章于 2023-06-08 18:46:49 发布

djhwork

最新推荐文章于 2023-06-08 18:46:49 发布

阅读量680

点赞数

分类专栏： Html+CSS+JS 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_36017232/article/details/130449027

版权

Html+CSS+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现思路：在表单外层套一层div，设置div的样式

实现效果：

实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .div1{
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .form1{
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            margin: 0 auto;
            border: 1px solid blue ;
            width: 500px;
            padding: 5px;
        }
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="div1">
    <form action="" class="form1">
        <table id="myTable" align="center">
            <tr>
                <th>总体信息</th>
                <th>输入列表</th>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td></td>
                <td>&nbsp&nbsp&nbsp&nbsp&nbsp<input type="submit">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="reset"></td>
            </tr>
        </table>
    </form>
</div>



<script>
    const table = document.getElementById("myTable");
    const rows = table.getElementsByTagName("tr");
    for (let i = 1; i < rows.length; i++) {
        rows[i].addEventListener("mouseover", function() {
            this.style.backgroundColor = "blue";
        });
        rows[i].addEventListener("mouseout", function() {
            this.style.backgroundColor = "";
        });
    }
</script>

</body>
</html>