第五天：用html和css制作登录界面

最新推荐文章于 2024-04-28 15:34:18 发布

老鸟学编程

最新推荐文章于 2024-04-28 15:34:18 发布

阅读量725

点赞数 10

文章标签： html css 前端

本文链接：https://blog.csdn.net/Devanaya/article/details/135569655

版权

已经一周没更新啦，今天续上

最近几天跟着“文轩解码”制作了一个用户登录的界面，视频链接【编程入门】使用 HTML CSS 制作登录页面 (零基础菜鸟必看) | How to create a login form in html css (youtube.com)

这是最终的效果

1.当输入用户名和密码时，有一个边框变蓝、加宽的动画

2.鼠标停驻在提交栏时有背景颜色变绿的动画

以下是我的html代码

<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <form action="" class="login">
            <h1>Login 登录</h1>
            <input type="text" placeholder="Username 用户名"/>
            <input type="password" placeholder="Password 密码"/>
            <input type="submit" value="Submit 提交"/>
        </form>
    </body>
</html>

还有css代码

body {
    font-family: Roboto;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login {
    width: 400px;
    color: aliceblue;
    background-color: black;
    padding: 40px;
    box-shadow: 10px 10px 25px #00000080;
    text-align: center;
}
.login input {
    display: block;
    margin: 20px auto;
    text-align: center;
    background:none;
    outline: none;
    border-radius: 22px;
    color: aliceblue;
    padding: 18px;
    font-size: 15px;
}
.login input[type='submit'] {
    border:2px solid chartreuse;
    cursor: pointer;
}
.login input[type="text"]:focus , .login input[type="password"]:focus{
    border-color: cornflowerblue;
    width: 280px;
    transition: 1s;
}
.login input[type="submit"]:hover {
    background-color: chartreuse;
    transition: 2s;
}

老鸟学编程

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
第五天：用html和css制作登录界面

最近几天跟着“文轩解码”制作了一个用户登录的界面，视频链接。1.当输入用户名和密码时，有一个边框变蓝、加宽的动画。2.鼠标停驻在提交栏时有背景颜色变绿的动画。已经一周没更新啦，今天续上。以下是我的html代码。
复制链接

扫一扫