黑马程序员前端-CSS用户界面样式源码

按照HTML+CSS的学习顺序笔记已经更新了26篇内容了,因为篇幅问题,请看文末。

目录

一、什么是界面样式

二、鼠标样式

三、轮廓线

三、防止拖拽文本域

四、vertical-align 属性应用

五、往期合集


今天来学用户界面样式。

一、什么是界面样式

所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。

- 更改用户的鼠标样式

- 表单轮廓

- 防止表单域拖拽

二、鼠标样式

li {
 	cursor: pointer; 
 }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

三、轮廓线

给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。

input {
 	outline: none; 
 }

三、防止拖拽文本域

实际开发中,我们文本域右下角是不可以拖拽的。

textarea{ 
 	resize: none;
 }

四、vertical-align 属性应用

CSS 的 **vertical-align** 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释: 用于设置一个元素的**垂直对齐方式**,但是它只针对于行内元素或者行内块元素有效。

语法:

vertical-align : baseline | top | middle | bottom 

五、往期合集


 2022年前端学习路线图:课程、源码、笔记,技术栈
欢迎小伙伴们留言哦,期待看到大家的进步。另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我。
 


版权声明:本文为itcast_cn原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。