css之练习正方形里面的5个元素

最新推荐文章于 2024-07-23 14:51:29 发布

澳神弱爆

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量281

点赞数

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/asrbily/article/details/122286277

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#a1{/*id选择器*/
				width: 300px;
				height: 300px;
				border: 1px solid red;
				margin:  auto ;
				position: relative;
				top: 30px;
				
			}
			a{/*标签选择器*/
				width: 100px;
				height: 100px;
				background: pink;
				text-decoration: none;
				/*改为块元素
				 */
				display: block;
				text-align: center/*字体在中间,但是上下还没有在中间*/;
				line-height: 100px;/*行间距  一共100，设置100就是在中间*/  
				color: black;
				border-radius: 10px;
			}
			a:hover{
				background: deepskyblue;
			}
			.k2,.k4{
				position: relative;/*相对定位*/
				left:200px;
				top:-100px;
				
			}
			.k5{
				position: relative;/*相对定位*/
				left:100px;
				top:-300px;
			}
		</style>
	</head>
	<body>
		<div id="a1">
			<a class="k1" href="#">链接1</a>
			<a class="k2" href="#">链接2</a>
			<a class="k3" href="#">链接3</a>
			<a class="k4" href="#">链接4</a>
			<a class="k5" href="#">链接5</a>
		</div>
	</body>
</html>

效果图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

澳神弱爆

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css之练习正方形里面的5个元素

直接上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #a1{/*id选择器*/ width: 300px; height: 300px; border: 1px solid red; margin: auto ; position: relati.
复制链接

扫一扫