css用户界面样式

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

时松

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

阅读量198

点赞数

分类专栏：基础文章标签： css用户界面样式

本文链接：https://blog.csdn.net/ice_yr/article/details/100054177

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

所谓界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等，但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们放弃了，防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
cursor: default小白/pointer 小手/move 移动/text 文本
千万不要用hand 因为火狐不支持pointer ie6以上都支持的尽量用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: purple;
			cursor: default;  /*小白 默认*/
		}
		.pointer {
			cursor: pointer;  /*小手*/
			background-color: blue;
		}
		.move {
			cursor: move;   /*移动*/
		}
		.text {
			cursor: text;
			background-color: skyblue;
		}
		/*这四个比较常用*/
	</style>
</head>
<body>
	<div>鼠标经过div的时候 会变换鼠标样式 小白 default 默认的</div>
	<div class="pointer">鼠标经过div的时候 会变换鼠标样式 pointer 小手</div>
	<div class="move">鼠标经过div的时候 会变换鼠标样式 移动 move</div>
	<div class="text">鼠标经过div的时候 会变换鼠标样式 文本 text</div>
</body>
</html>

轮廓outline

是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline: outline-color/outline-style/outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是：outline:0; 或者outline:none;

防止拖拽文本域 resize

resize: none 这个单词可以防止火狐谷歌等l浏览器随意的拖动文本域。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		input {
			/*outline: 5px solid red;*/
			border: 1px solid skyblue;
			outline: 0;   /*取消轮廓线*/
		}
		textarea {
			resize: none;   /*防止文本域拖拽*/
			outline: none;  /*取消轮廓线*/
			width: 400px;
			height: 120px;
			border: 1px solid pink;
			background-color: #f6e7f7;
			color: skyblue;
		}
	</style>
</head>
<body>
	<input type="text">
	<textarea name="" id="" cols="30" rows="10"></textarea>
	<p>下面是文字</p>
</body>
</html>

vertical-align 垂直对齐

让带有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是text-align: center;
vertical-align 垂直对齐
vertical-align: baseline/top/middle/bottom
设置或检索对象的垂直方式
（浏览器默认图片和文字基线对齐）
图片、表单（行内快元素）和文字对齐

注意：对于块级元素无效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 100px;
			background-color: blue; 
			margin-left: auto;
			margin-right: auto;   /*左右自动auto 盒子水平居中对齐*/
			text-align: center;   /*文字水平居中*/
			vertical-align: middle;   /*对于块级元素无效*/
		}
		img {
			/*vertical-align: baseline;  默认基线对齐*/
			vertical-align: middle;
			/*vertical-align: top;*/
		}
		textarea {
			width: 300px;
			height: 300px;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div>文字居中</div>
	<hr>
	<img src="1.png" alt="">123
	<hr>
	用户留言：<textarea></textarea>
</body>
</html>

去除图片低测空白缝隙

图片或者表单等行内快元素，他的底线会和父级盒子的基线对齐。这样图片低侧会有一个空白缝隙。
解决方法:
1.给img vertical-align: midde/top 等等。让图片不要和基线对齐。
2.给img添加display: block; 转换为块级元素就不会存在问题了。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 222px;
			height: 220px;
			background-color: blue; 
		}
		img {
			/*display: block;  转换为块级元素*/
			vertical-align: top;   /*也可middle  但用的最多的是top*/
		}
	</style>
</head>
<body>
	<img src="ad-l.png" height="220" width="222" alt="">
</body>
</html>

时松

关注

0
点赞
踩
1

收藏

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

所谓界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等，但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们放弃了，防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状cursor: default小白/pointer 小手/move 移动/text 文本千万不要用hand 因为火狐不支持pointer ie6以上都支持的...
复制链接

扫一扫