用户登录页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <style type="text/css">
    *{
      margin: 0 auto;
      overflow: hidden;
    }
    .first{
      height: auto;
      margin-top: -80px;
    }
    .first a span {
      width: 100%;
      height: 160px;
      vertical-align: center;
      background: #50A3A2;
      color: white;
      border: 1px solid gray;
      margin: 300px 0;
      display: inline-block;
      padding: 100px 0;
      padding-top: 10px;
      border-radius: 8px;
      position: absolute;
    }

    .second {
      text-align: center;
      vertical-align: center;
      font-size: 60px;
      font-family: 微软雅黑;
      line-height: 80px;
      padding-top: 300px;
      padding-bottom: 200px;
    }

    form {
      color: white;
      font-family: 微软雅黑;

    }

    .third {
      font-size: 12px;
      margin: 0px;
      padding: 0px 10px 0 0;
      line-height: 46px;
    }

    .third input:first-child {
      border-radius: 8px;
      border: 2px solid beige;
    }

    .four {
      margin-top: 1px;
      padding-top: 1px;
      border-radius: 8px;
      border: 2px solid beige;
    }

    .five {
      background: white;
      padding: 2px 15px;
      color: gray;
      border-radius: 8px;
      width: 168px;
      height: 23px;
      font-size: 12px;
      vertical-align: center;
      text-align: center;
      line-height: 18px;
      margin-left: 36px;
      border: 2px solid beige;

    }

    .five:hover {
      background: lightgray;
    }

  </style>
</head>
<body>
<div class="first">
  <a href="#">
    <span class="second">
      welcome<br/>
       <form action="llianxi.html" method="post" class="third">
    账号：<input type="text" placeholder="请输入账号" required><br/>
    密码：<input type="password" class="four" placeholder="请输入密码" required><br/>
         <input type="submit" value="登录" size="20" class="five">
  </form>
    </span>

  </a>

</div>
</body>
</html>
版权声明：本文为weixin_47949485原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。