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的嵌入方式)。
总结
本篇笔记仅仅提供了一个思路,各位可以自行实践一下,希望大家一起加油。