427 lines
16 KiB
HTML
427 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>千千音乐</title>
|
|
|
|
|
|
<!-- 顶部菜单css -->
|
|
<link rel="stylesheet" type="text/css" href="./css/menu.css">
|
|
<!-- 中间滚动内容css -->
|
|
<link rel="stylesheet" type="text/css" href="./css/content.css">
|
|
<!-- 底部css -->
|
|
<link rel="stylesheet" type="text/css" href="./css/bottom.css">
|
|
<!-- 阿里巴巴图标 -->
|
|
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2003214_w8dyx5dqp4.css">
|
|
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2003214_qdqhbpyjlm.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 顶部菜单 -->
|
|
<div class="menus">
|
|
<!-- 头部上部分 -->
|
|
<div class="menus_top">
|
|
<div class="menus_content">
|
|
<div class="logo_box">
|
|
<img src="./images/logo.png" alt="">
|
|
</div>
|
|
<!-- 顶部上部分菜单 -->
|
|
<div class="menus_box">
|
|
<ul>
|
|
<li><a href="#" class="block">发现音乐</a></li>
|
|
<li><a href="#" class="change_block">随心听</a></li>
|
|
<li><a href="#" class="change_block">客户端</a></li>
|
|
<li><a href="#" class="change_block">VIP</a></li>
|
|
<li><a href="#" class="change_block">音乐人</a></li>
|
|
<li><a href="#" class="change_block">演出</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- 搜索框 -->
|
|
<div class="search_box">
|
|
<input placeholder="请输入歌名、歌词、歌手或专辑">
|
|
</div>
|
|
<!-- 登录 -->
|
|
<div class="login_box">
|
|
<a href="#">登录</a>
|
|
<li>|</li>
|
|
<a href="#">注册</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 头部下部分 -->
|
|
<div class="menus_bottom">
|
|
<div class="menus_bottom_content">
|
|
<ul>
|
|
<li><a href="#" class="red">推荐</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>
|
|
<li><a href="#">U榜</a></li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 中间滚动内容 -->
|
|
<div class="content">
|
|
<!-- 第一行内容 -->
|
|
<div class="content_1">
|
|
<!-- 第一行内容左边 -->
|
|
<div class="content_1_left">
|
|
<!-- 标题 -->
|
|
<div class="tiltle_div">
|
|
<div class="h2_mode">
|
|
<h3>热门歌单</h3>
|
|
<p>更多</p>
|
|
</div>
|
|
<img src="./images/内容1.PNG">
|
|
</div>
|
|
<!-- 下面的图片外框 -->
|
|
<div class="content_1_left_content">
|
|
<!-- 图片文字模板 -->
|
|
<div class="content_1_left_content_img">
|
|
<div class="c1_l_img_div">
|
|
<a href="#">
|
|
<img src="./images/1-L-(1).jpg">
|
|
<div><i class="iconfont icon-bofang"></i></div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
|
|
|
|
|
|
</div>
|
|
<!-- 图片文字模板 -->
|
|
<div class="content_1_left_content_img">
|
|
<div class="c1_l_img_div">
|
|
<a href="#">
|
|
<img src="./images/1-L-(2).jpg">
|
|
<div><i class="iconfont icon-bofang"></i></div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
|
|
|
|
|
|
</div>
|
|
<!-- 图片文字模板 -->
|
|
<div class="content_1_left_content_img">
|
|
<div class="c1_l_img_div">
|
|
<a href="#">
|
|
<img src="./images/1-L-(3).jpg">
|
|
<div><i class="iconfont icon-bofang"></i></div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
|
|
|
|
|
|
</div>
|
|
<!-- 图片文字模板 -->
|
|
<div class="content_1_left_content_img">
|
|
<div class="c1_l_img_div">
|
|
<a href="#">
|
|
<img src="./images/1-L-(4).jpg">
|
|
<div><i class="iconfont icon-bofang"></i></div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
|
|
|
|
|
|
</div>
|
|
<!-- 图片文字模板 -->
|
|
<div class="content_1_left_content_img">
|
|
<div class="c1_l_img_div">
|
|
<a href="#">
|
|
<img src="./images/1-L-(5).jpg">
|
|
<div><i class="iconfont icon-bofang"></i></div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
|
|
|
|
|
|
</div>
|
|
<!-- 图片文字模板 -->
|
|
<div class="content_1_left_content_img">
|
|
<div class="c1_l_img_div">
|
|
<a href="#">
|
|
<img src="./images/1-L-(1).jpg">
|
|
<div><i class="iconfont icon-bofang"></i></div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<a class="content_1_left_content_txt">歌单-防弹少年团BTS</a>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第一行内容右边 -->
|
|
<div class="content_1_right">
|
|
<div class="h2_mode">
|
|
<h3>热门歌单</h3>
|
|
<p>更多</p>
|
|
</div>
|
|
<!-- 第一行右边上面 -->
|
|
<div class="content_1_right_top">
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="right_top_txt">情歌</div>
|
|
</a>
|
|
</div>
|
|
<!-- 第一行右边下面 -->
|
|
<div class="content_1_right_bottom">
|
|
<div class="h2_mode">
|
|
<h3>推荐电台</h3>
|
|
<p>更多</p>
|
|
</div>
|
|
<div class="right_bottom_bottom">
|
|
<ul>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="bottom_bg_div">
|
|
<i class="iconfont icon-xianxingbolang"></i>
|
|
</div>
|
|
<div class="bottom_shadow">
|
|
<i class="iconfont icon-bofang"></i>
|
|
</div>
|
|
<!-- 文字 -->
|
|
|
|
<p>
|
|
随便听听
|
|
</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 第二行内容 -->
|
|
<div class="content_2">
|
|
<div class="c2_img">
|
|
<img src="./images/c2- (1).jpg" alt="">
|
|
<img src="./images/c2- (2).jpg" alt="">
|
|
<img src="./images/c2- (3).jpg" alt="">
|
|
</div>
|
|
<div class="c2_click_l">
|
|
<a href=""><</a>
|
|
</div>
|
|
<div class="c2_click_r">
|
|
<a href="">></a>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<!-- 第三行内容 -->
|
|
<div class="content_3">
|
|
<div class="c3_content">
|
|
<div class="h2_mode">
|
|
<h3>推荐电台</h3>
|
|
<p>更多</p>
|
|
</div>
|
|
<div>
|
|
<!-- 图片文字模板 -->
|
|
<div class="content_1_left_content_img">
|
|
<div class="c1_l_img_div">
|
|
<a href="#">
|
|
<img src="./images/1-L-(3).jpg">
|
|
<div><i class="iconfont icon-bofang"></i></div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="c3_r">
|
|
|
|
</div>
|
|
<a class="content_1_left_content_txt c3_txt">歌单-防弹少年团BTS</a>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="c2_click_l c3">
|
|
<a href=""><</a>
|
|
</div>
|
|
<div class="c2_click_r c3">
|
|
<a href="">></a>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 第四行内容 -->
|
|
<div class="content_4">
|
|
</div>
|
|
<!-- 第五行内容 -->
|
|
<div class="content_5">
|
|
</div>
|
|
<!-- 第六行内容 -->
|
|
<div class="content_6">
|
|
</div>
|
|
<!-- 第七行内容 -->
|
|
<div class="content_7">
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- 底部 -->
|
|
<div class="bottom">
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html> |