【CSS】相对位置小练习

要求：

小练习案例

成果：

练习成果

代码：

<!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;
}
/*给所有a类创建伪类，使鼠标移动到指定位置变色*/
.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;
}