QQ音乐简洁版网页制作代码
时间: 2023-12-20 12:29:01 浏览: 180
web课程设计之qq音乐界面
5星 · 资源好评率100%
以下是QQ音乐简洁版网页制作代码,包含HTML、CSS和JavaScript文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QQ音乐简洁版</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>QQ音乐</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">排行榜</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">分类</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>热门歌曲</h2>
<ul>
<li>
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M0000039MnYb3BqJrN.jpg?max_age=2592000" alt="歌曲封面">
<h3>歌曲名称</h3>
<p>歌手名称</p>
</li>
<!-- 其他歌曲 -->
</ul>
</section>
<section>
<h2>新歌推荐</h2>
<ul>
<li>
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M0000039MnYb3BqJrN.jpg?max_age=2592000" alt="歌曲封面">
<h3>歌曲名称</h3>
<p>歌手名称</p>
</li>
<!-- 其他歌曲 -->
</ul>
</section>
</main>
<footer>
<p>版权信息</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 40px;
}
section h2 {
margin-bottom: 20px;
}
section ul {
display: flex;
flex-wrap: wrap;
}
section li {
margin-right: 40px;
margin-bottom: 40px;
width: 200px;
}
section img {
width: 100%;
}
section h3 {
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
}
section p {
color: #999;
font-size: 14px;
}
```
```javascript
// JavaScript代码可以根据需要添加
```
阅读全文