說明

之前一直偏重于后端技術研究，最近設計網站感覺前端太菜，遂集中看了下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>

羅漢爺

CSDN認證博客專家 java 資料庫管理員全堆疊工程師

生活不會像你想象的那么好，也不會像你想象的那么糟，人的脆弱和堅強往往超乎了自己的想象，有時候會因為一句話就淚如雨下，而有時候發現自己艱難的走了很遠，
QQ: 2480035622
Email: [email protected]
網站：http://www.luohanye.com/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241031.html

標籤：其他

上一篇：詳解flex布局做骰子案例

下一篇：面試經常出的JavaScript變數提升題分析，一勞永逸，吊打面試官！

HTML+CSS設計一個樸實無華的登錄頁

說明

實作效果

主要知識點

原始碼