超简单登录界面-项目实战_简单登录项目项目-CSDN博客

本文链接：https://blog.csdn.net/weixin_44465012/article/details/117260991

管理系统页面实现（登录界面）

提示：静态界面，后面会结合后台进行交互；

图片展示：

代码如下·：

<!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> 
        body{
           background-color:dimgray;
        }
        .login{
            width: 500px;
            height: 340px;
            border: 5px groove rgb(10, 10, 10);
            background-color: rgb(255, 251, 253);
            margin: 100px auto;
        }
        h1{
            text-align: center;
            font-family: initial;
            line-height: 100px;/*行高，定义行间距*/
            margin: 0px;
        }
        div{
            text-align: center;
        }
        #span{
            text-align: right;
            margin: 200px;
        }
        #username,#password{
            width: 300px;
            height: 40px;
            font-family: initial;
            /*display: block;css中的display是设置元素显示的方式,block是一块状元素的方式显示*/
            margin: 10px;
            border: none;
            /*border-bottom: 1px solid;border-bottom表示对边框的底部进行设置;solid这表示边框底部的样式*/
            background-color: rgb(241, 238, 238);
            /* 清除元素获取焦点后出现的轮廓线 */
           
        }
        #rememberlg,#rememberpw{
            height: 10px;
            vertical-align:bottom;/*基线对齐*/
        }
        #btn{
            background-color: dimgray;
            font-size: 20px;
            color: white;
            letter-spacing: 20px;/*增加字间距*/
            text-indent: 20px;
            margin:20px;
        }
        #rst{
            background-color: dimgray;
            font-size: 20px;
            color: white;
            letter-spacing: 20px;
            text-indent: 20px;/*当给按钮里面的文字添加letter-spacing时,按钮文字就不居中了*/
            /*解决方法：，设置text-indent值，大小等于letter-spacing；text-indent属性规定文本块中首行文本缩进；*/
            margin:20px;

        }
        .registLink{
            text-decoration: none;/*超链接去除下划线*/
            color: rgb(168, 164, 164);
            text-align: end;
            margin-left: 10px;
        }
        .forgetLink{
            text-align: right;
            margin-left: 10px;
            text-decoration: none;
            color: black;
        }
</style>
<body>
    <section class="login">
       <h1> 药品销售跟踪管理系统</h1>
       <div>
           <span>用户名<input type="text" id="username"  placeholder="手机号/邮箱/用户名" size="20" maxlength="15"></span>
        </div>
        <div>
       <span>密&nbsp&nbsp码 <input type="password" id="password"  placeholder="密码" size="20" maxlength="15"></span>
       </div>
       <!--input标签的属性
    value：定义input框的初始值，常用于举例说明该文本框输入的内容。
    readonly：规定了input只读状态，不可以进行修改，但能作为表单的元素进行提交。
    disabled：禁用input框，不可用、不可点击、不能进行表单提交。
    size：输入框的长度，值越大输入框越长
    maxlength：输入框输入内容的最长长度，常用于限制输入框的输入长度，超过长度的字符将无法输入
    placeholder：用于提示输入框的内容，当光标在输入框的时，placeholder属性的提示内容会消失；
    https://jingyan.baidu.com/article/066074d6f45cd7c3c21cb003.html

    type：输入框的类型（值不同,input的样式或作用都会发生不同的改变）。：
            text：文本输入框。
            password:密码输入框，输入的内容将会被掩码。
            button:普通按钮。
            submit:可自提交表单内的内容。
-->
    <div class="rem-box">
        <input type="checkbox" id="rememberlg">
        <label for="rememberlg">自动登录</label>
        <input type="checkbox" id="rememberpw">
        <label for="rememberpw">记住密码</label>
        <a class="forgetLink" href="http://www.baidu.com" target="_blank">忘记密码</a>
    </div>
    <div>
    <input type="submit" id="btn" value="登录">
    <input type="button" id="rst" value="重置" >
    </div>
    <a class="registLink" href="http://www.baidu.com" target="_blank">注册账户</a>
</section>
 

</body>
</html>