用《CSS定位装饰》文章里的内容完成各案例
一、图标定位
效果展示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
position: relative;
left: 50px;
top: 100px;
width: 400px;
height: 300px;
background-color: rgb(130, 233, 181);
}
.father img:first-child{
width: 400px;
height: 300px;
}
.father img:last-child{
position: absolute;
right: 20px;
bottom: 30px;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="father">
<img src="./images/9.jpeg" alt="">
<img src="./images/gotop.png" alt="">
</div>
</body>
</html>
二、图片定位及显示隐藏切换
效果展示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
border-bottom: 1px solid #ccc;
}
ul {
list-style: none;
width: 1200px;
margin: 0 auto;
}
ul li {
float: left;
width: 20%;
height: 40px;
border-right: 1px solid #ccc;
/* 自动内减 */
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
ul .last {
border-right: none;
}
ul li a {
display: block;
height: 40px;
text-decoration: none;
color: #000;
}
.app{
position: relative;
}
img{
position: absolute;
top:41px;
left: 50%;
/* 位移居中 */
transform: translate(-50%);
display: none;
}
.app:hover img{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#" class="app">手机微金所<img src="./images/convenient1.png" alt=""></a></li>
<li class="last"><a href="#">个人中心</a></li>
</ul>
</div>
</body>
</html>
三、底部半透明遮罩效果
效果展示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 0 auto;
width: 711px;
height: 400px;
}
img {
width: 711px;
height: 400px;
}
.son{
position: absolute;
left:0;
bottom:0;
/* 绝对定位使标签变成行内块元素,因此需加宽度 */
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/1.jpg" alt="">
<div class="son"></div>
</div>
</body>
</html>
四、遮罩效果显示隐藏切换
效果展示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 20px auto;
width: 711px;
height: 400px;
border: 4px solid rgb(243, 156, 57);
}
.box > img {
width: 711px;
height: 400px;
}
/* 第一种方法 */
/* .son{
position: absolute;
left:0;
top:0; */
/* 绝对定位使标签变成行内块元素,因此需加宽度 */
/* width: 100%;
height: 100%;
}
.son:hover{
background: rgba(0, 0, 0, 0.5) url(./images/arr.png) no-repeat center;
} */
/* 第二种方法 */
.son{
position: absolute;
left:0;
top:0;
/* 绝对定位使标签变成行内块元素,因此需加宽度 */
width: 100%;
height: 100%;
display: none;
background: rgba(0, 0, 0, 0.5) url(./images/arr.png) no-repeat center;
}
.box:hover .son{
display: block;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/1.jpg" alt="">
<div class="son"></div>
</div>
</body>
</html>