看完html+css的小项目

最新推荐文章于 2024-09-07 18:42:16 发布

invincible3ai

最新推荐文章于 2024-09-07 18:42:16 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_42057469/article/details/102761885

版权

看完html+css的小项目

1.滑动小方块
实现多个div盒子横排列，鼠标点上去后显示border，相连的border合并。
利用position：relative的层级比标准流高（后来居上原则），与 margin-left：-1px；
若都有position：relative 利用z-index提高层级

效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 31.25rem;
				height: 31.25rem;
				/**设置外边框*/
				margin:0 auto;
				border: 0.125rem solid brown;

			
			}
			/**设置内部小方块*/
			.box1 div{
				width:100px;
				height: 120px;
				float: left;
				border: 0.125rem solid beige;
				margin: 0.125rem;
			}
			/**利用伪类来设置鼠标放上去后的效果**/
			.box1 div:hover{
				border: 2px solid aqua;
				position: relative;
				background-image: url(img/04.jpg);
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		
	</body>
</html>