23.前端笔记-CSS-用户界面样式

MY Daisy

已于 2022-12-09 21:39:13 修改

阅读量134

点赞数

文章标签：前端 css ui

于 2022-12-09 13:46:11 首次发布

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128251462

版权

1、用户界面样式

就是用户操作样式
内容：

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

1.1 悬浮鼠标样式cursor

语法：

li{
	cursor:pointer;
}

光标样式：

属性值	描述
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:default">default</li>
    <li style="cursor:pointer">pointer</li>
    <li style="cursor:text">text</li>
    <li style="cursor:move">move</li>
    <li style="cursor:not-allowed">not-allowed</li>
</body>
</html>

鼠标悬浮样式

1.2 轮廓线 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>
</head>
<body>
    <input type="text">
</body>
</html>

在这里插入图片描述
如果不想要这种默认的效果，可以使用outline属性

input{
	outline:none;
	/*或*/
	outline:0;
}

<!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;
	/*或*/
	outline:0;
}
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

在这里插入图片描述

1.3 防止表单域拖拽 resize

文本域textarea默认可以进行随意拖拽

<!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>
    <textarea name="text" id="" cols="30" rows="10"></textarea>
</body>
</html>

文本域拖拽

如果不想要拖拽的效果，可以使用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>Document</title>
    <style>
        textarea{
            resize:none;
            outline: none;
        }
    </style>
</head>
<body>
    <textarea name="text" id="" cols="30" rows="10"></textarea>
</body>
</html>