CSS_之絕對相對定位

時間 2019-12-07

標籤 css 絕對相對定位欄目 CSS 简体版

原文原文鏈接

練習

完成如圖所示案例css

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樣式顯示bash

.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用絕對定位，即可以完成案例ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。