#大有学问#

#头条创作挑战赛#

什么是用户界面样式？

是指用户在使用过程中所看到的和使用的页面窗口上的样式。

如鼠标指针的样式、表单的样式等。

目的 ：提高用户体验。

这篇文章三个知识点： 更改鼠标样式 、 去除表单轮廓 、 防止拖拽文本域 。

更改鼠标样式

语法 ：

cursor：default | pointer | move | text | not-allowed ;

代码练习 ：

.defA {
  /* 默认状态 */
  cursor: default;
}
.poIn {
  /* 小手样式 */
  cursor: pointer;
}
.move {
  cursor: move;
}
.text {
  cursor: text;
}
.notA {
  cursor: not-allowed;
}

<ul>
  <li class="defA">默认白色三角箭头</li>
  <li class="poIn">小手样式</li>
  <li class="move">移动样式</li>
  <li class="text">文本样式</li>
  <li class="notA">禁止样式</li>
</ul>

截不出鼠标，就不放运行图了。有兴趣的可以自己敲敲代码看看。

去除表单轮廓

当表单元素获取焦点时，默认状态下表单元素会出现外轮廓。

为了提高用户体验，可将其去除。

语法 ：

这两种属性任意一个即可去除外轮廓。

outline:0;  |  outline:none;

代码练习 ：

.inputChange {
  /* 取消表单获取焦点时外部轮廓 */
  /* outline:0; */
  outline: none;
}

<input type="text" value="表单的默认状态">
<input type="text" value="更改后的状态" class="inputChange">

默认状态下的外轮廓效果

去除外轮廓后的效果

防止拖拽文本域

默认情况下文本域右下角有特殊符号，且当鼠标悬停在右下角时会变成箭头，可以随意拖拽拉宽或变窄文本域。

这样的情况不利于网页布局，所以需要将其设置防止拖拽。

语法 ：

resize: none;

代码练习 ：

.textareaChange {
  resize: none;
}

<textarea name="" id="" cols="30" rows="10">文本域默认状态</textarea>
<textarea name="" id="" cols="30" rows="10" class="textareaChange">更改之后</textarea>

文本域的默认状态

添加防拖拽属性后的文本域

今天就到这里了，拜拜~