HTML学习4——登陆界面

index.html
<!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>登陆界面</title>
    <style type = "text/css">
    * {margin:0;padding:0;} /*去掉页面样式*/
    body{color:blue;}
    .content{
        background-color:yellow;

        left:0;
        width:100%;
        height:400px;
        margin-top:0px;
        overflow:hidden; /*隐藏滚动条*/

    }
    .main{
             text-align:center;/*文本居中*/
             max-width:600px;
             height:400px;
             padding:100px 0px;/*上下80px,左右为0*/
             margin:0 auto;/*设置上右下左,居中显示*/
         }
    .main h1{
             font-family:"楷体";/*设置字体*/
             font-size:50px;/*设置字体大小*/
             font-weight:5px;/*调整字体粗细*/
             background-color: pink;
             border-radius:30px;/*H1设置圆角边框*/
             margin:0 auto;/*设置上右下左,居中显示*/
             width:500px;
           
        }
         form{
             padding:20px 0;
         }
         form input{
             border:1px solid white;
             display:block;
             margin:0px auto 10px auto;/*上 右  下 左*/
             padding:10px;
             width:220px;
             border-radius:30px;/*H5设置圆角边框*/
             font-size:18px;
             font-weight:300;
             text-align:center;
         }
         form input:hover{
             background-color:yellow;
        }
         form button{
             font-family:"楷体";
             background-color:whitesmoke;
             font-size: 18px;
             border-radius:10px;
             border:0;
             height:30px;
             width:60px;
             padding:5px 10px;
        }
         form button:hover{
             background-color:red;
         }
        
    </style>
</head>
<body>
    <div class="content">    
        <div class="main">
            <h1>信息学院</h1>
            <form>
                <input type="text" name="useid" placeholder="请输入账号"/>
                <input type="password" name="pw" placeholder="请输入密码">
               <button type="submit">登录</button>
               <button type="submit">注册</button>

            </form>
        </div>
    </div>    
</body>
</html>
运行截图：