代码：
<!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>Bilibili</title> <link rel="stylesheet" href="./fonts/iconfont.css"> <link rel="stylesheet" href="./css/bilibili.css"> </head> <body> <!-- 头部 --> <header> <div class="shortcut"> <div class="logo"> <a href="#"> <i class="iconfont Navbar_logo "></i> </a> </div> <div class="right"> <a href="#"> <i class="iconfont ic_search_tab"></i> </a> <a href="#" class="login"> <img src="./images/login.png" alt=""> </a> <a href="#" class="download"> <img src="./images/download.png" alt=""> </a> </div> </div> <div class="nav"> <ul class="tab"> <li><a href="#" class="active">首页</a></li> <li><a href="#">动画</a></li> <li><a href="#">番剧</a></li> <li><a href="#">国创</a></li> <li><a href="#">音乐</a></li> </ul> <i class="iconfont general_pulldown_s"></i> </div> </header> <!-- 视频列表 --> <div class="video_list"> <ul> <li> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？ </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/2.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 一口气看完，火影忍者1-720集！10亿人的青春 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/3.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 【目标论03】自律上瘾！BUG级的大脑操纵术 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/4.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 60w粉了，答应你们的在线卸妆 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？ </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/2.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 一口气看完，火影忍者1-720集！10亿人的青春 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/3.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 【目标论03】自律上瘾！BUG级的大脑操纵术 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/4.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 60w粉了，答应你们的在线卸妆 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？ </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/2.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 一口气看完，火影忍者1-720集！10亿人的青春 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/3.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 【目标论03】自律上瘾！BUG级的大脑操纵术 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/4.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 60w粉了，答应你们的在线卸妆 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？ </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/2.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 一口气看完，火影忍者1-720集！10亿人的青春 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/3.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 【目标论03】自律上瘾！BUG级的大脑操纵术 </div> </a> </li> <li> <a href="#"> <div class="pic"> <img src="./images/4.jpg" alt=""> <div class="video_info"> <div class="play"> <i class="iconfont icon_shipin_bofangshu"></i> 36.9万 </div> <div class="review"> <i class="iconfont icon_shipin_danmushu"></i> 3347 </div> </div> </div> <div class="title"> 60w粉了，答应你们的在线卸妆 </div> </a> </li> </ul> </div> <div class="more"> 去bilibili App看更多 </div> <footer> <p>信息网络传播视听节目许可证：0910417</p> <p>网络文化经营许可证 沪网文【2019】3804-274号</p> <p>广播电视节目制作经营许可证：（沪）字第01248号</p> <p>增值电信业务经营许可证 沪B2-20100043</p> </footer> <div class="open"> <i class="iconfont Navbar_logo"></i> 打开App，看你感兴趣的视频 </div> </body> </html>效果图：
01-22
3238
3238
04-16
986
986
05-17
147
147
06-27
42
42
06-04
645
645
06-29
425
425
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
