关于htmlcss的笔记

Posted at 2019-04-22 周边技术笔记

1、固定悬浮框

核心语法：

1 2	position:fixed; z-index:99;

固定在右上方

/*固定在右上方*/
.fixedRight{
	background-color: limegreen;
	height: 200px;
	width: 200px;
	position: fixed!important;
	right: 20px;
	top:20px;
	z-index: 99;
}

只要改变right、left、top、bottom的值便可以得到自己想要得

底部悬浮

只需更改bottom的值，调左右便可以了


/*固定在底部*/
.fixedBottom{
	background-color: greenyellow;
	position: fixed;
	height: 40px;
	width: 100%;
	bottom: 0px;
	left: 20px;
	z-index: 99;
}

2、居中

/*居中*/
.center{
	display:-webkit-flex;
	-webkit-justify-content:center;
	-webkit-align-items: center;
}

随鼠标移动的悬浮框的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
	#floatDiv{
		position: absolute;
		height: 40px;
		width: 150px;
		background-color: deepskyblue;
	}
	</style>
	<body>
		<div id="floatDiv" style="">
			我是悬浮的
		</div>
	</body>
	<script>
		document.onmousemove=function(even){
			// 获得当前鼠标的坐标，设置浮动框坐标为鼠标坐标
			var floatDiv = document.getElementById("floatDiv");
			floatDiv.style.top = even.clientY +"px";
			floatDiv.style.left = even.clientX+"px";
		}
	</script>
</html>

雷姆蓝

#91bef0

Previous post: 爬取B站的视频链接 Next post: 数据库实验代码

long blogs

进一步有进一步惊喜

1、固定悬浮框

2、居中

随鼠标移动的悬浮框的实现

雷姆蓝