网页登录界面

张晓霞~

于 2020-12-28 22:20:59 发布

阅读量1.2k

点赞数 5

本文链接：https://blog.csdn.net/qq_48965298/article/details/111876236

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书借阅</title>
    <style>
        html,body{
            height:100%;
            background-size: 100% 100%;/*使背景图片铺满整个页面*/
            overflow:hidden;/*溢出隐藏*/
        }
        .frame{
            width:934px;
            height :420px;
            top: 180px;
            position:relative;
        }
        .frame1{
            background:rgb(227, 244, 248) ;
            position:absolute;
            width:467px;
            height:300px; 
            right:0;
            text-align:center;
            padding:30px 55px;
            box-sizing:border-box;
            border-radius:10px;/*圆角边框*/

        }
        input{
            display: block;/*display：block显示取消自带的边框*/
            width:100%;
            height :45px ;
            border-radius:10px;/*圆角边框*/
            border:1px solid #ccc;
            margin-top: 20px;
            padding: 0 15px;
            outline: none;
            box-sizing:border-box;/*框大小：box-sizing:border-box可以用于解决padding产生的bug*/
        }
        button{
            width: 100px;
            height:45px;
            background:rgb(230, 241, 213);
            margin-top: 20px;
            color: #fff;
            border-radius: 10px;
            outline: none;
            border:none;
        }
    </style>
</head>
<body background="img/1.img">
    <div class='frame'>
        <div class='frame1'>
        <div>欢迎来到图书借阅系统</div>
            <form>
                <input type="text" name='框' id='框' placeholder="请输入账号" required><!--required字段是必填（或必选）的-->
                <input type="password" name='密码' id='密码' placeholder="请输入密码" required>
                <button type="submit">登录</button>
                <button type="reset">重置</button>
            </form>
        </div>
    </div>
    
</body>
</html>

效果如图：
在这里插入图片描述

张晓霞~

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
网页登录界面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书借阅</title> <style> html,body{
复制链接

扫一扫