CSS用户界面样式

最新推荐文章于 2022-08-19 15:47:32 发布

原创最新推荐文章于 2022-08-19 15:47:32 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享 #CSS #HTML

学习中的一点总结专栏收录该内容

94 篇文章

订阅专栏

本文详细解读CSS中的用户交互样式，包括修改鼠标图标、消除表单轮廓、防止拖拽及解决图片间隙问题，带你掌握前端设计的核心要素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS用户界面样式：
（1）更改用户的鼠标样式：
语法格式： li {cursor: pointer;}

属性值                                          描述
default                                        小白（默认）
pointer                                        小手
move                                           移动
text                                           文本
not-allowed                                    禁止

（2）表单轮廓：
语法格式：outline:0; outline:none;

input {outline: none}

（3）防止表单域拖拽：
语法格式：textarea { resize: none;}

vertical-align:用于设置图片或者表单和文字垂直方式；
主要针对行内元素或者行内块元素有效。
语法格式：

vertical-align: baseline | top | middle | bottom
baseline                  默认，元素放置在父元素的基线上
top                         把元素的顶端与行中最高元素的顶端对齐
middle                    把此元素放置在父元素的中部
bottom                   把元素的顶端与行中最低的元素的顶端对齐

解决图片底部默认空白缝隙问题：
方法一：给图片添加：vertical-align: middle | top | bottom等；
方法二：将图片转换为块级元素：display: block;