first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,234 @@
.meun {
width: 240px;
height: 100%;
position: fixed;
z-index: 999;
border-right: 1px solid #e6e6e8;
box-sizing: border-box;
}
.meun .logo {
width: 146px;
height: 36px;
margin: 0 auto;
display: block;
margin-top: 18px;
margin-bottom: 34px;
}
.meun ul {
padding: 0 28px;
}
.meun ul li {
height: 40px;
line-height: 40px;
margin-bottom: 8px;
}
.meun ul .active {
background: #f7f7f7;
border-radius: 3px;
}
.meun ul li a{}
.meun ul li a img {
vertical-align: text-top;
margin-left: 4.5px;
margin-top: -18px;
}
.meun ul li a span {
font-size: 16px;
color: #111622;
}
.header {
position: fixed;
width: calc(100% - 240px);
height: 64px;
left: 240px;
z-index: 999;
border-bottom: 1px solid #e6e6e8;
background: #fff;
box-sizing: border-box;
}
.header .search{
width: 440px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #e6e6e8;
border-radius: 3px;
box-sizing: border-box;
margin: 14px 0 0 32px;
}
.header .search input {
background: #0000;
height: 100%;
padding-left: 17px;
width: 343px;
box-sizing: border-box;
}
.header .search .but{
position: relative;
height: 100%;
width: 75px;
padding-left: 20px;
line-height: 34px;
}
.header .search .but::before {
content: " ";
position: absolute;
width: 1px;
height: 16px;
background-color: #e6e6e6;
top: 50%;
left: 0;
margin-top: -8px;
}
.header .search .but span {
font-size: 16px;
color: #666;
}
.header .login{
width: 611px;
}
.header .login .menu_two {
line-height: 64px;
}
.header .login .menu_two li {
float: left;
margin-right: 16px;
padding-right: 10px;
font-size: 14px;
color: #111622;
}
}
.header .login .menu_two li a{}
.header .login .menu_two li a i {}
.header .login .menu_two li a span {
/* font-size: 14px;
color: #111622; */
}
.header .login .log_reg {
margin-top: 14px;
}
.header .login .log_reg li:first-child {
border: 1px solid #e6e6e8;
height: 30px;
border-radius: 5px;
padding: 0 8px;
}
.header .login .log_reg li:last-child {
padding:0 26px;
height: 30px;
background-color: #ff2626;
border-radius: 5px;
color: #fff;
}
.header .login .log_reg li {
float: left;
line-height: 32px;
margin-right: 24px;
font-size: 14px;
color: #111622;
}
.header .login .log_reg li i {}
.header .login .log_reg li span {}
.content {
width: calc(100% - 240px);
padding: 32px 0 0 32px;
height: 100%;
background-color: #fafafa;
margin-left: 240px;
padding-top: 64px;
box-sizing: border-box;
}
.content .first{
}
.content .first img {
width: 600px;
height: 266.26px;
border-radius: 3px;
}
.content li{
float: left;
padding-right: 16px;
margin-top: 44px;
}
.content li .dingwei{
position: relative;
}
.content li .dingwei img {
width: 292px;
height: 164px;
margin-bottom: 17px;
border-radius: 3px;
}
.content li .dingwei .zhibo {
width: 36px;
height: 20px;
line-height: 20px;
background: red;
color: #fff;
font-size: 12px;
border-radius: 10px;
position: absolute;
left: 12px;
top: 12px;
padding: 0 12px 0 22px;
background-image: url(https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-5/1652689008111/9557bd3b37a1.gif);
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: 6px;
}
.content li .dingwei .shuzhi {
font-size: 14px;
color: #fff;
text-align: right;
line-height: 30px;
box-sizing: border-box;
padding: 0 12px;
position: absolute;
bottom: 12px;
right: 12px;
height: 30px;
width: 100%;
}
.content li .cont_b{
width: 292px;
}
.content li .cont_b img{
width: 36px;
height: 36px;
border-radius: 100%;
float: left;
}
.content li .cont_b .tietle{
font-size: 16px;
color: #111622;
line-height: 22px;
font-weight: 500;
}
.content li .cont_b .name,
.content li .cont_b .bofang{
font-size: 14px;
color: #505666;
line-height: 22px;
font-weight: 400;
margin-left: 39px;
}

View File

@@ -0,0 +1,223 @@
<!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="../6.2作业/css/clear.css">
<link rel="stylesheet" href="../6.2作业/css/public.css">
<link rel="stylesheet" href="./css/haokan.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
</head>
<body>
<div class="mian">
<div class="meun">
<img class="logo" src="./img/logo.png" alt="">
<ul>
<li class="active">
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
</ul>
</div>
<div class="header">
<div class="search left">
<input class="left" type="text" placeholder="搜索">
<div class="but left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<div class="login right hidden">
<ul class="menu_two hidden left">
<li>
<a href="">
<i class="iconfont icon-sousuo"></i>
<span>下载客户端</span>
</a>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>创作中心</span>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>消息</span>
</li>
</ul>
<ul class="log_reg hidden right">
<li>
<i class="iconfont icon-sousuo"></i>
<span>上传视频</span>
</li>
<li>
<span>登 录</span>
</li>
</ul>
</div>
</div>
<ul class="content hidden">
<li class="first">
<img class="tupian" src="./img/first.png" alt="">
</li>
<li>
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.173 4.66l4 2.588A4 4 0 0 1 20 10.606V17a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-6.394a4 4 0 0 1 1.827-3.358l4-2.588a4 4 0 0 1 4.346 0zM12 12.358a.8.8 0 0 0-.8.8v3.338a.8.8 0 1 0 1.6 0v-3.338a.8.8 0 0 0-.8-.8z" fill="#111622" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 319 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB