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

小李不吃绿皮青椒

2024-06-18 帮助1人

静态登录页面

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

学新通

<!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));
}

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

这篇好文章是转载于：学新通技术网

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

静态登录页面

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗