HTML+CSS设计一个朴实无华的登录页

说明

之前一直偏重于后端技术研究，最近设计网站感觉前端太菜，遂集中看了下CSS的内容。后续我会发表一些前端实战的一些例子，给自己记录的同时希望也能分享给大家。

实现效果

在这里插入图片描述

主要知识点

  • DIV屏幕垂直居中（自动管理宽度和高度）
  • input标签修饰（padding和focus样式）
  • DIV边框阴影和圆角效果（利用：box-shadow）
  • 如何让label标签垂直右对齐（inline-block）
  • 如何调整line-height使得块级元素不会乱动

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>

    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        font: 14px/1.5 "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro",
          "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial",
          sans-serif;
        background-color: #a08570;
        color: #333;
      }

      .login-body {
        width: 500px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 300px;
        box-shadow: rgba(0, 0, 0, 0.05) 30px 30px 5px 2px;
        background: rgb(255, 255, 255);
        border-radius: 5px;
      }

      .form-item {
        padding: 10px 20px 10px 0;
        display: block;
        margin: 5px 0;
      }

      .form-item label {
        display: inline-block;
        text-align: right;
        width: 100px;
        line-height: 1.8em;
      }

      .form-item input {
        padding: 5px;
        line-height: 1.6em;
        margin-left: 15px;
        border-radius: 5px;
        border: 1px solid rgb(209, 209, 209);
      }

      input[type="text"]:focus {
        outline: 1px solid #84bc3c;
      }

      .btn {
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
      }

      .btn-primary {
        background-color: #3c8dbc;
        border-color: #367fa9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="login-body">
      <form action="#">
        <div class="title">
          <h1>Login</h1>
        </div>
        <div class="form-item">
          <label for="username">用户名：</label>
          <input type="text" id="username" name="username" />
        </div>
        <div class="form-item">
          <label for="password">密码：</label>
          <input type="text" id="password" name="password" />
        </div>
        <div class="form-item">
          <button type="submit" id="submit" class="btn btn-primary">
            登录
          </button>
        </div>
      </form>
    </div>
  </body>
</html>
posted @ 2020-12-25 18:39  一锤子技术员  阅读(6)  评论(0)  编辑  收藏  举报  来源