网页登录界面


<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>
                <input type="password" name='密码' id='密码' placeholder="请输入密码" required>
                <button type="submit">登录button>
                <button type="reset">重置button>
            form>
        div>
    div>
    
body>
html>

效果如图:
网页登录界面_第1张图片

你可能感兴趣的:(网页登录界面)