Css相对定位小测试题

最新推荐文章于 2024-10-13 09:58:25 发布

听风说你！

最新推荐文章于 2024-10-13 09:58:25 发布

阅读量164

点赞数

文章标签： css sass html

本文链接：https://blog.csdn.net/m0_47801930/article/details/123559220

版权

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/demo03.css">
</head>
<body>
<div class="father">
    <div id="d1"><a href="">链接1</a></div>
    <div id="d2"><a href="">链接2</a></div>
    <div id="d3"><a href="">链接3</a></div>
    <div id="d4"><a href="">链接4</a></div>
    <div id="d5"><a href="">链接5</a></div>
</div>
</body>
</html>

CSS代码如下:

.father {
    border: 2px solid red;
    overflow: hidden;
    padding: 10px;
    width: 300px;
    height: 300px;
}

a {
    text-decoration: none;
    color: white;
}

div[id] {
    width: 100px;
    height: 100px;
    background-color: plum;
    text-align: center;
    line-height: 100px;
}

#d2 {
    position: relative;
    top: -100px;
    left: 200px;
}



#d4 {
    position: relative;
    top: -100px;
    left: 200px;
}

#d5 {
    position: relative;
    top: -300px;
    left: 100px;
}

#d1:hover {
    background-color: #0000FF;
}


#d2:hover {
    background-color: #0000FF;
}

#d3:hover {
    background-color: #0000FF;
}

#d4:hover {
    background-color: #0000FF;
}

#d5:hover {
    background-color: #0000FF;
}