本篇笔记中并不会记录一个真实的案例(太懒了,就想把核心记录下来),仅将一些基本的页面美化的操作记录下来,新知识点较少,依旧会先补充知识点说明后再进行相应的说明。
另:我们在做前端页面的时候都会提前先将浏览器页面的样式重置,这时候需要一个重置样式表,链接如下:
重置样式表
https://download.csdn.net/download/qq_40749255/21567692?spm=1001.2014.3001.5503
表单美化一定要记住以下几点:
由上述四条可以看出,表单美化的步骤就是:重置,设计,美化。
伪元素选择器,表示表单元素(主要就是input)元素中的placeholder属性,该属性的含义是文本框等该元素中提供的提示文字,在用户输入数据后就会被覆盖。
input[type="text"]::placeholder{
color:#ccc;
}
上述CSS样式的含义是选择页面中input元素中type为text的元素,并设置其placeholder属性,将其提示的文字颜色改为#ccc。
伪类选择器,(其中,元素中出现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元素来使其看起来更加工整。**对于具体的前端逻辑并没有进行说明。下面详细说明:
博主跟着视频学习做的模仿小破站的注册页面中的静态效果,具体样式如下:
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>
解释如下:
以上的方式就可以实现注册的样式,也可以做左右各一条线,中间一个字(具体实现可以参考网页导航栏中logo的嵌入方式)。
本篇笔记仅仅提供了一个思路,各位可以自行实践一下,希望大家一起加油。