用户界面样式

用户界面样式

鼠标样式

  当我们把鼠标放到盒子上去，可以有不同的样式，设置的属性为cursor,其取值如下

值	效果
default	默认
pointer	小手
move	移动(表示可拖动的十字架)
text	文本(一根竖线)

<ul>
    <li style= "cursor: default">我是默认</li>
    <li style= "cursor: pointer">我是小手</li>
    <li style= "cursor: move">我是移动</li>
    <li style= "cursor: text">我是文本</li>
</ul>

轮廓outline

  是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。比如表单就有一个轮廓

<input type="text">

  有没有看到外面的蓝色轮廓，设置轮廓线使用outline属性，一般这样连写outline : outline-color || outline-style || outline-width不过我们一般都不关心设置多少，一般都是直接去掉的。所以我们一般设置outline: 0px或者outline: none。

input {
    outline: 0px;
}

已经没有蓝色轮廓了。

文本域拖拽

  我们写的文本域都是可以拖拽的

<textarea></textarea>

textarea {
    width: 500px;
    height: 100px;
}

  在实际的页面中这个都是不可以拖拽的，可以通过设置resize: none;来进行设置。

resize: none;

这个时候文本域不能够拖拽了。