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

19
历届学生/fontendseven/项目练习/上课项目/快手/css/clear.css Normal file
View File

@@ -0,0 +1,19 @@
body,p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
border: none;
}
li {
list-style: none;
}
input {
/* 去除选中input时候产生的外边框 */
outline: none;
}
a {
text-decoration: none;
color: #000;
}

238
历届学生/fontendseven/项目练习/上课项目/快手/css/index.css Normal file
View File

@@ -0,0 +1,238 @@
.header {
height: 390px;
}
.header img{
width: 100%;
height: 100%;
object-fit: cover;
}
.header_menu {
height: 70px;
background: rgba(34,34,34,.5);
position: fixed;
width: 100%;
z-index: 99;
}
.header_menu .logo {
width: 81px;
height: 31px;
margin-top: 19px;
}
.search {
position: absolute;
margin: 0 auto;
left: 0;
top: 13px;
right: 0;
width: 391px;
height: 44px;
}
.search input {
height: 100%;
width: 303px;
background: hsla(0,0%,100%,.1);
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
padding: 0 24px;
box-sizing: border-box;
font-size: 14px;
color: hsla(0,0%,100%,.8);
}
.search .button {
width: 88px;
height: 100%;
background-color: #fe3666;
color: #fff;
border-top-right-radius: 999px;
border-bottom-right-radius: 999px;
text-align: center;
line-height: 44px;
}
.search .button i{}
.search .button span{}
.login {
margin-top: 19px;
}
.login ul {
overflow: hidden;
float: left;
}
.login ul li {
float: left;
color: #fff;
text-align: center;
margin:0 15px;
}
.login ul li i{
font-size: 20px;
margin-bottom: 4px;
display: inline-block;
}
.login ul li p {
font-size: 14px;
font-weight: 500;
}
.login .login_text {
width: 84px;
height: 43px;
border-radius: 21px;
background: #eb3661;
text-align: center;
line-height: 43px;
font-size: 18px;
color: #fff;
margin-left: 15px;
}
.navbar {
margin: 40px 0;
}
.navbar li {
float: left;
width: 92px;
height: 40px;
border-radius: 30px;
text-align: center;
line-height: 40px;
background: #f0f0f0;
margin-left: 44px;
}
.navbar li a {
color: #222;
font-size: 15px;
font-weight: 600;
}
.video {}
.video .video_d {
width: 710px;
}
.video_d_title,
.video_hot_title {
margin-bottom: 24px;
line-height: 42px;
height: 42px;
padding-right: 18px;
}
.video_d_name p,
.video_hot_title p{
font-size: 27px;
color: #111;
font-weight: bolder;
margin-right: 24px;
display: inline-block;
vertical-align: middle;
}
.video_d_title .video_d_name span{
font-size: 13px;
color: #999;
}
.video_d_title .video_d_name i{
font-size: 12px;
}
.video_d_name .dd {
display: inline-block;
position: relative;
top: 2px;
}
.video_d_page i{
font-size: 12px;
color: #d0d0d0;
}
.video_d_page span{
font-size: 13px;
color: #666;
margin: 0 18px;
}
.video_d ul li {
float: left;
width: calc(100% / 4 - 18px);
margin-right: 18px;
margin-bottom: 46px;
}
.video_d ul li img {
width: 100%;
border-radius: 4px;
}
.video_d ul li p {
font-size: 15px;
color: #111;
margin-top: 16px;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.video_d ul li .desc {}
.video_d ul li .desc i {
font-size: 16px;
margin-right: 6px;
}
.video_d ul li .desc span {
color: #999;
font-size: 13px;
}
.video .video_hot {
width: 416px;
}
.video_hot_list {
background: #fbfbfb;
border-radius: 4px;
padding: 0 16.5px;
overflow: hidden;
}
.video_hot_list li {
height: 69px;
position: relative;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 15px;
margin-bottom: 15px;
padding-top: 15px;
box-sizing: border-box;
}
.video_hot_list li .nums{
width: 35px;
height: 38px;
background: url("https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg");
background-repeat: no-repeat;
line-height: 38px;
text-align: center;
background-position: 0 20px;
}
.video_hot_list li .nums span{
font-size: 25.6px;
color: #fe3666;
font-weight: 700;
}
.video_hot_list li .text{
margin-left: 5.6px;
}
.video_hot_list li .text .title{
font-size: 15px;
font-weight: 500;
line-height: 15.6px;
margin-bottom: 4px;
}
.video_hot_list li .text i{
font-size: 12px;
}
.video_hot_list li .text span{
color: #999;
font-size: 13px;
}
.video_hot_list .hot {
position: absolute;
right: 0;
top: 15px;
width: 16px;
height: 16px;
}

18
历届学生/fontendseven/项目练习/上课项目/快手/css/public.css Normal file
View File

@@ -0,0 +1,18 @@
/* 存放使用率高的css代码 */
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.center {
width: 1126px;
margin: 0 auto;
}

272
历届学生/fontendseven/项目练习/上课项目/快手/index.html Normal file
View File

@@ -0,0 +1,272 @@
<!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="http://at.alicdn.com/t/font_2915751_2q90ct8ysi3.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_menu">
<div class="center">
<img class="logo left" src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/logo_dark.49fc3549.svg" alt="">
<div class="search hidden">
<input class="left" type="text" placeholder="请输入你要搜索的内容">
<div class="button left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<div class="login right">
<ul>
<li>
<i class="iconfont icon-sousuo"></i>
<p>上传视频</p>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<p>快币充值</p>
</li>
</ul>
<div class="login_text left">登录</div>
</div>
</div>
</div>
<img src="https://s2-10623.kwimgs.com/kos/nlav10623/vision_images/topBannerx1.png" alt="">
</div>
<div class="content">
<div class="center">
<ul class="navbar hidden">
<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>
<li><a href="">短视频</a></li>
<li><a href="">短视频</a></li>
</ul>
<div class="video hidden">
<div class="video_d left">
<div class="video_d_title hidden">
<div class="video_d_name left">
<p> 精彩短视频 </p>
<div class="dd">
<span>更多</span>
<i class="iconfont icon-sousuo"></i>
</div>
</div>
<div class="video_d_page right">
<i class="iconfont icon-sousuo"></i>
<span>1/15</span>
<i class="iconfont icon-sousuo"></i>
</div>
</div>
<ul class="hidden">
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/11/02/12/BMjAyMTExMDIxMjM4NThfOTkwMDE3OTY1XzYwMTE1NzY3Mzg2XzFfMw==_Bde31d058eedf4eebe2d9346c1c031b71.jpg?tag=1-1636548068-xpcwebhome-0-hxas16h59r-efb9aad0fb68539d&clientCacheKey=3ximm48ce57i4ic.jpg&di=JAmKMAb_FYDtklEYveib4Q==&bp=14944" alt="">
<p>倘若我要以爱之名困住你呢</p>
<div class="desc">
<i class="iconfont icon-sousuo"></i>
<span>35.8w喜欢</span>
</div>
</li>
</ul>
</div>
<div class="video_hot left">
<div class="video_hot_title hidden">
<p class="left">精彩短视频</p>
<div class="video_d_page right">
<i class="iconfont icon-sousuo"></i>
<span>1/15</span>
<i class="iconfont icon-sousuo"></i>
</div>
</div>
<ul class="video_hot_list">
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
<li>
<div class="nums left">
<span>1</span>
</div>
<div class="text left">
<div class="title">解放军军机今早5次巡台</div>
<i class="iconfont icon-sousuo"></i>
<span>1249.7w热度</span>
</div>
<img class="hot" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_hot3x.png" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>