bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/css/bottom.css Normal file
View File

319
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/css/content.css Normal file
View File

@@ -0,0 +1,319 @@
.content{
width: 100%;
margin-top: 22px;
}
.content_1{
margin: 0 auto;
width: 1200px;
box-sizing: border-box;
display: flex;
}
.content_1_left{
/* overflow: hidden; */
width: 790px;
/* margin-right: 410px; */
float: right;
}
.tiltle_div{
display: flex;
width: 85%;
height: 38px;
justify-content: space-between;
align-items:center;
}
/* 标题h2模板 */
.h2_mode{
display: flex;
/* padding-bottom: 25px; */
align-items:baseline;
/* hei */
}
.h2_mode >h3{
font-size: 24px;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
font-weight:lighter ;
font-style: normal;
}
.h2_mode p{
font-weight:lighter ;
font-style: normal;
font-size: 14px;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
color: #999;
margin-left: 10px;
}
.tiltle_div img{
width: 46px;
height: 25px;
}
/* 左边内容 */
.content_1_left_content{
width: 820px;
/* height: 820px; */
display: flex;
flex-wrap: wrap;
}
/* 第一行左边图文模板 */
.content_1_left_content_img{
width: 173px;
display: block;
margin-bottom: 26px;
transition: all ease 1s;
margin-right: 20px;
}
.c1_l_img_div a{
overflow: hidden;
position: relative;
transition: all ease 1s;
}
.content_1_left_content_img img{
width: 173px;
height: 173px;
transition: all ease 1s;
}
.content_1_left_content_img a{
color: #333;
font-weight: lighter;
/* font-weight: 400; */
font-size: 14px;
margin-top: 10px;
display: block;
transition: all ease 1s;
}
.content_1_left_content_img:hover .content_1_left_content_txt{
font-weight: bolder;
}
.content_1_left_content_img:hover .c1_l_img_div div{
display: block;
transition: all ease 1s;
/* opacity: 1; */
}
.content_1_left_content_img:hover .c1_l_img_div img{
/* transition: all .5s linear 0s; */
transform: scale(1.1);
transition: all ease 1s;
}
.icon-bofang{
font-size: 30px !important;
color: #fff !important;
margin-top:7px;
margin-left: 10px;
display: inline-block;
}
.c1_l_img_div div{
width: 50px;
height: 50px;
border-radius: 50%;
background: #000;
opacity: 0.5;
position: absolute;
top: 50%;
left: 50%;
margin-top: calc(-50px/2);
margin-left: calc(-50px/2);
display: none;
transition: all ease 1s;
}
.content_1_right{
width: 330px;
}
.content_1_right_top{
width: 330px;
display: flex;
flex-wrap: wrap-reverse;
margin-top: 20px;
}
.content_1_right a{
display: block;
color: #333;
/* font-weight: ligh; */
/* font-style: 12px; */
}
.right_top_txt{
width: 105px;
height: 42px;
border-radius: 40px;
margin-bottom: 15px;
border:1px solid #ededed;
text-align: center;
line-height: 42px;
transition: all 0.2s;
font-size: 14px;
}
.right_top_txt:hover{
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
}
/* 第一行右边底下 */
.content_1_right_bottom{
width: 330px;
margin-top: 10px;
}
.bottom_bg_div{
width: 50px;
height: 50px;
border-radius: 50%;
background: rgb(234, 78, 27);
box-shadow: 1 3px 4px 1 rgba(0,0,0,.1);
}
.bottom_bg_div{
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
}
.right_bottom_bottom ul{
display: flex;
flex-wrap: wrap-reverse;
margin-top: 0px;
/* margin-left: 0px; */
padding:0px;
}
.right_bottom_bottom ul li{
width: 25%;
margin: 10px 0px;
position: relative;
box-sizing: border-box;
}
.bottom_bg_div i{
/* text-align: center; */
/* line-height: 26px; */
padding-top: 10px;
padding-left: 13px;
display: block;
font-weight: bolder;
}
.bottom_shadow{
background: #000;
opacity: .5;
width: 50px;
height: 50px;
border-radius: 50%;
top:0px;
/* position; */
position: absolute;
display: none;
}
.bottom_shadow+p{
color: #333;
font-size: 14px;
margin-top: 10px;
}
.icon-xianxingbolang{
font-size: 26px !important;
color: #FFF
}
.right_bottom_bottom ul li:hover .bottom_shadow{
display: block;
/* opacity: none; */
}
/* 中间第二行 */
.content_2{
width: 100%;
height: 300px;
display: flex;
}
.c2_img{
display: flex;
overflow: hidden;
width: 1200px;
height: 300px;
margin:0 auto;
}
.c2_img img{
margin-left: 40px;
position: relative;
right: 600px;
}
.c2_click_l,.c2_click_r{
height: 64px;
width: 64px;
display: inline-block;
}
.c2_click_l{left: 70px;
top: 20px;
position: absolute;
}
.c2_click_l a,.c2_click_r a{
font-size: 100px;
color:#ccc;
font-weight: lighter;
position: absolute;
top: 780px;
}
.c2_click_r{
top: 20px;
right: 70px;
position: absolute;
}
.content_3{
width: 100%;
margin-top: 60px;
}
.c3_content{
width: 1200px;
margin:0 auto;
/* display: flex; */
}
.c3_r{
height: 40px;
width: 40px;
border-radius: 50%;
background: #fff;
position: relative;;
top:-110px;
right: -150px;
}
.h2_mode+div{
display: flex;
}
.c3_txt{
margin-top: 40px;
}
.content_4{}
.content_5{}
.content_6{}
.content_7{}

138
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/css/menu.css Normal file
View File

@@ -0,0 +1,138 @@
/* 头部菜单css */
body,p,h1,h2,h3,h4{
margin:0;
padding:0;
}
a{
text-decoration: none;
font-family: PingFangSC-Medium,poppin,Tahoma,Arial,sans-serif;
}
li{
list-style: none;
}
/* 头部宽度 */
.menus{
width: 100%;
}
.menus_top{
width: 100%;
/* margin-top: 27px; */
height: 95px;
}
.menus_content{
width: 1200px;
height: 95px;
display: flex;
margin: 0 auto;
align-items: center;
}
/* logo */
.logo_box{}
.logo_box img{
width: 123;
height: 41px;
}
/* 头上部菜单 */
.menus_box{}
.menus_box ul{
display: flex;
}
.menus_box ul li{
padding: 2px 17px 7px;
list-style: none;
}
.change_block{
color: #858585;
}
.change_block:hover{
color: #000;
}
.block{
color: #000;
margin:0px 20px;
}
/* 搜索 */
.search_box{}
.search_box [placeholder="请输入歌名、歌词、歌手或专辑"]{
border-radius: 8px;
width: 320px;
height: 34px;
box-sizing: border-box;
border: 1px solid #e4e4e4;
padding-left: 15px;
font-size: 15px;
}
.login_box{
display: flex;
width: 106px;
height: 35px;
align-items: center;
margin-left: 50px;
}
.login_box a{
color: #333;
font-size: 14px;
}
.login_box a:hover{
color: #e13228;
}
.login_box li{
color: #d8d8d8;
margin: 0px 20px;
height: 15px;
}
.login_box li a{
}
/* 头部下部分 */
.menus_bottom{
width: 100%;
/* height: ; */
background: #fafafa;
}
.menus_bottom_content{
width: 100%;
}
.menus_bottom_content ul{
display: flex;
height: 38px;
margin:0 auto;
width: 910px;
}
.menus_bottom_content ul li{
width: 130px;
}
.menus_bottom_content ul li a{
font-size: 16px;
color: #333;
font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif;
line-height: 38px;
font-weight: 400;
}
.menus_bottom_content ul li a:hover{
color:#e13228;
}
.red{
color: #e13228 !important;
}

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/1-L-(1).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/1-L-(2).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/1-L-(3).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/1-L-(4).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/1-L-(5).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/c2- (1).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/c2- (2).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/c2- (3).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/images/内容1.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 407 B

427
历届学生/韩想/项目开发/练习项目/仿千千音乐/Think/index.html Normal file
View File

@@ -0,0 +1,427 @@
<!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="">&lt;</a>
</div>
<div class="c2_click_r">
<a href="">&gt;</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="">&lt;</a>
</div>
<div class="c2_click_r c3">
<a href="">&gt;</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>