CSS用户界面样式

最新推荐文章于 2022-04-22 12:01:57 发布

原创最新推荐文章于 2022-04-22 12:01:57 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5

CSS 同时被 2 个专栏收录

28 篇文章

订阅专栏

html

26 篇文章

订阅专栏

本文介绍了优化用户界面的一些关键点，包括设置鼠标样式以增强交互体验，如使用`cursor`属性改变光标形状；控制表单轮廓以改善视觉效果，通常通过`outline: 0`或`outline: none`移除默认轮廓；以及防止文本域被拖拽，使用`resize: none`属性确保文本域尺寸稳定。这些技巧能帮助创建更专业且用户友好的网页设计。

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

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

更改用户的鼠标样式
表单轮廓等。
防止表单域拖拽

1. 鼠标样式

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

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

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

2. 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是： outline: 0; 或者 outline: none;

3. 防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

文本域不要分行写，要在一行内显示。

<textarea name="wen" id="wenben" cols="30" rows="10">不要分行写</textarea>

4. 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none