九宫格

最新推荐文章于 2022-07-14 10:36:45 发布

石倩蓉

最新推荐文章于 2022-07-14 10:36:45 发布

阅读量673

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/shiqianrongcsdn/article/details/46917033

版权

css 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

<!--
九宫格：border-width:5px，格子大小是 50px*50px，hover时边框变成红色。
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
/*text-align属性只能针对文本文字和img标签，对其他标签无效*/
body {text-align: center;}
div{
	width:170px;
	height:170px;
	margin:50px auto;
}
a{
	display:block;
	float:left;
	width:50px;
	height:50px;
	border:5px solid green;
	margin:0 -5px -5px 0;
	z-index:1;
	position:relative;

	line-height:50px;
}
a:hover{
	/*z-index 属性设置元素的堆叠顺序,只能在定位元素上生效*/
	z-index:2;
	border-color:red;
}
</style>
</head>
<body>
<div>
 <a href="#">1</a> 
 <a href="#">2</a> 
 <a href="#">3</a> 
 <a href="#">4</a>
 <a href="#">5</a> 
 <a href="#">6</a> 
 <a href="#">7</a>
 <a href="#">8</a> 
 <a href="#">9</a> 
</div>
</body>
</html>

石倩蓉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
九宫格

* { padding: 0; margin: 0;}/*text-align属性只能针对文本文字和img标签，对其他标签无效*/body {text-align: center;}div{ width:170px; height:170px; mar
复制链接

扫一扫