由于作天室友过生日，忙于吃饭而导致博客忘记写了，所以今天补充一份昨天晚上做的html网页

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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*/
             background:yellow;/*验证div的位置*/
            margin:0 auto;/*设置上右下左,居中显示*/
         }
         .main h1{
             font-family:"楷体";/*设置字体*/
             font-size:70px;/*设置字体大小*/
             font-weight:2px;/*调整字体粗细*/
             border-radius:30px;/*H5设置圆角边框*/
             background: pink;
        }
        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:#ccc;
        }
         form button{
             background-color:#ccc;
             border-radius:10px;
             border:0;
             height:30px;
             width:50px;
             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="userid" placeholder="请输入账号"/>  <br>
             <input type="password" name="pw" placeholder="请输入密码"><br>
            <button type="submit">登&nbsp;&nbsp;录</button>
            <button type="reset">注&nbsp;&nbsp;册</button>
         </form>
     </div>
 </div>    
</body>
</html>

这是一个利用div+css制作的简单登陆网页，能够实现，鼠标移到姓名和密码上面可以使得显示遮盖层，如下图

 

 

其中运用到了新学的button和hover字节等等。