web前端第六次作业---制作网页页面

自由的羽毛 · 2025-1-14 16:05:20

制作网页页面

代码:

<!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>

复制代码

运行效果:

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

web前端第六次作业---制作网页页面

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云