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 a
Boo”所盯上了的伊织，在会长时·田信治和三年级学生·寿龙次郎的怂恿下，不知不觉已经身为社团的一员加入了他们的愚蠢喧嚣中。在大学中认识的虽然长得帅但性格却很遗憾的宅男——今村耕平也加入其中，他们的青春向着越来越奇怪的方向转进。
明明在寄住的地方有着可爱的表姐妹——古手川姐妹，但自己却被妹妹千纱当成垃圾看待，而姐姐奈奈华又是重度妹控，根本无法成为对象。
在可爱的全裸笨蛋们的包围之下，伊织的大学生活究竟会变得如何……。
</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">
看完这部动
该博客详细介绍了如何使用纯HTML5和CSS3来仿制哔哩哔哩(B站)的播放页面，包括页面的设计效果图，HTML结构和CSS样式代码的编写。
最低0.47元/天 解锁文章
扫一扫
8665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
