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

17
历届学生/zheng-yuqing/项目练习/学生项目/酷我音乐/css/clear.css Normal file
View File

@@ -0,0 +1,17 @@
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

256
历届学生/zheng-yuqing/项目练习/学生项目/酷我音乐/css/index.css Normal file
View File

@@ -0,0 +1,256 @@
.header {
height: 67px;
border-bottom: 1px solid #f0f0f0;
}
.header .logo {
line-height: 67px;
}
.header .logo img {
width: 131px;
height: 39px;
margin-right: 39px;
margin-top: 14px;
}
.logo ul {}
.logo ul li {
float: left;
font-weight: 300;
margin-right: 4px;
position: relative;
}
.logo ul li a {
display: block;
height: 100%;
color: #333;
font-size: 16px;
padding: 0 14px;
}
.logo ul .active {
font-weight: 600;
background: #ffe443;
}
.menu {
line-height: 50px;
position: absolute;
width: 170px;
height: 155px;
background: #fff;
box-shadow: 0 0 30px 0 rgb(65 67 70 / 8%);
left: 50%;
margin-left: -85px;
top: 61px;
display: none;
z-index: 3;
}
.menu .item:hover {
background: #ffdf1f;
}
.logo ul li:hover .menu {
display: inline-block;
}
.header .search {}
.search .search_wrap {
width: 294px;
height: 34px;
background: #f5f5f5;
;
margin-top: 16.5px;
}
.search .search_wrap i {
top: 50%;
margin-top: -8px;
left: 8px;
font-size: 16px;
color: #999;
}
.search .search_wrap input {
background: #504e4e00;
width: 100%;
height: 100%;
padding-left: 30px;
}
.search .logo_text {
line-height: 67px;
font-size: 14px;
color: #333;
}
.sub_nav {
height: 54px;
line-height: 54px;
}
.sub_nav ul {
margin-left: 206px;
}
.sub_nav ul li {
float: left;
margin-right: 34px;
position: relative;
}
.sub_nav ul .active::after {
content: "";
position: absolute;
height: 6px;
width: 100%;
background: #ffe443;
bottom: 19px;
left: 0;
z-index: -1;
}
.sub_nav ul li a {
font-size: 14px;
font-family: 300;
color: #333;
}
.banner {
height: 350px;
}
.banner img {
width: 100%;
height: 100%;
}
.banner i {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: #00000038;
color: #fff;
border-radius: 100%;
top: 50%;
margin-top: -30px;
}
.icon-htmal5icon39 {
left: 25px;
}
.icon-htmal5icon39-copy {
right: 25px;
}
.banner ul {
width: 100%;
height: 60px;
bottom: 0;
background: rgba(0, 0, 0, .15);
}
.banner ul li {
float: left;
width: 25%;
text-align: center;
color: #fff;
font-size: 16px;
position: relative;
}
.banner ul li ::after {
position: absolute;
width: 1px;
height: 28px;
background: hsla(0, 0%, 100%, .1);
content: "";
right: 0;
top: 50%;
margin-top: -14px;
}
.banner ul li:last-child::after {
width: 0px !important;
}
/* last-child 选中最后一个 */
.recommend {
margin-top: 60px;
margin-bottom: 24px;
}
.recommend .recommend_title {
width: 1192px;
margin: 0 auto;
height: 40px;
line-height: 50px;
}
.recommend .recommend_title h3 {
font-size: 28px;
margin-right: 40px;
line-height: 40px;
display: block;
width: 112px;
height: 40px;
color: #333;
}
.recommend .recommend_title .data {}
.recommend .recommend_title .data li {
float: left;
margin-right: 34px;
position: relative;
}
.recommend .recommend_title .data li a {
color: #333;
}
.recommend .recommend_title .data .active::after {
content: "";
position: absolute;
height: 6px;
width: 100%;
background: #ffe443;
bottom: 17px;
left: 0;
z-index: -1;
}
.recommend_list {
}
.recommend_list {
width: 1192px;
height: 100%;
float: left;
margin-left: 163px;
}
.recommend_list li {
width: 20%;
float: left;
}
.recommend_list .top {
width: 177px;
height: 177px;
}
.recommend_list .text {}

25
历届学生/zheng-yuqing/项目练习/学生项目/酷我音乐/css/public.css Normal file
View File

@@ -0,0 +1,25 @@
.center {
width: 1192px;
margin: 0 auto;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

191
历届学生/zheng-yuqing/项目练习/学生项目/酷我音乐/酷我音乐.html Normal file
View File

@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3359132_0ieicnv9yoqi.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="center">
<div class="logo left">
<img class="left" src="https://h5static.kuwo.cn/www/kw-www/img/logo.7bf8751.png" alt="">
<ul class="left">
<li class="active">
<a href="">发现音乐</a>
</li>
<li>
<a href="">下载客户端</a>
</li>
<li>
<a href="">音乐现场</a>
</li>
<li>
<a href="">VIP会员</a>
</li>
<li>
<a href="">酷我畅听</a>
</li>
<li>
<a href="">酷我耳机</a>
</li>
<li>
<a href="">更多</a>
<div class="menu">
<div class="item">
<a href="">更多音乐人</a>
</div>
<div class="item">
<a href="">HIFI音乐</a>
</div>
<div class="item">
<a href="">主播创造中心</a>
</div>
</div>
</li>
</ul>
</div>
<div class="search right">
<div class="search_wrap left relative">
<i class="iconfont icon-sousuo_o absolute"></i>
<input type="text" placeholder="搜索音乐/MV/歌单/歌手">
</div>
<div class="logo_text left">登录 / 注册</div>
</div>
</div>
</div>
<div class="content">
<div class="sub_nav">
<div class="center">
<ul>
<li class="active">
<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>
</div>
<div class="banner">
<div class="center relative">
<img src="https://kwimg1.kuwo.cn/star/upload/93/93/1635395354301_.png" alt="">
<i class="absolute iconfont icon-htmal5icon39"></i>
<i class="absolute iconfont icon-htmal5icon39-copy"></i>
<ul class="absolute">
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
</ul>
</div>
</div>
<div class="recommend auto content">
<div class="recommend_title">
<h3 class="left">推荐歌单</h3>
<ul class="data left">
<li>
<a class="active" href="">每日推荐</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="0">更多</a>
<img src="" alt="">
</li>
</ul>
</div>
<ul class="recommend_list">
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
</ul>
</div>
</div>
<div class="footer"></div>
</body>
</html>