使用HTML+CSS实现一个简单的登陆界面

易繁study

已于 2022-04-04 22:36:40 修改

阅读量899

点赞数 7

分类专栏： HTML 文章标签： html css

于 2022-04-04 22:11:56 首次发布

本文链接：https://blog.csdn.net/m0_65699647/article/details/123961202

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML和CSS创建一个简单的登录界面。代码包括一个基本的HTML结构，定义了输入字段和提交按钮，并通过CSS进行样式设计，实现了背景颜色、布局居中、输入框样式等效果。此外，还包含了一个链接到注册页面的选项。

摘要由CSDN通过智能技术生成

登陆界面截图

HTML代码

<!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">
    <link rel="stylesheet" href="./login.css" type="text/css">
    <title>登陆界面</title>
</head>
<body>
    <div id="login">
        <form action="#" method="POST" id="form">
            <h2 id="login_title">Login</h2>
            <br />
            <input type="text" placeholder="请输入用户名" name="username" id="un" autocomplete="off">
            <br />
            <input type="password" placeholder="请输入密码" name="password" id="pd" autocomplete="off">
            <br />
            <br />

            <input type="submit" name="sub" value="登录" id="sub" autocomplete="off">
            <p id="more-link">
                <a href="#">返回首页</a>
                •
                <a href="#">用户注册</a>   <!-- 点击后跳转注册页面 -->
            </p>
        </form>

    </div>
</body>
</html>

CSS代码

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: rgb(123, 214, 241);
    /* 不想添加背景颜色可以更换为背景图片 */
    /* background: url("图片地址"); */
    opacity: 1.0;
}
#login{
    display: flex;
    width: 300px;
    height: 400px;
    background-color: white;
    /* opacity: 0.8; */
    text-align: center;
    margin:100px auto;
    justify-content: center;
}
#form{
    float: left;
}
#login_title{
    margin-top: 50px;
}

#un{
    width: 200px;
    height: 30px;
    border: none;
    border-bottom: solid 1px black;
    margin-top: 30px;
}
#un:focus{
    outline: none;   /* 去除username的input框点击输入时边框 */
}


#pd{
    width: 200px;
    height: 30px;
    border: none;
    border-bottom: solid 1px black;
    margin-top: 30px;
}
#pd:focus{
    /* border: red;         如果加上border颜色则输入时没有任何边框 */
    outline: none;      /* 去除passwod的input框点击输入时边框 */
}


#sub{
    width: 200px;
    height: 30px;
    margin-top: 30px;
    border: black solid 1px;
    border-radius:10px
}
#more-link{
    color: #467B96;
    margin-top: 20px;
}
#more-link a{
    background: transparent;
    text-decoration: none;
    color: #467B96;
    
}

界面