用html写一个关于网抑云的治愈网页代码
时间: 2023-10-04 21:09:11 浏览: 76
用ChatGPT写代码是一种什么样的体验.docx
5星 · 资源好评率100%
<!DOCTYPE html>
<html>
<head>
<title>网抑云治愈站</title>
<meta charset="UTF-8">
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f9c2ff;
padding: 20px;
text-align: center;
}
h1 {
font-size: 50px;
margin: 0;
}
nav {
background-color: #e7e7e7;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #000;
font-size: 20px;
text-decoration: none;
}
main {
padding: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.card {
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: 10px;
text-align: center;
padding: 20px;
}
.card img {
max-width: 100%;
height: auto;
}
.card h2 {
font-size: 24px;
margin: 10px 0;
}
.card p {
font-size: 18px;
margin: 10px 0;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>网抑云治愈站</h1>
<p>一起来放松一下吧!</p>
</header>
<nav>
<ul>
<li><a href="#music">音乐</a></li>
<li><a href="#video">视频</a></li>
<li><a href="#picture">图片</a></li>
</ul>
</nav>
<main>
<div class="card">
<img src="https://i.loli.net/2021/11/02/dH5OLZr3NwK1jzJ.jpg" alt="音乐">
<h2 id="music">音乐</h2>
<p>听一些轻柔的音乐,让自己的心情变得平静。</p>
<audio controls>
<source src="https://m10.music.126.net/20211102100844/2f2c1c2dca21e18cad7a906f4f9d8a08/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/8912340972/6f1a/ae99/6e49/60f8c0d8d6b2c2d1fda5a5b5e8d5c5ac.mp3" type="audio/mpeg">
</audio>
</div>
<div class="card">
<video controls>
<source src="https://vdept.bdstatic.com/376b6d6554566c717a6f6336396c6f6e/724b4a425a444d6b/aae62e7b32c4b6e56b0c1d9f0709e4d4c7f4a86a3a4cbf4b06cfa7ba42d2c9d7fbca700c2d2f5988d0df75252b6e7f6.mp4?auth_key=1635819041-0-0-55bead4f7a3ce3a0b4d0e4d8d7ba9bb2" type="video/mp4">
</video>
<h2 id="video">视频</h2>
<p>看一些可爱的小动物视频,让自己的心情变得温暖。</p>
</div>
<div class="card">
<img src="https://i.loli.net/2021/11/02/ABmJb9zU6FRyMkE.jpg" alt="图片">
<h2 id="picture">图片</h2>
<p>欣赏一些美丽的风景图片,让自己的心情变得舒畅。</p>
</div>
</main>
<footer>
<p>网抑云治愈站 © 2021</p>
</footer>
</body>
</html>
阅读全文