CSS更改用户界面样式

诺坎普的风间

于 2023-03-30 13:59:50 发布

阅读量268

点赞数

分类专栏：前端只因变凤凰之路文章标签： css 前端 javascript 用户界面样式

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129856057

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

本文介绍了CSS中用于改善用户体验的界面样式，包括cursor属性来改变鼠标形状（如pointer、default、move、text、not-allowed），使用outline属性控制表单轮廓线以达到自定义效果，以及如何利用resize属性禁止文本域的拖拽，提升网页交互设计的合理性。

摘要由CSDN通过智能技术生成

🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的用户界面样式。知识学习内容来自b站的@黑马程序员的视频

界面样式就是更改一些用户操作样式，更好提高用户体验。具体包括：

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

🔥鼠标样式

cursor，设置或检索鼠标用何种光标形状

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

<!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>Document</title>
</head>

<body>
    <li style="cursor: pointer;">1111</li>
    <li style="cursor: default;">2222</li>
    <li style="cursor: move;">3333</li>
    <li style="cursor: text;">4444</li>
    <li style="cursor: not-allowed;">5555</li>
</body>

</html>

🔥轮廓线outline

输入框会有默认的轮廓线

通过outline属性可以取消掉或者自己设置

<!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>Document</title>
    <style>
        input {
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

</html>

取消文本域的拖拽 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>Document</title>
</head>
<style>
    input,
    textarea {
        outline: none;
    }

    textarea {
        resize: none;
    }
</style>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>