2025-03-18

小鹅通网页
网页展示:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/总体.css">
    <link rel="stylesheet" href="../css/管理员登录.css">
</head>
<body>
    <div class="center">
        <div class="up">管理员登录</div>
        <div class="login">
           <p>
                <!-- <label for="zhanghao"></label> -->
                <input type="text" name="zhanghao" id="zhanghao"
                placeholder="请输入账号" >
                <!-- <span class="iconfot icon-yonghu"></span> -->
            </p>
               <p>
                <input type="text" name="mima" id="mima"
                placeholder="请输入密码">
            </p>
             <div class="down">登录</div>
        </div>
css演示:
body{
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #c8eafa,#5ebddd);
}
.center{
    width: 400px;
    height: 300px;
    background-color: #fff;
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
    box-shadow: #888 10px 10px 10px;
    border-radius: 15px;
}
.up{
    width: 100%;
    height: 70px;
    font-size: 28px;
    font-weight: 25px;
    text-align: center;
    letter-spacing:5px;
    /* background-color: #212020; */
    line-height: 70px;
}
.login{
width: 100%;
height: 230px;
display: flex;
justify-content:space-evenly;
align-items: center;
flex-direction: column;
/* gap: 28px; */
/* background-color: #80cb69; */
}
/* .login p{
width: 200px;
height: 70px;
} */

图片展示:


屏幕截图 2025-03-18 175448.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容