CSS用户界面样式

最新推荐文章于 2022-04-22 12:01:57 发布

安澜仙王

最新推荐文章于 2022-04-22 12:01:57 发布

阅读量110

点赞数

分类专栏： # CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/sinat_28317385/article/details/119980078

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

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

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

鼠标样式cursor

li {cursor: pointer;}

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

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

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            
        </style>
    </head>
    <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>
</html>

请添加图片描述

轮廓线 outline

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

input {outline:none;}

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input {
				/* outline-color: #00B057; */
				outline: none;
			}
		</style>
	</head>
	<body>
		<input type="text"/>
	</body>
</html>

在这里插入图片描述

改变轮廓线颜色

outline-color: #00B057;

防止拖拽文本域

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

textarea {resize:none;}

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			textarea {
				resize: none;
			}
		</style>
	</head>
	<body>
		<textarea></textarea>
	</body>
</html>

安澜仙王

关注

0
点赞
踩
0

收藏

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

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

扫一扫