制作网页页面
代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 970px;
height: 3000px;
border: 1px solid red;
margin: auto;/*margin:auto 将box1自动居中*/
}
.box1{
width: 200px;
height: 260px;
border: 0px solid red;
box-shadow: 2px 2px 2px 2px #999;/*制作阴影部分*/
float: left;/* float: left 使标签向左聚集(浮动)*/
margin: 20px 20px 20px 20px;/*根据 上 右 下 左 的顺序*/
}
.box2{
width: 200px;
height: 200px;
border: 0px solid red;
}
.box1:hover .box3{ /*鼠标移动到box1区域时显示透明部分*/
display: block;
}
.box5{
border: 0px solid rgb(11, 11, 11);
position: relative;/* 相对定位*/
}
.box3{
width: 200px;
height: 40px;
border: 0px solid red;
position: absolute;/* 绝对定位*/
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);/* 透明色*/
color: #dad7d7;
line-height: 40px;
display: none;/* 将透明框隐藏*/
}
.clear_float{
clear: both;/* 清除浮动*/
}
</style><!--  相当于一个空格 -->
</head>
<body>
<div class="box">
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
<div class="box1">
<div class="box5">
<img class="box2" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
<div class="box3"> 播放量30000+</div>
</div>
<p class="box4">1234567</p>
</div>
</div>
</body>
</html>运行结果:
