1.HTML代码`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/练习2.css"/>
</head>
<body>
<div class="box">
<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a><a href="#">链接5</a><area shape="" coords="" href ="" alt="" />
</div>
</body>
</html>
在这里插入代码片
css代码
.box {
width: 300px;
height: 300px;
border: 2px solid red;
}
.box a {
width: 100px;
right: 100px;
background-color: pink;
display: inline-block;
text-align: center;
line-height: 100px;
text-decoration: none;
}
.box a:hover{
background-color: #00FFFF;
}
.box a:nth-of-type(3){
position: relative;
left: -200px;
top: 200px;
}
.box a:nth-of-type(2){
position: relative;
right: -100px;
}
.box a:nth-of-type(4){
position: relative;
left: 200px;
bottom: -100px;
}
3效果展示
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
