请简单的帮我做一个音乐网站里面的新歌页面并做一些样式

好的，以下是一个简单的新歌页面设计和样式：

1. 新歌列表

在页面的主体区域展示新歌列表，按照发布日期或者热度排序，每首歌曲展示一张封面图和歌曲名字，用户点击可以进入歌曲播放页面。在页面右上角增加一个排序选项，让用户可以根据自己的需求选择排序方式。

2. 歌曲推荐

在新歌列表下方增加歌曲推荐区域，根据用户的喜好和历史听歌记录，推荐一些类似的歌曲，提高用户体验和留存率。

3. 歌曲分类

在页面的侧边栏增加歌曲分类，根据歌曲的风格和类型进行分类，比如流行、摇滚、电子、民谣等，方便用户快速找到自己喜欢的歌曲。

4. 歌手介绍

在页面的侧边栏增加歌手介绍，针对每位歌手，提供一些基本的介绍和歌曲列表，方便用户了解和深入了解自己喜欢的歌手。

5. 歌曲排行榜

在页面的侧边栏增加歌曲排行榜，根据用户的收听量和评分，展示一些热门歌曲或者榜单，提高用户互动性和用户留存率。

6. 社交分享和评论功能

在页面底部增加社交分享和评论功能，方便用户和好友互动和分享自己喜欢的音乐。

以下是样式：

/* 新歌列表样式 */
.new-song-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0;
}

.new-song-item {
  width: 30%;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.new-song-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.new-song-item h3 {
  font-size: 16px;
  margin: 10px;
  text-align: center;
}

/* 推荐歌曲样式 */
.recommended-song {
  margin: 20px 0;
}

.recommended-song h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.recommended-song-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.recommended-song-item {
  width: 20%;
  margin-bottom: 20px;
  text-align: center;
}

.recommended-song-item img {
  width: 80%;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.recommended-song-item h3 {
  font-size: 14px;
  margin: 10px 0;
}

/* 歌曲分类样式 */
.song-category {
  margin: 20px 0;
}

.song-category h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.song-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.song-category-item {
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.song-category-item:hover {
  color: #f00;
}

/* 歌手介绍样式 */
.singer-intro {
  margin: 20px 0;
}

.singer-intro h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.singer-intro-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.singer-intro-item {
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.singer-intro-item:hover {
  color: #f00;
}

/* 歌曲排行榜样式 */
.song-ranking {
  margin: 20px 0;
}

.song-ranking h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.song-ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.song-ranking-item {
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.song-ranking-item:hover {
  color: #f00;
}

/* 社交分享和评论样式 */
.social-share {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.social-share .share-buttons {
  display: flex;
}

.social-share .share-buttons button {
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.social-share .share-buttons button:hover {
  background-color: #fff;
  color: #f00;
}

.social-share .comment-box {
  width: 60%;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
}

.social-share .comment-button {
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.social-share .comment-button:hover {
  background-color: #fff;
  color: #f00;
}