生成一个html加css的qq音乐页面
时间: 2023-08-02 21:11:39 浏览: 56
好的,我可以为你生成一个简单的QQ音乐页面示例,以下是HTML和CSS代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>QQ音乐</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>QQ音乐</h1>
</header>
<nav>
<ul>
<li><a href="#">音乐</a></li>
<li><a href="#">MV</a></li>
<li><a href="#">排行榜</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">专辑</a></li>
<li><a href="#">分类歌单</a></li>
<li><a href="#">我的音乐</a></li>
</ul>
</nav>
<main>
<section class="search">
<form>
<input type="text" placeholder="搜索音乐、MV、歌词、用户">
<button type="submit">搜索</button>
</form>
</section>
<section class="hot-songs">
<h2>热门歌曲</h2>
<ul>
<li><a href="#">歌曲1</a></li>
<li><a href="#">歌曲2</a></li>
<li><a href="#">歌曲3</a></li>
<li><a href="#">歌曲4</a></li>
<li><a href="#">歌曲5</a></li>
</ul>
</section>
<section class="new-albums">
<h2>新碟上架</h2>
<ul>
<li><a href="#">专辑1</a></li>
<li><a href="#">专辑2</a></li>
<li><a href="#">专辑3</a></li>
<li><a href="#">专辑4</a></li>
<li><a href="#">专辑5</a></li>
</ul>
</section>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #c40000;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #d9d9d9;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
nav li {
margin-right: 10px;
}
nav a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav a:hover {
background-color: #fff;
color: #c40000;
}
main {
padding: 20px;
}
.search input[type="text"] {
padding: 10px;
border: none;
border-radius: 20px;
width: 80%;
}
.search button[type="submit"] {
padding: 10px 20px;
background-color: #c40000;
color: #fff;
border: none;
border-radius: 20px;
margin-left: 10px;
cursor: pointer;
}
.hot-songs ul,
.new-albums ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.hot-songs li,
.new-albums li {
margin-right: 20px;
margin-bottom: 20px;
}
.hot-songs a,
.new-albums a {
display: block;
color: #333;
text-decoration: none;
}
.hot-songs a:hover,
.new-albums a:hover {
color: #c40000;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
你可以将上述代码复制到一个HTML文件和一个CSS文件中,然后用浏览器打开HTML文件,即可查看效果。