要求：
成果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对位置小练习</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="Q1">
<a href="http://www.baidu.com" target="_blank" class="W1">百度</a>
<a href="http://www.google.com" target="_blank" class="W2">谷歌</a>
<a href="http://www.bing.com" target="_blank" class="W3">必应</a>
<a href="http://www.taobao.com" target="_blank" class="W4">淘宝</a>
<a href="http://www.jd.com" target="_blank" class="W5">京东</a>
</div>
</body>
</html>
.Q1{
width: 310px;
height: 310px;
border: #ff5000 3px solid;
}
.Q1 a:hover{
background: blue;
}
.Q1 a{
width: 100px;
height: 100px;
color: white;
text-decoration: none;
background: deeppink;
}
.W1{
display: inline-block;
margin: 5px 0 0 5px;
}
.W2{
display: inline-block;
margin: 5px 5px 0 0;
position: relative;
right: -95px;
}
.W3{
display: block;
margin: 5px 0 0 0;
position: relative;
right: -105px;
top: -5px
}
.W4{
display: inline-block;
margin: 0 0 5px 5px;
position: relative;
top: -5px
}
.W5{
display: inline-block;
margin: 0 5px 5px 0;
position: relative;
top: -5px;
right: -95px;
}