您的位置：首页 > 其它

相对定位和绝对定位的练习

2017-04-26 19:09 134 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
height: 300px;
background-color: #ff7300;
position: relative;
}
#content{
width: 306px;
height: 142px;
background-image: url("../img/duo.png");
position: absolute;
left: 50%;
bottom: 0;
margin-left: -153px;
}
#div1 {
background-image: url("../img/duo1.png");
position: absolute;
width: 108px;
height: 117px;
top: 25px;
left: -1px;
opacity: 0;
}
#div2 {
background-image: url("../img/duo2.png");
position: absolute;
width: 117px;
height: 109px;
top: -25px;
left: 45px;
opacity: 0;
}
#div3 {
background-image: url("../img/duo3.png");
position: absolute;
width: 115px;
height: 108px;
top: -26px;
left: 159px;
opacity: 0;
}
#div4 {
background-image: url("../img/duo4.png");
position: absolute;
width: 97px;
height: 110px;
top: 31px;
left:219px;
opacity:0 ;

}
#div4:hover{
opacity: 1;

}

#div3:hover{
opacity: 1;

}

#div2:hover{
opacity: 1;

}

#div1:hover{
opacity: 1;

}

</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</div>
</body>

</html>

当在页面中调整图片距离的时候，可在页面效果中f12查看代码，选择左上角的选择按钮

然后去点击想要调整位置的图片，这样就找到了该图片的属性位置

然后调节top，left等属性，等找到了自己想要的位置，记下此时的数字，回到代码中调节到这个位置即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 相对定位和绝对定位的练习

相关文章推荐

新的分享

章节导航