HTML+CSS实现登陆界面

杏黄的三叶草

已于 2024-07-06 16:19:00 修改

阅读量2.1k

点赞数 11

分类专栏： Web实战文章标签： html css 前端

于 2020-01-28 18:08:28 首次发布

本文链接：https://blog.csdn.net/dwjdj/article/details/104101365

版权

Web实战专栏收录该内容

5 篇文章 6 订阅

订阅专栏

博主分享了一篇关于如何用HTML和CSS制作登录界面的内容，提供了资源下载链接，有兴趣的读者可以留言获取代码和图片素材。

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

如果想要练手的，可以留言，我可以把代码及图片素材发给你

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
    <form action="#" method="post">
        <p>
            <span>账号:</span>
            <!--    判断账号是否合法-->
            <input type="text" name="username" class="num" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$">
        </p>
        <p>
            <span>密码:</span>
            <input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]\w{5,17}$">
        </p>
        <p>
            <input type="button" class="btn01" value="登录">
            <input type="button" class="bnt02" value="注册">
        </p>
    </form>
</div>

</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.num,.pass{
    width: 170px;
    height: 22px;
    border: 1px solid rgba(0,0,0,0.1);
    outline-style: none;
    padding: 2px 2px 2px 22px;
}
form{
    padding-top: 60px;
    width: 422px;
    height: 262px;
    border: 1px solid rgba(0,0,0,.3);
    margin: 150px auto;
    border-radius: 20px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.1);
}
.box{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("./1.jpg") no-repeat;
    background-size: cover;
}
p{
    margin-top: 15px;
    text-align: center;
}
.num{
    background: url("./用户名.png") no-repeat 4px center;
}
.pass{
    background: url("./password.png") no-repeat 4px center;
}
.btn01{
    width: 55px;
    height: 35px;
    border-radius: 3px;
    margin-left: 36px;
    border: 1px solid rgba(0,0,0,.3);
    color: white;
    background:#5cffd8;
}
.bnt02{
    width: 55px;
    height: 35px;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 4px;
    margin-left: 74px;
    color: white;
    background:#5cffd8;
}