<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="icon" href="favicons/1.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="header">
<div class="header-container">
<div class="header-top">
<a href="#" class="logo"></a>
<nav class="header-nav">
<ul>
<li><a href="#" class="header-nav__cur">音乐馆</a></li>
<li><a href="#">我的音乐</a></li>
<li><a href="#">下载客户端</a></li>
<li><a href="#">VIP</a></li>
</ul>
</nav>
<div class="header-search">
<input type="text" class="text" placeholder="here...">
<div class="btn"><i class="icon-sprite"></i></div>
<div class="result">
<a href="#" class="result-item">
<span class="rank">1</span>
<span class="title">默</span>
<span class="num">3.4万</span>
</a>
<a href="#" class="result-item">
<span class="rank">2</span>
<span class="title">侧田</span>
<span class="num">3.4万</span>
</a>
<a href="#" class="result-item">
<span class="rank">3</span>
<span class="title">让我留在你身边</span>
<span class="num">3.4万</span>
</a>
<a href="#" class="result-item">
<span class="rank">4</span>
<span class="title">皮皮虾我们走</span>
<span class="num">3.4万</span>
</a>
<a href="#" class="result-item">
<span class="rank">5</span>
<span class="title">欢乐好声音</span>
<span class="num">3.4万</span>
</a>
<div class="history">
<span>搜索历史</span>
<i class="icon-sprite"></i>
</div>
</div>
</div>
<div class="header-login">
<a href="#" class="login">Login</a>
<a href="#" class="open-green">开通绿钻豪华版</a>
<a href="#" class="open-vip">开通付费包</a>
</div>
</div>
<ul class="header-subNav">
<li><a href="#" class="subNav-cur">首页</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="#">MV</a></li>
</ul>
</div>
</header>
<!-- 新歌首发 -->
<div class="main" id="newSong">
<div class="main-inner">
<div class="main-title">
<h2 class="title"><i></i></h2>
<span class="line line-left"></span>
<span class="line line-right"></span>
</div>
<a href="#" class="readAll">全部<i class="icon-sprite"></i></a>
<div class="main-tab tab-title">
<a href="javascript:;" class="item item-cur">全部</a>
<a href="javascript:;" class="item">华语</a>
<a href="javascript:;" class="item">欧美</a>
<a href="javascript:;" class="item">韩国</a>
<a href="javascript:;" class="item">日本</a>
</div>
<div class="main-slider tab-cont">
<ul class="slider-wrapper">
<li>
<a href="#" class="img">
<img src="images/cont/slider_img1.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img2.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img3.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img4.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img1.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img2.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img3.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img4.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
</li>
<li>
<a href="#" class="img">
<img src="images/cont/slider_img1.jpg" alt="#">
<span class="mask"></span>
<i class="icon-play"></i>
</a>
<div class="info">
<div class="title">
<a href="#">那个静默的阳光午后</a>
<i class="icon-sprite"></i>
</div>
<a href="#" class="author">范玮琪</a>
</div>
网页设计作业-音乐网站首页
6 浏览量
2023-11-25
20:34:20
上传
评论 1
收藏 534KB ZIP 举报
音乐网站首页.zip （47个子文件） 
简洁大气的KK音乐官网模板html源码 js 
jquery.min.js 91KB script.js 7KB css reset.css 630B index.css 19KB
index.html 29KB images Thumbs.db 13KB
logo.png 2KB footer_icons.png 6KB main_title.png 9KB icon_sprite.png 12KB icon_play.png 1KB cont 
carousel_img4.jpg 41KB slider_img5.jpg 11KB slider_img17.jpg 10KB slider_img18.jpg 15KB newSong_bg.jpg 34KB slider_img7.jpg 10KB Thumbs.db 8KB mv_img7.jpg 6KB slider_img14.jpg 5KB mv_img6.jpg 4KB mv_img3.jpg 5KB carousel_img1.jpg 27KB slider_img13.jpg 5KB slider_img8.jpg 5KB carousel_img3.jpg 31KB slider_img15.jpg 7KB slider_img3.jpg 10KB slider_img10.jpg 6KB mv_img1.jpg 6KB slider_img9.jpg 4KB carousel_img5.jpg 22KB carousel_img6.jpg 37KB rank_bg.jpg 25KB mv_img2.jpg 6KB slider_img4.jpg 10KB slider_img2.jpg 6KB slider_img16.jpg 12KB mv_img4.jpg 6KB slider_img11.jpg 9KB slider_img1.jpg 12KB rank_list_bg.jpg 20KB carousel_img2.jpg 38KB mv_img8.jpg 8KB slider_img6.jpg 4KB slider_img12.jpg 10KB mv_img5.jpg 5KB资源评论
