适合初学者的html+css实现简单登录页面-CSDN博客

本文链接：https://blog.csdn.net/Youmonster/article/details/114604664

1.登录效果

在这里插入图片描述

2.HTML代码实现:login.html

<html>

<head>
    <link rel="stylesheet" href="style.css ">
</head>

<body>
    <form action="action.js" class="login">
        <h1>login登录</h1>
        <input type="text" placeholder="请输入用户名" />
        <input type="password" placeholder="请输入密码" />
        <input type="submit" value="submit提交" />
    </form>

</body>

</html>

3.CSS样式实现 :style.css

body {
    background: linear-gradient(#e66465, #9198e5);
    font-family: Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login {
    background-color: #0b132b;
    width: 400px;
    color: #f8f9fa;
    padding: 40px;
    box-shadow: 10px 10px 25px #000000;
    text-align: center;
}

.login input {
    display: block;
    margin: 20px auto;
    text-align: center;
    background: none;
    padding: 12px;
    font-size: 15px;
    border-radius: 22px;
    outline: none;
    color: #f8f9fa;
}

.login input[type="text"],
.login input[type="password"] {
    border: 2px solid #3498db;
    width: 220px;
}

.login input[type="submit"] {
    width：150px;
    border: 2px solid #2ecc71;
    cursor: pointer;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #2ecc71;
    width: 250px;
    translate: 0.5s;
}

.login input[type="submit"]:hover {
    background-color: #2ecc71;
    translate: 0.5s;
}