CSS用户界面样式

最新推荐文章于 2022-06-09 18:05:52 发布

FG.

最新推荐文章于 2022-06-09 18:05:52 发布

阅读量187

点赞数 2

分类专栏： CSS3 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_54418006/article/details/122413908

版权

CSS3 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1. 界面样式

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

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

2. 鼠标样式

li {cursor:pointer; }

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

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

<body>
    <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>
</body>

3. 轮廓线

给表单添加outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none;}

4. 防止拖拽文本域resize

实际开发中，文本域右下角是不可以拖拽的。

textarea {resize: none;}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        input,
        textarea {
            outline: none;
        }

        textarea {
            resize: none;
        }
    </style>
</head>

<body>
    <!--取消表单轮廓-->
    <input type="text">
    <!--防止拖拽文本域-->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>

在这里插入图片描述

FG.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS用户界面样式

1. 界面样式所谓的界面样式，就是更改一些用户操作模式，以便提高用户体验。更改用户的鼠标表单轮廓防止表单域拖拽2. 鼠标样式li {cursor:pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白默认pointer小手move移动text文本not-allowed禁止<body> <ul> <li style="
复制链接

扫一扫