Files
ClassContent/历届学生/fontendsix/项目练习/学生项目/王安民/10-22/task2.html
2024-09-27 02:06:13 +08:00

464 lines
22 KiB
HTML

<!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="../clear.css">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2881065_5znv7t2vnug.css">
<link rel="stylesheet" href="css/task2.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="c_center nav_center">
<img class="logo" src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/new-logo.79c3bfe1.svg" alt="">
<div class="nav_search">
<input type="text">
<div class="nav_search_right">
<i class="iconfont icon-sousuo"></i>
搜索
</div>
</div>
<ul class="nav_right">
<li class="change_red">
<i class="iconfont icon-upload"></i>
<p>上传视频</p>
</li>
<li class="change_red">
<i class="iconfont icon-upload"></i>
<p>上传视频</p>
</li>
<li>
<a href="">登录</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<ul class="nav_list c_center">
<li class="change_red">
<i class="iconfont icon-yiguanzhu"></i>
我的关注
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
</ul>
<div class="content_a c_center">
<div class="video">
<div class="video_title">
<h2>精彩短视频</h2>
<span class="video_title_more">更多></span>
<div class="turn_page">
<i class="iconfont icon-changyong_fanhui"></i>
<span>1/10</span>
<i class="iconfont icon-fanye"></i>
</div>
</div>
<ul>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
</ul>
</div>
<div class="hot">
<div class="hot_title">
<h2>快手热榜</h2>
<div class="turn_page">
<i class="iconfont icon-changyong_fanhui"></i>
<span>1/10</span>
<i class="iconfont icon-fanye"></i>
</div>
</div>
<ul class="hot_content">
<li>
<div class="hot_content_left">
<h3>1</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>2</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>3</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>4</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>5</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>6</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>7</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>8</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>9</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>10</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
</ul>
</div>
</div>
<div class="game c_center">
<div class="game_title">
<h2>游戏直播</h2>
<span>更多 ></span>
</div>
<ul class="game_contnet">
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
</ul>
</div>
</div>
</body>
</html>