HTML+CSS的一个静态登录页面的实现

小李不吃绿皮青椒

已于 2022-03-30 22:32:47 修改

阅读量1.2k

点赞数 2

分类专栏：网页设计加实操文章标签： html5

于 2022-03-30 22:30:08 首次发布

本文链接：https://blog.csdn.net/qq_45841233/article/details/123859183

版权

网页设计加实操专栏收录该内容

7 篇文章 0 订阅

订阅专栏

静态登录页面

只有页面，后端部分等一段时间学了再加哎，冲冲冲

<!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>Login In</title>
    <link rel="stylesheet" href="../iconfont/图标/iconfont.css">
    <link rel="stylesheet" href="login.css">
</head>
<body>
    

<!--登录界面开始-->
<div class="box">
    <div class="input-big-box">
        <h1>login</h1>
        <div class="input-box">
            <i class="iconfont">&#xe65d;</i>

            <input type="text" placeholder="UserName">
        </div>
        <div class="input-box">
            <i class="iconfont">&#xe658;</i>

            <input type="text" placeholder="password">
        </div>
        <button>Sign In</button>
    </div>
</div>
<!--登录界面结束-->


</body>
</html>

css：

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("../img/忍者.jpg");
}

.input-big-box{
    text-align: center;
    position: relative;
    top: 250px;
    left: 600px;
    width: 400px;
    height: 250px;
    border-radius: 43px;
    border: 5px solid sienna;
    background-color: #00000068;
}

.input-big-box h1{
    color: #ffffff;
    padding-top: 25px;
}

.iconfont{
    color: #ffffff;
    size: 15px;
}

.input-box input{
    border: none;
    background: none;
    outline: none;
    border-bottom: 2px solid #ffffff;
    padding: 15px;
    color: #ffffff;
}

.input-big-box button{
    width: 90px;
    height: 30px;
    border-radius: 13px;
    border: none;
    position: relative;
    top: 24px;
    background-image: linear-gradient(to bottom right, red, yellow);
}

.input-big-box button:hover{
    background-image: linear-gradient(to bottom right, rgb(0, 255, 55), rgb(255, 0, 128));
}

自己第一次动手还是感觉难欸，害