给你的halo博客添加一个歌单页(spotify)
给你的halo博客添加一个歌单页
一、步骤
在console里新建一个页面，插入html编辑块填入
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.container iframe {
flex: 1 0 45%;
height: 352px;
border: none;
border-radius: 12px;
margin: 10px;
}
@media (max-width: 600px) {
.container iframe {
flex: 1 0 100%;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="container">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/28vJJVbHWwvlOevYYL0sjc?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2BVMUg4l5tQzynyZ8VrYg0?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</body>
</html>这里的
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/28vJJVbHWwvlOevYYL0sjc?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
是你要嵌入的曲目，我用的是spotify
二、预览
可以根据设备尺寸调整布局
- 1
- 4
-
分享