CSS（十六）——美化表单实操

前言

本篇笔记中并不会记录一个真实的案例（太懒了，就想把核心记录下来），仅将一些基本的页面美化的操作记录下来，新知识点较少，依旧会先补充知识点说明后再进行相应的说明。

另：我们在做前端页面的时候都会提前先将浏览器页面的样式重置，这时候需要一个重置样式表，链接如下：

重置样式表

https://download.csdn.net/download/qq_40749255/21567692?spm=1001.2014.3001.5503

概述

表单美化一定要记住以下几点：

• 美化是由静态页面与动态效果共同完成的；
• 一般来说，下拉列表、单选、复选等可替换元素都是重新做出来的（即，使用元素和样式表来设计出同样的功能）；
• 在设计表单样式之前一定要将表单的默认样式重置；
• 表单在设计之初就要进行细致的划分，划分的越细致越有助于我们做表单美化。

由上述四条可以看出，表单美化的步骤就是：重置，设计，美化。

补充知识点

placeholder

伪元素选择器，表示表单元素（主要就是input）元素中的placeholder属性，该属性的含义是文本框等该元素中提供的提示文字，在用户输入数据后就会被覆盖。

input[type="text"]::placeholder{
	color:#ccc;
}

上述CSS样式的含义是选择页面中input元素中type为text的元素，并设置其placeholder属性，将其提示的文字颜色改为#ccc。

disabled

伪类选择器，（其中，元素中出现disabled表示一个布尔属性，该布尔属性的含义是表示当前元素不可用）我们可以使用该伪类选择器设置元素的不可用样式。

<style>
    button:disabled{
        background-color: #f5f5f5;
    	color:rgba(0,0,0,.25);
   		border: 1px solid #d9d9d9;
    	box-sizing: border-box;
        /*该鼠标样式显示未禁用符号*/
    	cursor:not-allowed;
    }
</style>

<button disabled>
    <a href="#">点击确认</a>
</button>

表单美化注意事项

表单的分区逻辑

**曾经学习前端的时候，一个表单都是用一个form元素来制作，比较规范化的就是使用table元素来使其看起来更加工整。**对于具体的前端逻辑并没有进行说明。下面详细说明：

• 首先在设计表单的时候，要先根据UI图中提供的页面将其功能划分。例如：登录界面的账号、密码（或验证码）等输入数据的位置都是input元素；登录（获取验证码）等按钮都是button元素。（或者是由其他元素或样式制作的——杠精别杠，举个例子）。
• 对于一些页面中样式一致的（例如边框，样色等）进行统一设置，如果有不同的地方后期增加样式。
• 在表单中可能会出现一些样式需要用到浮动和定位，要注意高度坍塌和定位的相关问题。
• 如果有需要自定义样式的可替换元素，记得使用关联（随便哪种关联方式都可以），如果需要隐藏的元素设置display属性。

表单的实现逻辑

• 表单从头开始做起，依次向下做；
• 先设置统一样式，然后再修改不同的地方；
• 横向排列一般使用浮动，纵向排列一般使用定位；（并不绝对，完成同一个样式的方法不止一个）
• 有些位置需要伪元素和伪类选择器对其进行修改样式（在之前的笔记中就有过讲解，可以翻回去复习）

博主跟着视频学习做的模仿小破站的注册页面中的静态效果，具体样式如下：

• 本次实现包括了文本框输入，按钮的样式等；
• 同意协议那里的复选框偷懒没使用图片来完美复原小破站的样式，采用了简单的自定义样式（上一篇笔记讲过）。
• 有些位置细致的修改边框样式，位置等，需要自己把握（水不深，自己能把握得住）
• 关于最上方注册二字需要说明一下。它是由连个样式覆盖形成的，在这里说明一下我学习到的方式（方式不止一种，仅仅觉得这种方便）

h2{
    text-align: center;
    font-size: 38px;
    border-bottom: 1px solid #ccc;
    height: 18px;
    margin-bottom: 30px;
}
h2>span{
    background-color: white;
    padding:0 20px;
}

该样式使用了两个元素来嵌套包裹文字，具体元素如下：

<h2>
   <span>注册</span>
</h2>

解释如下：

• 首先设置设置h2元素的位置、字体大小以及边框（注意代码中设置的是下边框）；
• 然后将h2的外边距设置为30px（同样设置的是下外边距）；
• 复习知识点：元素的数据溢出了父元素的空间大小，默认不会将溢出部分隐藏；
• 然后把文字的背景颜色设置为页面背景色。

以上的方式就可以实现注册的样式，也可以做左右各一条线，中间一个字（具体实现可以参考网页导航栏中logo的嵌入方式）。

总结

本篇笔记仅仅提供了一个思路，各位可以自行实践一下，希望大家一起加油。