练习
完成如图所示案例
Html页面具体实现
<Html>
<head>
<stylen type="text/css">
</style>
</head>
<body>
//最外边的边框
<div class="div0">
<div class="div1">
<div class="div2">5</div>
<img class=“img”src="img/shopping.jpg">
</div>
</div>
</body>
</Html>
复制代码CSS样式显示
.div{
width:500px;
height:500px;
//父类用的定位是相对定位
position:relative;
background-color:#` 667766;
top:150px;
left:300px;
}
.img{
width:25px;
height:25px;
//子类用绝对定位
position:absolute;
bottom:0px;
left:270px;
}
.div1{
width:300px;
height:200px;
background-color:red;
position:absolute;
top:50px;
left:100px;
}
.div2{
width:30px;
height:20px;
border-radius:30px/20px;
background-color:blue;
color：white;
text-align:center;
position:absolute;
top:-5px;
left:-5px;
line-height:20px;
}
复制代码总结：在于父div用相对定位，子div用绝对定位，便可以完成案例
转载于:https://juejin.im/post/5cfc912651882522d47f13ff