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

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

    鼠标样式cursor

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

属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  10.   <style>
  11.     .default {
  12.       cursor: default;
  13.     }
  15.     .pointer {
  16.       cursor: pointer;
  17.     }
  19.     .move {
  20.       cursor: move;
  21.     }
  23.     .text {
  24.       cursor: text;
  25.     }
  27.     .not-allowed {
  28.       cursor: not-allowed;
  29.     }
  30.   </style>
  31. </head>
  33. <body>
  34.   <ul>
  35.     <li class="default">小白 默认</li>
  36.     <li class="pointer">小手</li>
  37.     <li class="move">移动</li>
  38.     <li class="text">文本</li>
  39.     <li class="not-allowed">禁止</li>
  40.   </ul>
  41. </body>
  43. </html>

取消表单轮廓和防止拖拽文本域