CSS-小练习
2022-06-15 本文已影响0人
测试探索
预期结果
image.png
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="div0">
<div class="div1">
<div class="div2">5</div>
<img class = "img1" src = "../image/5.png">
</div>
</div>
</body>
</html>
index.css
.div0{
width: 500px;
height: 300px;
position: relative;
background-color: #667766;
top: 150px;
left: 300px;
}
.img1{
width: 45px;
height: 45px;
position: absolute;
bottom: 10px;
right: 30px;
}
.div1{
width: 300px;
height: 200px;
background-color: red;
top: 60px;
left: 80px;
position: absolute;
}
.div2{
width: 30px;
height: 45px;
background-color: blue;
border-radius: 20px/30px;
text-align: center;
line-height: 45px;
color: white;
top: -10px;
left: -10px;
position: absolute;
}
