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

20
历届学生/zheng-yuqing/项目练习/上课项目/kuwo/css/clear.css Normal file
View File

@@ -0,0 +1,20 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

154
历届学生/zheng-yuqing/项目练习/上课项目/kuwo/css/index.css Normal file
View File

@@ -0,0 +1,154 @@
.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 li {
float: left;
font-weight: 300;
margin-right: 4px;
position: relative;
}
.logo ul li a {
color: #333;
padding: 0 14px;
font-size: 16px;
display: inline-block;
height: 100%;
}
.logo ul .active {
background: #ffe443;
font-weight: 600;
}
.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;
}
.menu .item:hover {
background: #ffdf1f;
}
.logo ul li:hover .menu {
display: inline-block;
}
.header .search {
line-height: 100%;
}
.search .search_wrap {
width: 294px;
height: 34px;
background: #f5f5f5;
margin-top: 16.5px;
}
.search .search_wrap i {
font-size: 16px;
color: #999;
top: 50%;
margin-top: -8px;
left: 8px;
}
.search .search_wrap input{
height: 100%;
width: 100%;
background: #504e4e00;
padding-left: 30px;
}
.search .logo_text {
font-size: 14px;
color: #333;
line-height: 67px;
}
.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;
width: 100%;
height: 6px;
background: #ffe443;
bottom: 19px;
left: 0;
z-index: -1;
}
.sub_nav ul li a{
font-size: 14px;
font-weight: 300;
}
.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 {
width: 25%;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
}
.banner ul li::after{
content: "";
width: 1px;
height: 28px;
position: absolute;
background: hsla(0,0%,100%,.1);
right: 0;
top: 50%;
margin-top: -14px;
}
.banner ul li:last-child::after {
width: 0px !important;
}

26
历届学生/zheng-yuqing/项目练习/上课项目/kuwo/css/public.css Normal file
View File

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

1
历届学生/zheng-yuqing/项目练习/上课项目/kuwo/img/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

115
历届学生/zheng-yuqing/项目练习/上课项目/kuwo/index.html Normal file
View File

@@ -0,0 +1,115 @@
<!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>
<div class="footer"></div>
</body>
</html>