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

18
历届学生/吴欣阳/项目开发/上课项目/好看视频/css/clear.css Normal file
View File

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

316
历届学生/吴欣阳/项目开发/上课项目/好看视频/css/index.css Normal file
View File

@@ -0,0 +1,316 @@
.header {
}
.header_logo {
height: 72px;
background-color: #fff;
}
.logo {
width: 148px;
height: 33px;
margin-top: 19.5px;
}
.search {
width: 500px;
height: 38px;
left: 50%;
margin-left: -250px;
top: 19.5px;
}
.search_input {
width: 420px;
height: 100%;
background-color: #f5f5f5;
border-radius: 19px 0 0 19px;
padding-left: 20px;
box-sizing: border-box;
}
.search_button {
width: 80px;
height: 100%;
line-height: 38px;
text-align: center;
background-color: #ff4141;
border-radius: 0 19px 19px 0;
}
.search_button i,
.search_button span {
color: #fff;
font-size: 14px;
font-weight: 900;
}
.action {
margin-top: 19.5px;
}
.action i {
font-size: 24px;
color: #b3b3b3;
display: inline-block;
margin-bottom: 5px;
}
.action li {
float: left;
width: 48px;
text-align: center;
margin-right: 12px;
}
.action li:last-child {
margin-right: 0;
}
.action li:last-child img {
width: 40px;
height: 40px;
}
.action p {
color: #b3b3b3;
font-size: 12px;
}
.header_menu {
height: 40px;
background: #f7f7f7;
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 8%);
}
.header_menu li{
float: left;
width: 75px;
text-align: center;
line-height: 40px;
position: relative;
}
.header_menu li a{
color: #000;
}
.active a {
font-weight: 600;
color: #ff4141 !important;
position: relative;
}
.active a::after {
content: "";
position: absolute;
bottom: -8px;
background: #ff4141;
width: 18px;
height: 3px;
left: 50%;
margin-left: -9px;
}
.banner {
margin-top: 24px;
}
.lunbo {
width: 471px;
height: 266px;
border-radius: 6px;
margin-right: 16px;
}
.info_ul {
width: 713px;
}
.info_ul .item {
float: left;
width: 227px;
height: 128px;
margin-right: 16px;
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.info_ul .item:nth-child(3n) {
margin-right: 0 !important;
}
.info_ul .item:nth-child(4),
.info_ul .item:nth-child(5),
.info_ul .item:nth-child(6) {
margin-bottom: 0 !important;
}
.info_ul .item img {
width: 100%;
}
.info_ul .item:hover .info {
top: 0 !important;
}
.info_ul .item:hover .back {
display: block !important;
}
.back {
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
z-index: 2;
left: 0;
top: 0;
display: none;
transition: all 0.1s ease;
}
.info {
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
left: 0;
top: 92px;
color: #fff;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
transition: all 0.25s ease;
}
.info_top {
line-height: 22px;
}
.info_center {
margin-top: 28px;
margin-bottom: 5px;
}
.info_list {}
.info_list li{
float: left;
width: 50%;
}
.video {
margin-top: 24px;
}
.video .title {
font-size: 28px;
font-weight: 500;
position: relative;
padding-left: 10px;
margin-bottom: 18px;
}
.video .title::after {
content: "";
position: absolute;
width: 3px;
height: 18px;
background: #ff4141;
border-radius: 1.5px;
left: 0;
top: 12px;
}
.video ul {
overflow: hidden;
}
.video ul li {
width: 227px;
border-radius: 5px;
margin: 0 16px 16px 0;
height: 186px;
float: left;
position: relative;
overflow: hidden;
}
.video ul li:last-child {
margin-right: 0 !important;
}
.video ul li:hover .icon {
bottom: -16px !important;
}
.video ul li:hover img {
transform: scale(1.2);
}
.video ul .top {
height: 128px;
position: relative;
overflow: hidden;
}
.top img{
width: 100%;
height: 100%;
transition: all 0.25s ease;
}
.top span{
position: absolute;
right: 6px;
bottom: 6px;
padding: 2px 4px;
background-color: rgba(0,0,0,.8);
color: #fff;
font-size: 12px;
border-radius: 3px;
}
.top_title {
margin-top: 10px;
font-size: 14px;
color: rgba(0,0,0,.85);
}
.icon {
position: absolute;
bottom: 6px;
background: #fff;
width: 100%;
transition: all 0.25s ease;
}
.icon .icon_item {
float: left;
color: #666;
width: 50%;
}
.icon .icon_item i{}
.icon .icon_item span{
font-size: 12px;
}
.footer {}
.footer_wrap {
margin-top: 46px;
height: 188px;
background: #f2f2f2;
}
.footer_top {
width: 1000px;
margin: 0 auto;
padding-top: 55px;
}
.footer_top li{
float: left;
}
.footer_top li:nth-child(1),
.footer_top li:nth-child(2),
.footer_top li:nth-child(3) {
margin-right: 108px;
}
.footer_top li a {
display: block;
color: #906668;
font-size: 14px;
margin-bottom: 24px;
}
.footer_top .line{
width: 1px;
height: 56px;
background: #979797;
margin-right: 65px;
}
.footer_top .code .text{
width: 120px;
}
.footer_top .code .text p{
color: #666;
font-size: 14px;
margin-bottom: 24px;
}
.footer_top .code img{
width: 72px;
height: 72px;
}
.footer_bottom {
height: 52px;
background-color: #444;
color: #999;
font-size: 12px;
line-height: 52px;
text-align: center;
}

22
历届学生/吴欣阳/项目开发/上课项目/好看视频/css/public.css Normal file
View File

@@ -0,0 +1,22 @@
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.layout {
width: 1200px;
margin: 0 auto;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

BIN
历届学生/吴欣阳/项目开发/上课项目/好看视频/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/好看视频/img/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

428
历届学生/吴欣阳/项目开发/上课项目/好看视频/index.html Normal file
View File

@@ -0,0 +1,428 @@
<!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>好看视频</title>
<link rel="stylesheet"
href="https://at.alicdn.com/t/font_2576965_1htpybvcqz8.css?spm=a313x.7781069.1998910419.46&file=font_2576965_1htpybvcqz8.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="header_logo">
<div class="layout relative">
<img class="logo left" src="./img/logo.png" alt="">
<div class="search left absolute">
<input class="search_input left" type="text" placeholder="台大医院院长求救">
<div class="search_button left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<ul class="action right">
<li>
<i class="iconfont icon-shangchuan"></i>
<p>搜索</p>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<p>搜索</p>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<p>搜索</p>
</li>
<li>
<img src="./img/user.png" alt="">
</li>
</ul>
</div>
</div>
<div class="header_menu">
<ul class="layout">
<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="">音乐</a>
</li>
<li>
<a href="">音乐</a>
</li>
<li>
<a href="">音乐</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="layout">
<div class="banner hidden">
<img class="lunbo left"
src="https://tukuimg.bdstatic.com/processed/06592c2ccca4448e43d6f66b867dd041.jpeg@s_0,w_660,h_370,q_80" />
<ul class="info_ul left">
<li class="item">
<img src="https://tukuimg.bdstatic.com/processed/237437975b9f0cecd0ed9e0fce640c01.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<div class="back"></div>
<div class="info">
<div class="info_top">女生宋佳一首《太多》，唱出了不一样的感觉</div>
<div class="info_center">我是沛总</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<span>11</span>
</li>
</ul>
</div>
</li>
<li class="item">
<img src="https://tukuimg.bdstatic.com/processed/237437975b9f0cecd0ed9e0fce640c01.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<div class="back"></div>
<div class="info">
<div class="info_top">女生宋佳一首《太多》，唱出了不一样的感觉</div>
<div class="info_center">我是沛总</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<span>11</span>
</li>
</ul>
</div>
</li>
<li class="item">
<img src="https://tukuimg.bdstatic.com/processed/237437975b9f0cecd0ed9e0fce640c01.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<div class="back"></div>
<div class="info">
<div class="info_top">女生宋佳一首《太多》，唱出了不一样的感觉</div>
<div class="info_center">我是沛总</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<span>11</span>
</li>
</ul>
</div>
</li>
<li class="item">
<img src="https://tukuimg.bdstatic.com/processed/237437975b9f0cecd0ed9e0fce640c01.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<div class="back"></div>
<div class="info">
<div class="info_top">女生宋佳一首《太多》，唱出了不一样的感觉</div>
<div class="info_center">我是沛总</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<span>11</span>
</li>
</ul>
</div>
</li>
<li class="item">
<img src="https://tukuimg.bdstatic.com/processed/237437975b9f0cecd0ed9e0fce640c01.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<div class="back"></div>
<div class="info">
<div class="info_top">女生宋佳一首《太多》，唱出了不一样的感觉</div>
<div class="info_center">我是沛总</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<span>11</span>
</li>
</ul>
</div>
</li>
<li class="item">
<img src="https://tukuimg.bdstatic.com/processed/237437975b9f0cecd0ed9e0fce640c01.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<div class="back"></div>
<div class="info">
<div class="info_top">女生宋佳一首《太多》，唱出了不一样的感觉</div>
<div class="info_center">我是沛总</div>
<ul class="info_list hidden">
<li>
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</li>
<li>
<i class="iconfont icon-pinglun"></i>
<span>11</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="video">
<div class="title">影视</div>
<ul>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
</ul>
</div>
<div class="video">
<div class="title">综艺</div>
<ul>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
<li>
<div class="top">
<img src="https://tukuimg.bdstatic.com/scrop/610134102009905502.jpeg@s_0,w_660,h_370,q_80,f_webp"
alt="">
<span>09:17</span>
</div>
<p class="top_title">每个人的身上都有毛毛 ，这个女孩特别多《狮女传说》</p>
<div class="icon hidden">
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
<div class="icon_item">
<i class="iconfont icon-chakan"></i>
<span>1281</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="footer_wrap">
<ul class="footer_top hidden">
<li>
<a href="">品牌合作</a>
<a href="">品牌合作</a>
</li>
<li>
<a href="">品牌合作</a>
<a href="">品牌合作</a>
</li>
<li>
<a href="">品牌合作</a>
</li>
<li class="line"></li>
<li class="code hidden">
<div class="text left">
<p>扫码下载客户端</p>
<p>轻松有收获</p>
</div>
<img class="left" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdQAAAHUAQMAAAC56UsvAAAABlBMVEUAAAD///+l2Z/dAAACTUlEQVR42u3cQW7DMAxEUd3A97+lb8A2qS0OKaUFsukE+EYQJI6eu7EEmqQ64u3jHFisnT3HPPJq3yePeJx5friGPT/kYCzW0uq8eAwQe73reJkIWKyjPcu9fd3891Hu/DYYi3W291zQr+UnLPbjbP31OnNgsR9i9bnyHpaxygzC/4pzsFgH2x8Pf329fA7FYh3skvrLufAzC6JELy/zhFisg70XbU33ZYZkyNWWfCAWa2f1PtdA5X7lZeelNJGCxVrajLSPKImRpZKYsTcW62ZvVcKVMWYh5vp6lHcs1tZmzUXXc03utVglsFhju1vkrwseJRTXiB2LdbTz4fHscbWWY/R5UwuOWKybnWfm/Z8tTBKitEwgFutoa1jSFu2W69vUFrFYM6s3eetZmu3T2ROyDbyxWCebab0ZsURoaSYvqw17WKyfzZ90M0tkebHE3m2+YLFmNsdomC2VF/1QWkGwWENbO07bdq2cHWutHIv1s9rasTadrpXH7KPGYt3s0sukMXbvd1r2J2KxbrbNgtLLdGSlRmvl5c9hsU62tXxoiTxz17V/r2UIsVgXuyzvGX5HrvN6vsQzWKyVjc222dJKveRMSpyDxVpZ6TWN9o9oWldeDVewWEerx7nbWhibQvl4tS0Xi/1f21J80QuLGbSM3nqKxRpaXed7kmRpTN20WGOxVrat1TXkntu4WvUci3W3c9iudzp04wAW62/P0RIgPWUdy95wLNbNRslO76dA3dvScn1YrI/tz5KxqZWPMTYtTFism337wGLt7BcOoXzuYAD95QAAAABJRU5ErkJggg==" alt="">
</li>
</ul>
</div>
<div class="footer_bottom">
© 2021 Baidu 京ICP证030173号 京公网安备11000002000001 京网文（2017）2863-327号
</div>
</div>
</body>
</html>