给我写一个像抖音列表那样的展示页 只需要静态页面及代码
时间: 2024-04-11 22:32:41 浏览: 16
下面是一个简单的静态页面代码示例,展示了一个类似于抖音列表的样式:
```html
<!DOCTYPE html>
<html>
<head>
<title>抖音列表展示页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.video-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.video-item {
width: 300px;
height: 400px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.video-item img {
width: 100%;
height: 70%;
object-fit: cover;
}
.video-item .video-info {
padding: 10px;
}
.video-item .video-info h3 {
margin: 0;
font-size: 16px;
}
.video-item .video-info p {
margin: 5px 0;
font-size: 14px;
}
</style>
</head>
<body>
<div class="video-container">
<div class="video-item">
<img src="video1.jpg" alt="Video 1">
<div class="video-info">
<h3>视频标题1</h3>
<p>作者:用户1</p>
<p>播放量:1000</p>
</div>
</div>
<div class="video-item">
<img src="video2.jpg" alt="Video 2">
<div class="video-info">
<h3>视频标题2</h3>
<p>作者:用户2</p>
<p>播放量:2000</p>
</div>
</div>
<div class="video-item">
<img src="video3.jpg" alt="Video 3">
<div class="video-info">
<h3>视频标题3</h3>
<p>作者:用户3</p>
<p>播放量:3000</p>
</div>
</div>
<!-- 添加更多视频项... -->
</div>
</body>
</html>
```
在上面的代码中,我们使用了简单的HTML和CSS来创建一个类似于抖音列表的展示页面。每个视频项都包含一个图片、视频信息和一些文本内容。你可以根据需要添加更多的视频项,只需复制并修改相应的代码块即可。请注意,这只是一个静态页面示例,你可能需要进一步添加交互和动态内容来实现更完整的功能。