如何使用html写一个简单的登录页面

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Mar

迷忙的岁月

12852人浏览 · 2021-02-22 09:39:20

迷忙的岁月 · 2021-02-22 09:39:20 发布

使用html写一个简单的登录界面

一、代码如下所示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            
            .container{
                width: 480px;
                height: auto;
                border:1px black solid;
                margin:100px auto;
                text-align: center;
                border-radius: 10px;
                background-color:rgb(193, 206, 219);
            }
            
            .word{
                margin-top:20px;
                color:white;
            }
           
            .input input{
                display: block;
                margin:20px auto;
                width: 240px;
                height: 30px;
                border: none;
                border-bottom: 2px white solid;
                background-color: transparent;
                color:white;
                font-size: 17px;
                padding: 0 10px;
            }
           
            .btn button{
                margin-top: 20px;
            width: 90px;
            height: 40px;
            color: white;
            border: 0;
            border-radius: 10px;
            font-size: 17px;
            font-weight: bold;
            background-color: transparent;
            margin-bottom: 20px;
            }
            
            .btn button:hover{
                background-image: linear-gradient(19deg,#21D4FD 0%,#2135FF 100%);
            }
            #登录{
                margin-right: 15px;
            }
            #注册{
                margin-left: 15px;
            }
            .input{
                position: relative;
            }

            .input span{
                position: absolute;
                left: 40px;
                color: white;
                font-size: 20px;
            }
            .用户名{
                top: 2000px;
            }
            
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="word">
            <h1>中药房调剂系统</h1>
            </div>
            <div class="input">
                <span>用户名：</span> 
                <input type="text" placeholder="请输入用户名" id="user"/>
                <span>密 码：</span>
                <input type="password" placeholder="请输入密码" id="psd"/>
            </div>
            <div class="btn">  
            <button id="登录">登录</button> 
            <button id="注册">注册</button> 
        </div>
        </div>
    </body>
</html>