轉載說明：原創不易，未經授權，謝絕任何形式的轉載

Midjourney 創作，未來UI

随着網際網路技術的不斷發展，前端布局在各種應用中變得越來越重要。一個好的前端布局能夠提升使用者的體驗和頁面的美觀度，是以越來越多的設計師和前端開發者開始關注前端布局的設計。在本篇文章中，我們将分享3個漂亮的表單元件，包含了登入系統資料庫單和上傳表單，這些元件不僅外觀美觀，而且功能實用，可供參考和借鑒。

1、常見的郵箱密碼登入及第三方登入

如下圖所示，這個登入系統資料庫單的場景十分常見，還支援第三方登入按鈕的操作

以下是相關的代碼實作

HTML部分

<form class="form_container">
   <!-- 包含了公司logo的div -->
  <div class="logo_container"></div>
  <!-- 包含了标題和副标題的div -->
  <div class="title_container">
    <p class="title">Login to your Account</p>
    <span class="subtitle">Get started with our app, just create an account and enjoy the experience.</span>
  </div>
  <br>
  <div class="input_container">
    <!-- 包含了使用者輸入email的标簽、圖示和輸入框的div -->
    <label class="input_label" for="email_field">Email</label>
    <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M7 8.5L9.94202 10.2394C11.6572 11.2535 12.3428 11.2535 14.058 10.2394L17 8.5"></path>
      <path stroke-linejoin="round" stroke-width="1.5" stroke="#141B34" d="M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z"></path>
    </svg>
    <input placeholder="[email protected]" title="Inpit title" name="input-name" type="text" class="input_field" id="email_field">
  </div>
<!-- 包含了使用者輸入密碼的标簽、圖示和輸入框的div -->
  <div class="input_container">
    <label class="input_label" for="password_field">Password</label>
    <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
      <path stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M18 11.0041C17.4166 9.91704 16.273 9.15775 14.9519 9.0993C13.477 9.03404 11.9788 9 10.329 9C8.67911 9 7.18091 9.03404 5.70604 9.0993C3.95328 9.17685 2.51295 10.4881 2.27882 12.1618C2.12602 13.2541 2 14.3734 2 15.5134C2 16.6534 2.12602 17.7727 2.27882 18.865C2.51295 20.5387 3.95328 21.8499 5.70604 21.9275C6.42013 21.9591 7.26041 21.9834 8 22"></path>
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M6 9V6.5C6 4.01472 8.01472 2 10.5 2C12.9853 2 15 4.01472 15 6.5V9"></path>
      <path fill="#141B34" d="M21.2046 15.1045L20.6242 15.6956V15.6956L21.2046 15.1045ZM21.4196 16.4767C21.7461 16.7972 22.2706 16.7924 22.5911 16.466C22.9116 16.1395 22.9068 15.615 22.5804 15.2945L21.4196 16.4767ZM18.0228 15.1045L17.4424 14.5134V14.5134L18.0228 15.1045ZM18.2379 18.0387C18.5643 18.3593 19.0888 18.3545 19.4094 18.028C19.7299 17.7016 19.7251 17.1771 19.3987 16.8565L18.2379 18.0387ZM14.2603 20.7619C13.7039 21.3082 12.7957 21.3082 12.2394 20.7619L11.0786 21.9441C12.2794 23.1232 14.2202 23.1232 15.4211 21.9441L14.2603 20.7619ZM12.2394 20.7619C11.6914 20.2239 11.6914 19.358 12.2394 18.82L11.0786 17.6378C9.86927 18.8252 9.86927 20.7567 11.0786 21.9441L12.2394 20.7619ZM12.2394 18.82C12.7957 18.2737 13.7039 18.2737 14.2603 18.82L15.4211 17.6378C14.2202 16.4587 12.2794 16.4587 11.0786 17.6378L12.2394 18.82ZM14.2603 18.82C14.8082 19.358 14.8082 20.2239 14.2603 20.7619L15.4211 21.9441C16.6304 20.7567 16.6304 18.8252 15.4211 17.6378L14.2603 18.82ZM20.6242 15.6956L21.4196 16.4767L22.5804 15.2945L21.785 14.5134L20.6242 15.6956ZM15.4211 18.82L17.8078 16.4767L16.647 15.2944L14.2603 17.6377L15.4211 18.82ZM17.8078 16.4767L18.6032 15.6956L17.4424 14.5134L16.647 15.2945L17.8078 16.4767ZM16.647 16.4767L18.2379 18.0387L19.3987 16.8565L17.8078 15.2945L16.647 16.4767ZM21.785 14.5134C21.4266 14.1616 21.0998 13.8383 20.7993 13.6131C20.4791 13.3732 20.096 13.1716 19.6137 13.1716V14.8284C19.6145 14.8284 19.619 14.8273 19.6395 14.8357C19.6663 14.8466 19.7183 14.8735 19.806 14.9391C19.9969 15.0822 20.2326 15.3112 20.6242 15.6956L21.785 14.5134ZM18.6032 15.6956C18.9948 15.3112 19.2305 15.0822 19.4215 14.9391C19.5091 14.8735 19.5611 14.8466 19.5879 14.8357C19.6084 14.8273 19.6129 14.8284 19.6137 14.8284V13.1716C19.1314 13.1716 18.7483 13.3732 18.4281 13.6131C18.1276 13.8383 17.8008 14.1616 17.4424 14.5134L18.6032 15.6956Z"></path>
    </svg>
    <input placeholder="Password" title="Inpit title" name="input-name" type="password" class="input_field" id="password_field">
  </div>
  <button title="Sign In" type="submit" class="sign-in_btn">
    <span>Sign In</span>
  </button>

  <div class="separator">
    <hr class="line">
    <span>Or</span>
    <hr class="line">
  </div>
  <button title="Sign In" type="submit" class="sign-in_ggl">
    <svg height="18" width="18" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <path d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" id="A"></path>
      </defs>
      <clipPath id="B">
        
      </clipPath>
      <g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)">
        <path fill="#fbbc05" clip-path="url(#B)" d="M0 37V11l17 13z"></path>
        <path fill="#ea4335" clip-path="url(#B)" d="M0 11l17 13 7-6.1L48 14V0H0z"></path>
        <path fill="#34a853" clip-path="url(#B)" d="M0 37l30-23 7.9 1L48 0v48H0z"></path>
        <path fill="#4285f4" clip-path="url(#B)" d="M48 48L17 24l-4-3 35-10z"></path>
      </g>
    </svg>
    <span>Sign In with Google</span>
  </button>
  <button title="Sign In" type="submit" class="sign-in_apl">
    <svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 256 315" height="20px" width="16px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <g>
        <path fill="#ffffff" d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249"></path>
      </g>
    </svg>
    <span>Sign In with Apple</span>
  </button>
  <p class="note">Terms of use & Conditions</p>
</form>

CSS部分

/* 定義一個表單容器 */
.form_container {
  width: fit-content; /* 寬度自适應内容 */
  height: fit-content; /* 高度自适應内容 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水準居中 */
  justify-content: center; /* 垂直居中 */
  gap: 15px; /* 定義子元素之間的間距 */
  padding: 50px 40px 20px 40px; /* 内邊距 */
  background-color: #ffffff; /* 背景顔色 */
  box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
    0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); /* 添加陰影效果 */
  border-radius: 11px; /* 添加圓角 */
  font-family: "Inter", sans-serif; /* 使用字型 */
}

/* 定義一個logo容器 */
.logo_container {
  box-sizing: border-box; /* 設定盒模型 */
  width: 80px; /* 寬度 */
  height: 80px; /* 高度 */
  background: linear-gradient(
      180deg,
      rgba(248, 248, 248, 0) 50%, 
      #F8F8F888 100%); /* 漸變背景 */
  border: 1px solid #F7F7F8; /* 添加邊框 */
  filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); /* 添加濾鏡效果 */
  border-radius: 11px; /* 添加圓角 */
}

/* 定義一個标題容器 */
.title_container {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水準居中 */
  justify-content: center; /* 垂直居中 */
  gap: 10px; /* 定義子元素之間的間距 */
}

/* 定義标題 */
.title {
  margin: 0; /* 外邊距 */
  font-size: 1.25rem; /* 字型大小 */
  font-weight: 700; /* 字型粗細 */
  color: #212121; /* 字型顔色 */
}

/* 子标題樣式 */
.subtitle {
  font-size: 0.725rem;
  max-width: 80%;
  text-align: center;
  line-height: 1.1rem;
  color: #8B8E98; /* 文字顔色 */
}

/* 輸入框容器樣式 */
.input_container {
  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 子元素之間的間隔 */
}

/* 輸入框圖示樣式 */
.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

/* 輸入框标簽樣式 */
.input_label {
  font-size: 0.75rem;
  color: #8B8E98; /* 文字顔色 */
  font-weight: 600;
}

/* 輸入框樣式 */
.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 40px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5; /* 邊框顔色 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 陰影 */
          drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 過渡效果 */
}

/* 輸入框擷取焦點時的樣式 */
.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424; /* 陰影 */
  background-color: transparent;
}

/* 登入按鈕樣式 */
.sign-in_btn {
  width: 100%;
  height: 40px;
  border: 0;
  background: #115DFC; /* 背景顔色 */
  border-radius: 7px;
  outline: none;
  color: #ffffff; /* 文字顔色 */
  cursor: pointer;
}

/* Google登入按鈕樣式 */
.sign-in_ggl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff; /* 背景顔色 */
  border-radius: 7px;
  outline: none;
  color: #242424; /* 文字顔色 */
  border: 1px solid #e5e5e5; /* 邊框顔色 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 陰影 */
          drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer;
}
/* Apple登入按鈕樣式 */
.sign-in_apl {
  width: 100%; /* 寬度為100% */
  height: 40px; /* 高度為40像素 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水準居中 */
  gap: 10px; /* 子元素間隔為10像素 */
  background: #212121; /* 背景色為#212121 */
  border-radius: 7px; /* 圓角半徑為7像素 */
  outline: none; /* 去掉預設輪廓線 */
  color: #ffffff; /* 文字顔色為白色 */
  border: 1px solid #e5e5e5; /* 邊框為1像素實線，顔色為#e5e5e5 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 添加一個下方的陰影 */
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer; /* 滑鼠懸停時顯示指針 */
}

.separator {
  width: 100%; /* 寬度為100% */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水準居中 */
  gap: 30px; /* 子元素間隔為30像素 */
  color: #8B8E98; /* 文字顔色為#8B8E98 */
}

.separator .line {
  display: block; /* 顯示為塊級元素 */
  width: 100%; /* 寬度為100% */
  height: 1px; /* 高度為1像素 */
  border: 0; /* 去掉邊框 */
  background-color: #e8e8e8; /* 背景色為#e8e8e8 */
}

.note {
  font-size: 0.75rem; /* 字型大小為0.75rem */
  color: #8B8E98; /* 文字顔色為#8B8E98 */
  text-decoration: underline; /* 添加下劃線 */
}

2、極簡的系統資料庫單

如下圖所示，一個極簡而又美觀的系統資料庫單，在我的業務中也很常見，如下圖所示：

以下是相關的代碼實作

HTML部分

<form class="form">  <!-- 表單，class為form -->
    <span class="signup">Sign Up</span>  <!-- 一個span元素，class為signup，用于顯示“Sign Up” -->
    <input type="email" placeholder="Email address" class="form--input">  <!-- 郵箱輸入框，class為form--input -->
    <input type="password" placeholder="Password" class="form--input">  <!-- 密碼輸入框，class為form--input -->
    <input type="password" placeholder="Confirm password" class="form--input">  <!-- 确認密碼輸入框，class為form--input -->
    
    <div class="form--marketing">  <!-- 用于顯示“newsletter”的div元素，class為form--marketing -->
        <input id="okayToEmail" type="checkbox">  <!-- 一個checkbox元素，id為okayToEmail -->
        <label for="okayToEmail" class="checkbox">  <!-- 與checkbox關聯的label元素，用于顯示“Join the newsletter”，class為checkbox -->
          I want to join the newsletter
        </label>
    </div>
    <button class="form--submit">  <!-- 送出按鈕，class為form--submit -->
        Sign up
    </button>
</form>

CSS部分

.form {
  /* 設定表單的背景色 */
  background-color: white;
  /* 設定表單内邊距 */
  padding: 3.125em;
  /* 設定表單的圓角邊框 */
  border-radius: 10px;
  /* 設定表單的布局方向為垂直 */
  display: flex;
  flex-direction: column;
  /* 設定子元素在交叉軸上居中對齊 */
  align-items: center;
  /* 設定表單的陰影效果 */
  box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);
}

.signup {
  /* 設定注冊字樣的顔色 */
  color: rgb(77, 75, 75);
  /* 轉換為大寫字母 */
  text-transform: uppercase;
  /* 字母間距 */
  letter-spacing: 2px;
  /* 塊級元素顯示 */
  display: block;
  /* 設定字型加粗 */
  font-weight: bold;
  /* 設定字型大小 */
  font-size: x-large;
  /* 底部外邊距 */
  margin-bottom: 0.5em;
}

.form--input {
  /* 設定輸入框的寬度 */
  width: 100%;
  /* 設定底部外邊距 */
  margin-bottom: 1.25em;
  /* 設定輸入框的高度 */
  height: 40px;
  /* 設定輸入框的圓角邊框 */
  border-radius: 5px;
  /* 設定輸入框的邊框 */
  border: 1px solid gray;
  /* 設定輸入框的内邊距 */
  padding: 0.8em;
  /* 設定字型 */
  font-family: 'Inter', sans-serif;
  /* 去除輸入框的輪廓線 */
  outline: none;
}

.form--input:focus {
  /* 獲得焦點時設定邊框顔色 */
  border: 1px solid #639;
  /* 去除輸入框的輪廓線 */
  outline: none;
}

.form--marketing {
  /* 設定營銷複選框的布局方向為水準 */
  display: flex;
  /* 設定底部外邊距 */
  margin-bottom: 1.25em;
  /* 設定子元素在交叉軸上居中對齊 */
  align-items: center;
}

.form--marketing > input {
  /* 設定營銷複選框與文本之間的右外邊距 */
  margin-right: 0.625em;
}

.form--marketing > label {
  /* 設定營銷文本的顔色 */
  color: grey;
}

.checkbox, input[type="checkbox"] {
  /* 設定複選框的顔色 */
  accent-color: #639;
}

/* 定義送出按鈕的樣式 */
.form--submit {
  width: 50%; /* 寬度為父元素50% */
  padding: 0.625em; /* 内邊距 */
  border-radius: 5px; /* 圓角 */
  color: white; /* 文字顔色為白色 */
  background-color: #639; /* 背景顔色為#639 */
  border: 1px dashed #639; /* 邊框為虛線，顔色為#639 */
  cursor: pointer; /* 光标樣式為手型 */
}

/* 當滑鼠懸停在送出按鈕上時，更改樣式 */
.form--submit:hover {
  color: #639; /* 文字顔色為#639 */
  background-color: white; /* 背景顔色為白色 */
  border: 1px dashed #639; /* 邊框為虛線，顔色為#639 */
  cursor: pointer; /* 光标樣式為手型 */
  transition: 0.5s; /* 動畫效果持續0.5秒 */
}

上傳表單元件

上傳的需求場景也十分常見，如下圖所示，适合在彈層的場景下進行使用

以下是相關的代碼實作

HTML部分

<form class="modal">
  <!-- 關閉模态框的按鈕 -->
  <span class="close">X</span>
  <div class="content">
    <!-- 标題 -->
    <span class="title">Upload a File</span>
    <!-- 提示資訊 -->
    <p class="message">Select a file to upload from your computer or device.</p>
    <div class="actions">
      <!-- 上傳檔案的按鈕 -->
      <label for="file" class="button upload-btn">Choose File
        <input hidden="" type="file" id="file">
      </label>
    </div>
    <div class="result">
      <!-- 顯示已上傳檔案的區域 -->
      <div class="file-uploaded"><p>profile_pic.png</p></div>
    </div>
  </div>
</form>

CSS部分

.modal {
  background-color: rgb(255, 255, 255); /* 模态框背景顔色 */
  border-radius: 1em; /* 模态框圓角半徑 */
  box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1); /* 模态框陰影 */
  color: rgb(15, 14, 14); /* 模态框字型顔色 */
  max-width: 330px; /* 模态框最大寬度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  position: relative; /* 相對定位 */
  transition: background-color 0.3s, color 0.3s; /* 背景色和字型顔色過渡效果 */
}

.content > *, .modal > * {
  padding: 0.875em; /* 内容元素的内邊距 */
}

.title {
  font-size: 1.25em; /* 标題字型大小 */
  font-weight: 600; /* 标題字型加粗 */
  line-height: 1.2; /* 标題行高 */
  display: flex; /* 使用彈性布局 */
  justify-content: center; /* 水準居中 */
}

.message {
  line-height: 1.2; /* 内容行高 */
  text-align: center; /* 内容文字居中 */
}

.actions {
  display: flex; /* 使用彈性布局 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 自動換行 */
}

.upload-btn {
  background-color: transparent; /* 背景透明 */
  border: 0.125rem dashed hsla(223,10%,50%,0.4); /* 虛線邊框 */
  flex: 1; /* 占滿剩餘空間 */
  padding: 0.375rem 2rem; /* 按鈕内邊距 */
}

.upload-btn:hover {
  background-color: hsla(223,10%,60%,0.2); /* 滑鼠懸停時的背景色 */
}

.close {
  display: flex; /* 使用彈性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水準居中 */
  background-color: rgb(226, 94, 54); /* 關閉按鈕背景色 */
  height: 30px; /* 高度 */
  width: 30px; /* 寬度 */
  border-radius: 50%; /* 圓形邊框 */
  position: absolute; /* 絕對定位 */
  right: 10px; /* 距右側的距離 */
  top: 10px; /* 距頂部的距離 */
  color: #fff; /* 字型顔色 */
  font-weight: bold; /* 字型加粗 */
  cursor: pointer; /* 滑鼠懸停時的指針樣式 */
}

.result {
  margin-top: 4px;   /* 頂部外邊距 */
  background-color: rgba(0, 140, 255, 0.062);  /* 背景顔色 */
  display: flex;   /* 顯示為彈性盒子 */
  align-items: center;  /* 在交叉軸上居中對齊 */
  position: relative;   /* 定位上下文 */
  border-radius: 1em;  /* 圓角半徑 */
}

.file-uploaded {
  font-weight: 300;   /* 字型粗細 */
}

.file-uploaded::before {
  position: absolute;   /* 絕對定位 */
  content: "X";   /* 僞元素内容 */
  display: flex;   /* 顯示為彈性盒子 */
  align-items: center;   /* 在交叉軸上居中對齊 */
  justify-content: center;   /* 在主軸上居中對齊 */
  background-color: rgba(26, 7, 1, 0.212);  /* 背景顔色 */
  height: 30px;   /* 高度 */
  width: 30px;    /* 寬度 */
  border-radius: 50%;   /* 圓形 */
  right: 10px;   /* 右側定位 */
  top: 10px;   /* 頂部定位 */
  color: rgb(255, 255, 255);   /* 字型顔色 */
  font-weight: bold;   /* 字型粗細 */
  cursor: pointer;   /* 滑鼠懸停時的光标 */
}

.file-uploaded:hover::before {
  background-color: rgba(233, 40, 6, 0.664);  /* 滑鼠懸停時的背景顔色 */
}

結束

以上介紹的3個表單元件，通過精心設計的布局和配色，不僅可以提供優秀的使用者體驗，還可以為網站增添一份視覺上的美感。當然，這隻是冰山一角，還有許多前端布局的技巧和方法等待我們去探索。希望本文能夠給你帶來一些啟示和幫助，讓你更好地應對前端布局的挑戰。

今天的分享就到這裡，感謝你的閱讀，希望能夠幫助到你，文章創作不易，如果你喜歡我的分享，别忘了點贊轉發，讓更多有需要的人看到，最後别忘記關注「前端達人」，你的支援将是我分享最大的動力，後續我會持續輸出更多内容，敬請期待。

前端布局小案例，分享3個漂亮的表單元件

1、常見的郵箱密碼登入及第三方登入

2、極簡的系統資料庫單

上傳表單元件

結束

繼續閱讀

flex布局小問題

使用antd form開發支援動态增減表單項，可選有初始值元件的一種實作方式（一）

不定高垂直居中的三種方法

html+css實作三列布局的4種方式

flex彈性布局關于display:flex;彈性布局的常用屬性介紹

使用 rem 實作移動端的自适應布局

前端配置化表單元件設計方法

解決VUE列印時多一頁空白頁的問題

彈性布局詳解

第一次學前端你必須要知道的rem布局以及Less的基本用法

新手小白非常适合的手機端常見布局，flex布局屬性詳解

前端CSS布局種類

CSS中的布局方式css 布局的幾種方式

前端常見布局，（pc端和移動端）

前端常見面試（個人總結的一些知識點）

css中的calc() 函數