博客列表 >用绝对定位制作登录页

用绝对定位制作登录页

PHPer博客
PHPer博客原创
2019年05月05日 22:28:37554浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用绝对定位制作登录页</title>
    <style>

        div{
            width: 300px;
            height: 150px;
            background-color: pink;

            position: absolute;

            left:50%;
            top: 50%;

            margin-top:-150px ;
            margin-left: -150px;
        }
    </style>
</head>
<body>
<h1>用绝对定位制作登录页</h1>
<div>

    <form action="" name="post">
        <p>
            <label for="username">用户:</label>
            <input type="text" id="username" name="username">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password">
        </p>
        <p>
            <button>登录</button>
        </p>


    </form>

</div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议