我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年9月16日星期五

🌌上期文章：『首期文章』

📚订阅专栏：『16个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是登录界面

来看一下最终效果吧！！！

2.布局设计

登录界面我们用到的是表单组件，form

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

（1）type=”text”是定义表单里面的单行文本框；（2）type=”password” 定义密码框；（3）type=”radio” 单选勾选框；（4）type=”checkbox” 多选勾选框；（5）type=”submit” 提交按钮；（6）type=”reset” 重置按钮；

placeholder 属性规定可描述输入字段预期值的简短的提示信息。该提示会在用户输入值之前显示在输入字段中

表单用于向服务器传输数据。这里我们只专注样式的设计就不写提交数据的逻辑代码了。

 <body>
     <div class="container">
         <form action="#" class="login-form">
           <h2>登 录</h2>
           <input
             type="text"
             name="username"
             placeholder="用户名"
           />
           <input
             type="password"
             name="password"
             placeholder="密码"
           />
           <button type="submit">登录</button>
         </form>
       </div>
     </div>
   </body>

3.样式美化

3.1背景设置

首先我们来给用户界面添加一个好看的背景，然后通过Flex布局让表单组件位于页面的中心位置。

这里我用到了background-attachment属性

我们来学习一下这个属性。它的常见取值有如下：

fixed

此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local

此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll

此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

这里我们用的是fixed，让背景相对于视口固定

 html,
 body {
   margin: 0;
   font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
 }
 
 .container {
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209141908599.jpg") fixed no-repeat;
   background-size: cover;
 }

3.2表单美化

可以看到通过上面的设置，表单的排列格式还是有点不合常规，一般让每个组件竖着排列会更美观。

因此我们通过flex-direction: column;设置排列的主轴为列，让组件按列排列。除此之外呢，为了美化效果我还给表单设置一个伪元素，设置一个玻璃透明的背景。

 .login-form {
   width: 240px;
   height: 220px;
   display: flex;
   flex-direction: column;
   padding: 40px;
   text-align: center;
   position: relative;
   z-index: 100;
   background: inherit;
   border-radius: 18px;
   overflow: hidden; /* 隐藏多余的模糊效果*/
 }

3.3组件美化

最后一步就是我们对组件内容的美化。组件美化的思路也很简单，无疑就是添加阴影颜色，圆角，组件间距和大小。

 .login-form h2 {
   font-size: 18px;
   font-weight: 400;
   color: #3d5245;
 }
 
 .login-form input,
 .login-form button {
   margin: 6px 0;
   height: 36px;
   border: none;
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   padding: 0 14px;
   color: #3d5245;
 }

设计到这里其实我们的美化工作已经做完了。那么我们也可以添加一些hover效果改善用户的体验感。

4.结语

到此为止一个简单的登录界面就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。

16个实用的CSS样式之登录界面