1.页面效果图

2.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>碧蓝之海-番剧-全集-高清独家在线观看-bilibili-哔哩哔哩</title><meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。"">
<meta name=" keywords"content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃""><!-- 引入网站icon --><link rel=" shortcut icon" href="./icon/favicon.ico"><!-- 引入基础类样式表 --><link rel="stylesheet" href="./css/base.css"><!-- 引入头部底部公共表 --><link rel="stylesheet" href="./css/common.css"><!-- 引入index.css(确保player.css在最下面) --><link rel="stylesheet" href="./css/play.css"><!-- 引入字体图标css文件 --><link rel="stylesheet" href="./font/font/iconfont.css">
</head><body><header><nav><!-- 最左侧的导航 --><div class="nav-left"><ul><li>首页</li><li>番剧</li><li>直播</li><li>游戏中心</li><li>会员购</li><li>漫画</li><li>赛事</li><li>嘉年华</li></ul></div><!-- 校园十佳 --><div class="top10"><div class="top-box"><img src="./images/校园十佳.png" alt=""><p>十佳</p></div></div><!-- 下载客户端 --><div class="download"><a href="#">下载客户端</a></div><!-- 搜索框 --><div class="search"><input type="text" placeholder="这只猪,叫从未关猪"></div><!-- 登录模块 --><div class="login"><a href="#">登录</a></div><!-- 用户功能 --><ul class="userFunction"><li><em class="iconfont icon-wodedahuiyuan"></em><i>大会员</i></li><li><em class="iconfont icon-youxiang"></em><i>消息</i></li><li><em class="iconfont icon-dongtai"></em><i>动态</i></li><li><em class="iconfont icon-shoucang"></em><i>收藏</i></li><li><em class="iconfont icon-lishi"></em><i>历史</i></li><li><em class="iconfont icon-lightbulb"></em><i>创作中心</i></li></ul><!-- 投稿上传 --><div class="upload"><a href="#">投稿</a></div></nav></header><div class="play-video wrapper clearfix"><!-- 左边 --><div class="play-left"><!-- 大视频 --><div class="bigvideo"><video src="./play_lib/alan.mp4" controls></video><!-- 视频描述 --><div class="info"><p>作者:阿蓝</p><p>地点:天津理工大学</p><p>2021.06.19</p></div></div><!-- 工具栏 --><div class="toolbar"><ul><li><em class="iconfont icon-dianzan_kuai"></em><span>97万</span></li><li><em class="iconfont icon-zhichibizhong"></em><span>93.5万</span></li><li><em class="iconfont icon-fenxiang"></em><span>分享</span></li><li><em class="iconfont icon-shoujitianchong"></em><span>用手机看</span></li><li><em class="iconfont icon-yiqipindansel"></em><span>一起看</span></li></ul></div><!-- 碧海之蓝模块 --><div class="media"><!-- 左边的封面 --><div class="media-left"><img src="./play_lib/封面.webp" alt=""></div><!-- 右边的描述 --><div class="media-right"><div class="title"><h3>碧海之蓝</h3><div class="title-right "><div class="Comment"><em class="iconfont icon-shoucang"></em><em class="iconfont icon-shoucang"></em><em class="iconfont icon-shoucang"></em><em class="iconfont icon-shoucang"></em><em class="iconfont icon-shoucang"></em><span>点评</span></div><div class="catch">追番</div></div></div><div class="media-count"><p>1.4亿播放 · 103.2万弹幕 · 448.3万追番</p></div><div class="dramaSeries"><span>番剧</span>p class="series">已完结, 全12话</span><span>BV13s411J7jn</span></div><div class="paragraph">北原伊织升入大学后，开始寄住在伊豆的叔父所经营的潜水用具店“Grand Blue”。传入耳中的波涛声、炽烈照射的太阳、开始一起生活的可爱表姐妹……青春的大学生活！这样的伊织所面临的却是——除了野球拳以外的猜拳一概不知的强壮男人们！！刚一入学就被大学潜水社团“Peek aBoo”所盯上了的伊织，在会长时·田信治和三年级学生·寿龙次郎的怂恿下，不知不觉已经身为社团的一员加入了他们的愚蠢喧嚣中。在大学中认识的虽然长得帅但性格却很遗憾的宅男——今村耕平也加入其中，他们的青春向着越来越奇怪的方向转进。明明在寄住的地方有着可爱的表姐妹——古手川姐妹，但自己却被妹妹千纱当成垃圾看待，而姐姐奈奈华又是重度妹控，根本无法成为对象。在可爱的全裸笨蛋们的包围之下，伊织的大学生活究竟会变得如何……。</div><div class="score"><p><span class="nine">9.9</span><span class="min">分</span></p><p class="last">12.9万人评分</p></div></div></div><!-- 点评模块 --><div class="review"><div class="review-top"><p>点评</p><span>查看更多</span></div><div class="review-bottom"><ul><li><div class="review-bottom-title"><span>无尽的枕头</span><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em></div><div class="review-bottom-content">最开始是看了一些名场面觉得很好笑就看了，结果一发不可收拾，有事没事都会再打开看一会儿，别的动漫我大多只看一遍，除了一些名场面会偶尔再去看看，但颜艺之海不一样，从头到尾全是名场面。动漫看得不得劲又看了漫画，漫画目前的感情戏部分貌似相对多了起来，但搞笑依旧。相比较于漫画，动漫这一季剧情推动的并不是特别多，也因此一直期待着第二季。好了，上面都是废话。动漫一开始就直接表明“纯属虚构、视作搞笑动画”，当然一般人不会看不出来的，毕竟这部作品的夸张程度已经难以形容了，尤其到了一些“不正常情节”时，画风也显然会</div><div class="review-bottom-date">2021-08-28</div></li><li><div class="review-bottom-title"><span>wgwm123</span><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em></div><div class="review-bottom-content">18年的时候自己还是大三的学生，那段时间天天上课，复习，准备考研。几乎连打游戏的时间都腾不出来，只能晚上熄灯之后躺下，打开手机看看番。看一集碧蓝笑个十多分钟，对当时的我来说真的是一种不错的放松。虽然后来没考上研，因为家里经济原因选择了就业，上班太累的时候，也会再把碧蓝之海翻出来看看，乐一乐解解压。对我来说，碧蓝之海也不仅仅是一个喜剧，不仅仅是用搞笑来放松自己，因为当我每一次看这部动画的时候，也会想起我曾在大学加入的社团。虽然不是潜水社，但是也像动画里那样，有一群非常好的伙伴，也是一大堆男生，还有</div><div class="review-bottom-date">2021-01-13</div></li><li><div class="review-bottom-title"><span>糜尘亦迷尘</span><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em><em class="iconfont icon-B-pingfen"></em></div><div class="review-bottom-content">观前提示：如果你如同男主迅速适应这个潜水部（PaB）一般快速的适应了这部番的节奏，你将获得绝佳的观看体验说这部番是神仙番的原因在于不拖泥带水的节奏，密集的笑点，个性鲜明而并不干瘪的人物配上本就不错的画面，让我对这部番其实是很认可的，每一集都让我有笑死在电脑前的感觉。作为一部搞笑番毫无疑问是极为优秀的。我本人其实不是很喜欢搞笑番的，因为达不到那个度就十分容易搞成尬活，过了那个度又容易让我产生心理不适，所以我被安利了以后过了一年半我才打开这部番。但正像我最开始说的那样，在我适应了这部番的套路和节奏</div><div class="review-bottom-date">2020-12-17</div></li></ul></div></div><!-- 点评窄栏 --><div class="comment-little">21947 评论</div><!-- 点评头部 --><div class="comment-header"><span class="select">按热度排序</span><p>按时间排序</p></div><!-- 评论内容 --><div class="comment-list"><ul><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx1.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">看完这部动漫后，本来对海洋毫无兴趣的我也不知不觉地爱上了各“水”世界。<br>我对于水的习性也在不断提高，用重力单位来比喻的话：<br><br><br>大概就是从一两到一斤的提升吧。</p><div class="text-date">2018-07-14 02:50</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx1.webp" alt=""><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em><i>DIVE(潜水)=Drink In Various Environments</i><div class="text-date">2018-07-14 02:50</div></div><div class="user-info"><img src="./play_lib/tx2.webp" alt=""><span>佐江567</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @修改昵称花6块 :秀啊兄dei</i><div class="text-date">2018-07-15 20:13</div></div><div class="user-info"><img src="./play_lib/tx3.webp" alt=""><span> 钠把电子给氯了</span><em class="iconfont icon-icon-test3 lv4"></em><i>众所周知水是可燃的</i><div class="text-date">2020-02-16 17:53</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx4.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">打开前:可能是后宫番或耽美<br>看了oP:可能是励志番或温馨日常<br>看完后:对不起大哥我错了(´；ω；`)</p><div class="text-date">2018-07-14 11:34</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx5.webp" alt=""><span>无聊的现在</span><em class="iconfont icon-icon-test5 lv6"></em><i>道歉要喝乌龙茶是常识啊！快喝！(｀・ω・´)</i><div class="text-date">2018-07-16 10:26</div></div><div class="user-info"><img src="./play_lib/tx6.webp" alt=""><span>你看见本大爷了吗</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @无聊的现在 :不不不这就算了吧(ﾟДﾟ≡ﾟдﾟ)!?</i><div class="text-date">2018-07-16 22:22</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx7.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">Spirytus Rektyfikowany是一款原产于波兰的伏特加，被西方人称为“生命之水”，是世界上<br>已知度数最高的酒。<br>其主要酿造原料是谷物和薯类，经过了反复70回以上的蒸馏， 达到96%的酒精度数，是世界<br>上纯度最高的烈酒。<br>Spirytus伏特加并不是某一款或某一个品牌的名称，在波兰语中，96度被连续蒸馏的这类酒<br>都叫SPIRYTUS，所以，SPIRYTUS并不是一个牌子，而是所有这类精馏伏特加的总称。</p><div class="text-date">2018-07-14 08:33</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx8.webp" alt=""><span> 鲸之馆</span><em class="iconfont icon-icon-test5 lv6"></em><i>别参酒精啊，参了酒精不就把生命之水给稀释了嘛</i><div class="text-date">2018-07-14 12:59</div></div><div class="user-info"><img src="./play_lib/tx9.webp" alt=""><span> 蟹里猴</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @神射手 :关键是，即使是食用酒精，纯度和生命之水也不能比，掺了就有杂质。</i><div class="text-date">2018-07-14 18:44</div></div><div class="user-info"><img src="./play_lib/tx10.webp" alt=""><span> 小柠丶</span><em class="iconfont icon-icon-test3 lv4"></em><i>挤挤，这孩子说不定能上热评</i><div class="text-date">2018-07-15 01:45</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx1.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">看完这部动漫后，本来对海洋毫无兴趣的我也不知不觉地爱上了各“水”世界。<br>我对于水的习性也在不断提高，用重力单位来比喻的话：<br><br><br>大概就是从一两到一斤的提升吧。</p><div class="text-date">2018-07-14 02:50</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx1.webp" alt=""><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em><i>DIVE(潜水)=Drink In Various Environments</i><div class="text-date">2018-07-14 02:50</div></div><div class="user-info"><img src="./play_lib/tx2.webp" alt=""><span>佐江567</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @修改昵称花6块 :秀啊兄dei</i><div class="text-date">2018-07-15 20:13</div></div><div class="user-info"><img src="./play_lib/tx3.webp" alt=""><span> 钠把电子给氯了</span><em class="iconfont icon-icon-test3 lv4"></em><i>众所周知水是可燃的</i><div class="text-date">2020-02-16 17:53</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx4.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">打开前:可能是后宫番或耽美<br>看了oP:可能是励志番或温馨日常<br>看完后:对不起大哥我错了(´；ω；`)</p><div class="text-date">2018-07-14 11:34</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx5.webp" alt=""><span>无聊的现在</span><em class="iconfont icon-icon-test5 lv6"></em><i>道歉要喝乌龙茶是常识啊！快喝！(｀・ω・´)</i><div class="text-date">2018-07-16 10:26</div></div><div class="user-info"><img src="./play_lib/tx6.webp" alt=""><span>你看见本大爷了吗</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @无聊的现在 :不不不这就算了吧(ﾟДﾟ≡ﾟдﾟ)!?</i><div class="text-date">2018-07-16 22:22</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx7.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">Spirytus Rektyfikowany是一款原产于波兰的伏特加，被西方人称为“生命之水”，是世界上<br>已知度数最高的酒。<br>其主要酿造原料是谷物和薯类，经过了反复70回以上的蒸馏， 达到96%的酒精度数，是世界<br>上纯度最高的烈酒。<br>Spirytus伏特加并不是某一款或某一个品牌的名称，在波兰语中，96度被连续蒸馏的这类酒<br>都叫SPIRYTUS，所以，SPIRYTUS并不是一个牌子，而是所有这类精馏伏特加的总称。</p><div class="text-date">2018-07-14 08:33</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx8.webp" alt=""><span> 鲸之馆</span><em class="iconfont icon-icon-test5 lv6"></em><i>别参酒精啊，参了酒精不就把生命之水给稀释了嘛</i><div class="text-date">2018-07-14 12:59</div></div><div class="user-info"><img src="./play_lib/tx9.webp" alt=""><span> 蟹里猴</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @神射手 :关键是，即使是食用酒精，纯度和生命之水也不能比，掺了就有杂质。</i><div class="text-date">2018-07-14 18:44</div></div><div class="user-info"><img src="./play_lib/tx10.webp" alt=""><span> 小柠丶</span><em class="iconfont icon-icon-test3 lv4"></em><i>挤挤，这孩子说不定能上热评</i><div class="text-date">2018-07-15 01:45</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx1.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">看完这部动漫后，本来对海洋毫无兴趣的我也不知不觉地爱上了各“水”世界。<br>我对于水的习性也在不断提高，用重力单位来比喻的话：<br><br><br>大概就是从一两到一斤的提升吧。</p><div class="text-date">2018-07-14 02:50</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx1.webp" alt=""><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em><i>DIVE(潜水)=Drink In Various Environments</i><div class="text-date">2018-07-14 02:50</div></div><div class="user-info"><img src="./play_lib/tx2.webp" alt=""><span>佐江567</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @修改昵称花6块 :秀啊兄dei</i><div class="text-date">2018-07-15 20:13</div></div><div class="user-info"><img src="./play_lib/tx3.webp" alt=""><span> 钠把电子给氯了</span><em class="iconfont icon-icon-test3 lv4"></em><i>众所周知水是可燃的</i><div class="text-date">2020-02-16 17:53</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx4.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">打开前:可能是后宫番或耽美<br>看了oP:可能是励志番或温馨日常<br>看完后:对不起大哥我错了(´；ω；`)</p><div class="text-date">2018-07-14 11:34</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx5.webp" alt=""><span>无聊的现在</span><em class="iconfont icon-icon-test5 lv6"></em><i>道歉要喝乌龙茶是常识啊！快喝！(｀・ω・´)</i><div class="text-date">2018-07-16 10:26</div></div><div class="user-info"><img src="./play_lib/tx6.webp" alt=""><span>你看见本大爷了吗</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @无聊的现在 :不不不这就算了吧(ﾟДﾟ≡ﾟдﾟ)!?</i><div class="text-date">2018-07-16 22:22</div></div></div></li><li><!-- 左边的头像 --><div class="list-left"><img src="./play_lib/tx7.webp" alt=""></div><!-- 右边的评论内容 --><div class="list-right"><!-- 用户名 --><div class="user-info"><span>修改昵称花6块</span><em class="iconfont icon-icon-test5 lv6"></em></div><!-- 评论内容 --><p class="text">Spirytus Rektyfikowany是一款原产于波兰的伏特加，被西方人称为“生命之水”，是世界上<br>已知度数最高的酒。<br>其主要酿造原料是谷物和薯类，经过了反复70回以上的蒸馏， 达到96%的酒精度数，是世界<br>上纯度最高的烈酒。<br>Spirytus伏特加并不是某一款或某一个品牌的名称，在波兰语中，96度被连续蒸馏的这类酒<br>都叫SPIRYTUS，所以，SPIRYTUS并不是一个牌子，而是所有这类精馏伏特加的总称。</p><div class="text-date">2018-07-14 08:33</div><!-- 二级评论 --><div class="user-info"><img src="./play_lib/tx8.webp" alt=""><span> 鲸之馆</span><em class="iconfont icon-icon-test5 lv6"></em><i>别参酒精啊，参了酒精不就把生命之水给稀释了嘛</i><div class="text-date">2018-07-14 12:59</div></div><div class="user-info"><img src="./play_lib/tx9.webp" alt=""><span> 蟹里猴</span><em class="iconfont icon-icon-test4 lv5"></em><i>回复 @神射手 :关键是，即使是食用酒精，纯度和生命之水也不能比，掺了就有杂质。</i><div class="text-date">2018-07-14 18:44</div></div><div class="user-info"><img src="./play_lib/tx10.webp" alt=""><span> 小柠丶</span><em class="iconfont icon-icon-test3 lv4"></em><i>挤挤，这孩子说不定能上热评</i><div class="text-date">2018-07-15 01:45</div></div></div></li></ul></div></div><!-- 右边 --><div class="play-right"><!--  开通大会员观看 --><div class="vip-btn">开通大会员观看<img src="./play_lib/vip.png" alt=""></div><!-- 弹幕列表 --><div class="bulletScreen-list"><span>弹幕列表</span><em class="iconfont icon-diandian"></em></div><!-- 选集 --><div class="list-title"><span>选集</span><em class="iconfont icon-jibao"></em><i>1/12</i></div><!-- 选集内容 多个li --><ul class="list-content"><li class="selected">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><!-- 相关推荐 --><div class="recommend-title"><span>相关推荐</span></div><!-- 推荐视频列表 --><ul class="recommend-list"><li><img src="./play_lib/t1.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">男子高中生的日常</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t2.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">打工吧！魔王大人</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t3.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">全职猎人</p><p class="series">全92话</p><p class="count">5557万播放 · 96.1万弹幕</p></div></li><li><img src="./play_lib/t4.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">擅长捉弄的高木同学 第二季</p><p class="series">全12话</p><p class="count">6945.8万播放 · 172.9万弹幕</p></div></li><li><img src="./play_lib/t5.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">游戏王 怪兽之决斗</p><p class="series">全224话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t6.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">青春猪头少年不会梦到兔女郎学姐</p><p class="series">全13话</p><p class="count">2.1亿播放 · 413.5万弹幕</p></div></li><li><img src="./play_lib/t7.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">家庭教师HITMAN REBORN!</p><p class="series">全203话</p><p class="count">1.2亿播放 · 352.1万弹幕</p></div></li><li><img src="./play_lib/t8.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">月色真美</p><p class="series">全12话</p><p class="count">7173.7万播放 · 339.4万弹幕</p></div></li><li><img src="./play_lib/t1.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">男子高中生的日常</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t2.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">打工吧！魔王大人</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t3.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">全职猎人</p><p class="series">全92话</p><p class="count">5557万播放 · 96.1万弹幕</p></div></li><li><img src="./play_lib/t4.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">擅长捉弄的高木同学 第二季</p><p class="series">全12话</p><p class="count">6945.8万播放 · 172.9万弹幕</p></div></li><li><img src="./play_lib/t5.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">游戏王 怪兽之决斗</p><p class="series">全224话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t6.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">青春猪头少年不会梦到兔女郎学姐</p><p class="series">全13话</p><p class="count">2.1亿播放 · 413.5万弹幕</p></div></li><li><img src="./play_lib/t7.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">家庭教师HITMAN REBORN!</p><p class="series">全203话</p><p class="count">1.2亿播放 · 352.1万弹幕</p></div></li><li><img src="./play_lib/t8.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">月色真美</p><p class="series">全12话</p><p class="count">7173.7万播放 · 339.4万弹幕</p></div></li><li><img src="./play_lib/t1.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">男子高中生的日常</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t2.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">打工吧！魔王大人</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t3.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">全职猎人</p><p class="series">全92话</p><p class="count">5557万播放 · 96.1万弹幕</p></div></li><li><img src="./play_lib/t4.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">擅长捉弄的高木同学 第二季</p><p class="series">全12话</p><p class="count">6945.8万播放 · 172.9万弹幕</p></div></li><li><img src="./play_lib/t5.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">游戏王 怪兽之决斗</p><p class="series">全224话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t6.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">青春猪头少年不会梦到兔女郎学姐</p><p class="series">全13话</p><p class="count">2.1亿播放 · 413.5万弹幕</p></div></li><li><img src="./play_lib/t7.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">家庭教师HITMAN REBORN!</p><p class="series">全203话</p><p class="count">1.2亿播放 · 352.1万弹幕</p></div></li><li><img src="./play_lib/t8.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">月色真美</p><p class="series">全12话</p><p class="count">7173.7万播放 · 339.4万弹幕</p></div></li><li><img src="./play_lib/t1.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">男子高中生的日常</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t2.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">打工吧！魔王大人</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t3.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">全职猎人</p><p class="series">全92话</p><p class="count">5557万播放 · 96.1万弹幕</p></div></li><li><img src="./play_lib/t4.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">擅长捉弄的高木同学 第二季</p><p class="series">全12话</p><p class="count">6945.8万播放 · 172.9万弹幕</p></div></li><li><img src="./play_lib/t5.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">游戏王 怪兽之决斗</p><p class="series">全224话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t6.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">青春猪头少年不会梦到兔女郎学姐</p><p class="series">全13话</p><p class="count">2.1亿播放 · 413.5万弹幕</p></div></li><li><img src="./play_lib/t7.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">家庭教师HITMAN REBORN!</p><p class="series">全203话</p><p class="count">1.2亿播放 · 352.1万弹幕</p></div></li><li><img src="./play_lib/t8.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">月色真美</p><p class="series">全12话</p><p class="count">7173.7万播放 · 339.4万弹幕</p></div></li><li><img src="./play_lib/t1.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">男子高中生的日常</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t2.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">打工吧！魔王大人</p><p class="series">全13话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t3.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">全职猎人</p><p class="series">全92话</p><p class="count">5557万播放 · 96.1万弹幕</p></div></li><li><img src="./play_lib/t4.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">擅长捉弄的高木同学 第二季</p><p class="series">全12话</p><p class="count">6945.8万播放 · 172.9万弹幕</p></div></li><li><img src="./play_lib/t5.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">游戏王 怪兽之决斗</p><p class="series">全224话</p><p class="count">1.1亿播放 · 115.3万弹幕</p></div></li><li><img src="./play_lib/t6.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">青春猪头少年不会梦到兔女郎学姐</p><p class="series">全13话</p><p class="count">2.1亿播放 · 413.5万弹幕</p></div></li><li><img src="./play_lib/t7.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">家庭教师HITMAN REBORN!</p><p class="series">全203话</p><p class="count">1.2亿播放 · 352.1万弹幕</p></div></li><li><img src="./play_lib/t8.webp" alt=""><div class="video-info"><!-- <h4>男子高中生的日常</h4> --><p class="title">月色真美</p><p class="series">全12话</p><p class="count">7173.7万播放 · 339.4万弹幕</p></div></li></ul></div></div><!-- footer模块开始 --><div class="footer"><div class="footer-top"><div class="wrapper"><div class="footer-top-left footer-top-lm"><p>bilibili</p><ul><li>关于我们</li><li>联系我们</li><li>用户协议</li><li>加入我们</li><li>友情链接</li><li>隐私协议</li><li>bilibili认证</li><li>Incestor Relations</li></ul></div><div class="footer-top-middle footer-top-lm"><p>传送门</p><ul><li>协议汇总</li><li>活动中心</li><li>活动专题页</li><li>侵权申诉</li><li>帮助中心</li><li>社区中心</li><li>壁纸站</li><li>广告合作</li><li>名人堂</li><li>MCN管理中心</li><li>高级弹幕</li><li>品牌号官网</li></ul></div><div class="footer-top-right"><ul><li><div class="pic"></div><p>下载APP</p></li><li><div class="pic"></div><p>公益</p></li><li><div class="pic"></div><p>官方微博</p></li><li><div class="pic"></div><p>官方微信</p></li></ul></div></div></div><div class="footer-bottom"><p><span>营业执照</span> 信息网络传播视听节目许可证：0910417 网络文化经营许可证 沪网文【2019】3804-274号 广播电视节目制作经营许可证：（沪）字第01248号增值电信业务经营许可证 沪B2-20100043</p><p>互联网ICP备案：沪ICP备13002172号-3出版物经营许可证 沪批字第U6699 号互联网药品信息服务资格证 沪-非经营性-2016-0143营业性演出许可证 沪市文演（经）00-2253 |</p><p>不良信息举报邮箱：help@bilibili.com涉未成年举报邮箱：teenprotect@bilibili.com不良信息举报电话：4006262233转1</p><p> <em class="one"></em> 上海互联网举报中心 | 12318全国文化市场举报网站|</p><p> <em class="two"></em> 沪公网安备31011002002436号 | 儿童色情信息举报专区 | 扫黄打非举报</p><p>网上有害信息举报专区：</p><p><em class="two"></em>中国互联网违法和不良信息举报中心亲爱的市民朋友, 上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</p><p>公司名称：上海宽娱数码科技有限公司 | 公司地址：上海市杨浦区政立路485号 | 电话：021-25099888</p><p class="pic"><img src="./images/link_img1.png" alt=""><img src="./images/link_img2.png" alt=""><img src="./images/link_img3.png" alt=""></p></div></div>
</body></html>

3.css代码

/* 下面的播放页 */
.wrapper {width: 1215px;margin: 0 auto;
}.play-video {margin-top: 20px;
}.play-left {float: left;width: 864px;
}
/* 大视频 */
.bigvideo {position: relative;width: 864px;box-shadow: 0 0 3px 3px #ccc;
}.bigvideo video {display: block;width: 864px;
}
/* 视频描述 */
.info {position: absolute;left: 0;top: 0;font-size: 18px;font-family: 楷体;color: rgba(249, 218, 174, 0.5);background-color: transparent;
}
/* 工具栏 */
.play-left .toolbar {height: 55px;line-height: 55px;
}.play-left .toolbar li {float: left;height: 55px;margin-right: 35px;
}.play-left .toolbar li em {float: left;font-size: 28px !important;margin-right: 10px;color: #757575;
}.play-left .toolbar li span {float: left;font-size: 14px;color: #505050;
}/* 碧海之蓝模块 */
.media {height: 212px;padding: 16px 0;border-top: 1px solid #e7e7e7;border-bottom: 1px solid #e7e7e7;
}
/* 左边的封面 */
.media-left {float: left;width: 134px;height: 179px;
}.media-left img {width: 100%;height: 100%;
}
/* 右边的描述 */
.media-right {float: right;width: 715px;height: 175px;/* background-color: pink; */
}.media-right .title {width: 715px;height: 32px;/* background-color: orange; */
}.media-right .title h3 {display: inline-block;color: #212121;font-weight: 400;
}.title-right {float: right;
}.title-right .Comment {float: left;height: 32px;line-height: 32px;color: #18191c;padding: 0 12px;border-radius: 2px;border: 1px solid #c0c0c0;
}.title-right .Comment span {font-size: 14px;color: #505050;
}.title-right .catch {float: left;height: 32px;line-height: 32px;padding: 0 12px;margin-left: 10px;color: #fff;border-radius: 2px;background-color: #fb7299;
}.media-right .media-count,
.dramaSeries,
.paragraph {font-size: 12px;/* background-color: rgb(226, 116, 116); */
}.media-count {color: #999;
}.dramaSeries,
.paragraph {margin-top: 10px;color: #212121;
}.dramaSeries .series {margin: 0 10px;
}.paragraph {-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
}.media-right .score {margin-top: 15px;
}.media-right .score p {color: #ffa726;
}.media-right .score p .nine {font-size: 24px;font-weight: 700;
}.media-right .score p .min {font-size: 12px;
}.media-right .score .last {margin-top: 5px;font-size: 12px;color: #999;
}/* 点评模块 */
.review-top {height: 24px;line-height: 24px;font-size: 14px;margin-top: 10px;color: #212121;
}.review-top p {float: left;
}.review-top span {float: right;
}.review-bottom {margin-top: 16px;height: 176px;border-bottom: 1px solid #e7e7e7;
}.review-bottom li {float: left;width: 278px;height: 176px;padding: 12px 16px;margin-right: 15px;background-color: #f4f4f4;border-radius: 5px;
}.review-bottom li:nth-child(3) {margin-right: 0;
}.review-bottom-title span {font-size: 14px;color: #fb7299;margin-right: 5px;
}.review-bottom-title em {color: #ffa726;
}.review-bottom-content {margin-top: 10px;height: 80px;line-height: 1.3;font-size: 12px;color: #212121;-webkit-line-clamp: 5;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
}.review-bottom-date {margin-top: 10px;color: #999;font-size: 12px;
}/* 点评窄栏 */
.comment-little {margin: 20px 0;font-size: 18px;color: #222;
}/* 点评头部*/
.comment-header {height: 37px;line-height: 37px;font-size: 14px;
}.comment-header .select {float: left;color: #00a1d6;margin-right: 20px;border-bottom: 1px solid #00a1d6;
}.comment-header p {float: left;}/* 评论内容 */
.comment-list ul {padding-top: 20px;
}.comment-list ul li {padding: 15px 20px;overflow: hidden;/* background-color: skyblue; */
}.comment-list .list-left {float: left;width: 48px;height: 48px;
}.comment-list .list-left img {width: 100%;height: 100%;border-radius: 50%;
}.comment-list .list-right {float: left;margin-left: 15px;font-size: 12px;
}.comment-list .list-right .user-info span {color: #f97298;font-weight: 700;
}.comment-list .list-right .user-info em {font-size: 20px !important;vertical-align: middle;margin-left: 5px;
}.comment-list .list-right .text {margin-top: 5px;color: #000;line-height: 1.7;
}.comment-list .list-right .text-date {margin: 8px 0;color: #99a2aa;
}.list-right .user-info img {width: 24px;height: 24px;border-radius: 50%;vertical-align: middle;margin-right: 5px;
}.list-right .user-info i {margin-left: 10px;
}.list-right .user-info .lv6 {color: #ff0000;
}.list-right .user-info .lv5 {color: #ee672a;
}.list-right .user-info .lv4 {color: #febb8b;
}
/* ------------------------------------------------------- *//* 右边 */
.play-right {float: right;width: 320px;/* background-color: pink; */
}/* 开通大会员观看 */
.play-right .vip-btn {position: relative;width: 320px;height: 44px;background-color: #00a1d6;text-align: center;line-height: 44px;color: #fff;border-radius: 7px;
}.play-right .vip-btn img {position: absolute;top: -16px;left: 5px;width: 60px;height: 60px;
}/* 弹幕列表 */
.play-right .bulletScreen-list {width: 320px;height: 46px;line-height: 46px;background-color: #f4f4f4;margin: 20px 0;padding: 0 15px;border-radius: 3px;font-size: 16px;
}.play-right .bulletScreen-list em {color: #757575;
}/* 选集 */
.play-right .list-title {height: 42px;padding: 0 15px;line-height: 42px;background-color: #f4f4f4;
}.play-right .list-title {font-size: 16px;
}.play-right .list-title em {font-size: 24px !important;vertical-align: middle;
}.play-right .list-title i {float: right;font-size: 12px;color: #999;
}.play-right .list-title i::after {content: '\e60e';font-family: "iconfont" !important;font-size: 16px !important;color: #000;margin-left: 5px;
}/* 选集内容 多个li */
.list-content {height: 148px;padding: 0 16px;background-color: #f4f4f4;
}.list-content li {position: relative;float: left;width: 64px;height: 36px;line-height: 36px;text-align: center;margin-right: 10px;margin-bottom: 10px;font-size: 14px;color: #000;background-color: #fff;border: 1px solid #e5e9ef;
}.list-content li:nth-child(4n) {margin-right: 0;
}.list-content li:nth-child(n+9) {margin-bottom: 0;
}.list-content .selected {background-color: #00a1d6;color: #fff;
}/* 会员定位 */
.list-content li:nth-child(n+2)::after {content: '会员';position: absolute;top: -5px;right: -2px;width: 32px;height: 16px;line-height: 16px;font-size: 12px;border-radius: 3px;text-align: center;color: #fff;background-color: #fb7299;
}/* 相关推荐 */
.recommend-title {margin-top: 15px;color: #222;font-size: 16px;
}/* 推荐视频列表 */
.recommend-list {margin-top: 10px;overflow: hidden;
}.recommend-list li {margin-bottom: 10px;height: 88px;
}.recommend-list img {float: left;width: 141px;height: 88px;border-radius: 5px;
}.recommend-list .video-info {float: left;margin-left: 10px;width: 165px;height: 88px;font-size: 12px;color: #999999;
}.recommend-list .video-info .title {height: 36px;font-size: 14px;color: #212121;
}.recommend-list .video-info .series {margin-top: 15px;}.recommend-list .video-info .count {margin-top: 5px;
}

相关文件见下篇

纯HTML5+CSS3仿B站播放页相关推荐

  1. 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~

    b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...

  2. html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...

  3. html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...

  4. 18种各式各样的loading，纯html5+css3无图片

    网友总结的18种各式各样的loading,纯html5+css3无图片,我再次整理下 <!DOCTYPE html> <html lang='zh_CN'> <head& ...

  5. 纯html5+css3能写出什么惊人效果

    纯html5+css3能写出什么惊人效果? 在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性 首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video)  离 ...

  6. css3仿QQ网页播放器及分享功能实现

    css3仿QQ网页播放器及分享功能实现  <!doctype html> <html lang="en">  <head>  <!--声明 ...

  7. 纯html5+css3能写出什么惊人效果?

    在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性 首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离线存储, 新的表单元素, 新的表单控件 地理定 ...

  8. 纯HTML5 CSS3制作生日蛋糕

    以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...

  9. 纯HTML5+CSS3制作生日蛋糕

    以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...

最新文章

  1. vs2012下编码引起的一个神坑
  2. Java复习2-对象与类
  3. 第二种PHP协议,PHP多种形式,第二种使用来自First的数据
  4. Hello World on Impala
  5. 全球及中国微电网市场规模容量及建设运营模式分析报告2021年版
  6. 爱情麻辣烫防骗子—骗子谎称学生出事让家长汇款
  7. nginx 并发过十万
  8. 《FPGA 应用开发入门与典型实例》(修订版)
  9. mysql把字段名批量改为大写_MySQL批量将表名或者列名大小写转换
  10. VS2005、vs2008+WinXPDDK+DDKWizard配置驱动开发环境
  11. 蓝墨云班课php答案,蓝墨云班课试题库答案
  12. 【转】聚类——GMM
  13. 超级账本基金会执行董事Daniela Barbosa：开源区块链已成主流
  14. 代码设置margintop_js获取css属性，更改margin-top属性，给每个a标签的margin-top属性在原基础上 +5px...
  15. window与linux双系统文件互通解决方案
  16. 网页怎么算切屏_电脑怎么切屏
  17. nginx proxy_pass匹配路径
  18. Android程序员该如何进阶？，2021Android面经
  19. 【程序员修炼日志】校招与社招的感悟
  20. CLEval: Character-Level Evaluation for Text Detection and Recognition Task 论文阅读

热门文章

  1. 银行资产业务和负债业务
  2. [论文解读]微信看一看实时Look-alike推荐算法
  3. 四、Docker安装mysql
  4. 《科学之路》读书笔记
  5. 动态规划算法学习（一）爬楼梯和凑金额
  6. 使用vi编辑器创建文本文件
  7. 怎么制作gif动态图 QQ动态表情包怎么制作
  8. 基于Redis实现在线游戏积分排行榜
  9. 2022-2028全球与中国锂电池隔膜市场现状及未来发展趋势
  10. C# 窗体 如何设置背景图片