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">
<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高燃" />
<title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
<!-- 引入网站icon -->
<link rel="shortcut icon" href="./icon/favicon.ico">
<!-- 引入基础类样式表 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入公用视频的代码 -->
<link rel="stylesheet" href="./css/video.css">
<!-- 引入index.css(确保index.css在最下面) -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入字体图标css文件 -->
<link rel="stylesheet" href="./font/font/iconfont.css">
</head>
<body>
<!--------------------- 头部导航栏start------------------- -->
<header>
<!-- 视频的动态背景 -->
<video src="./video/banner2.webm" muted autoplay loop></video>
<!-- 导航栏 nav需要盖在视频上面,所以需要加定位 -->
<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" value="请输入您的搜索内容">
</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>
<!-- logo效果 -->
<div class="logo">
<img src="./images/logo1.png" alt="">
</div>
</header>
<!---------------------- 头部导航栏end------------------>
<!---------- 频道模式start-------------->
<div class="channel wrapper">
<!-- 频道的左侧 -->
<div class="channel-left">
<ul>
<li>
<em class="iconfont icon-fengkong "></em>
<p>动态</p>
</li>
<li>
<em class="iconfont icon-remen "></em>
<p>热门</p>
</li>
<li>
<em class="iconfont icon-fenlei "></em>
<p>频道</p>
</li>
</ul>
</div>
<!-- 频道列表 -->
<div class="channel-list">
<ul>
<li>番剧</li>
<li>国创</li>
<li>综艺</li>
<li>动画</li>
<li>鬼畜</li>
<li>舞蹈</li>
<li>娱乐</li>
<li>科技</li>
<li>美食</li>
<li>电影</li>
<li>电视剧</li>
<li>纪录片</li>
<li>游戏</li>
<li>音乐</li>
<li>影视</li>
<li>知识</li>
<li>资讯</li>
<li>更多</li>
</ul>
</div>
<!-- 频道的右侧 -->
<div class="channel-right">
<ul>
<li>
<em class="iconfont icon-zhuanlan "></em>
<span>专栏</span>
</li>
<li>
<em class="iconfont icon-wodehuodong "></em>
<span>活动</span>
</li>
<li>
<em class="iconfont icon-shequ "></em>
<span>社区中心</span>
</li>
<li>
<em class="iconfont icon-15 "></em>
<span>直播</span>
</li>
<li>
<em class="iconfont icon-bofang "></em>
<span>课堂</span>
</li>
<li>
<em class="iconfont icon-dianyingzhiye-gequbangdianjitai
"></em>
<span>新歌热榜</span>
</li>
</ul>
</div>
</div>
<!---------- 频道模式end-------------->
<!--------- 轮播图 start------- -->
<div class="banner wrapper">
<!-- 轮播图左边 -->
<div class="carousel">
<!--轮播图 图片 -->
<img src="./lib/轮播图.webp" alt="">
<!-- 轮播图 信息区域 -->
<div class="carousel-info">
<div class="carousel-info-HD">
<h3>有种喜欢叫满眼都是你</h3>
<div class="carousel-info-HD-btn">
<em class="iconfont icon-jiantou"></em>
<em class="iconfont icon-arrow-right"></em>
</div>
</div>
<div class="arousel-info-BD">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<!-- 轮播图右边---视频页 -->
<div class="video">
<ul>
<li>
<img src="./lib/v1.webp" alt="">
<div class="pageview">
<span class="w">11.8万</span>
<span class="q">1369</span>
<span class="time">07:00</span>
</div>
<p class="topic">一口气《游戏王》全集!</p>
<p class="writer">红豆动漫 · 6-18</p>
</li>
<li><img src="./lib/v2.webp" alt="">
<div class="pageview">
<span class="w">58.2万</span>
<span class="q">645</span>
<span class="time">04:01</span>
</div>
<p class="topic">这只猫,让我开心了整整四分钟!</p>
<p class="writer">阿浪171 · 7-4</p>
</li>
<li>
<img src="./lib/v3.webp" alt="">
<div class="pageview">
<span class="w">108.1万</span>
<span class="q">2411</span>
<span class="time">01:19</span>
</div>
<p class="topic">全网播放三千万的《声声慢》翻唱来啦！国语&粤语你更想听哪个呢？</p>
<p class="writer">浅影阿_ · 6-23</p>
</li>
<li><img src="./lib/v4.webp" alt="">
<div class="pageview">
<span class="w">205.8万</span>
<span class="q">4555</span>
<span class="time">04:48</span>
</div>
<p class="topic">当你写了个BUG但是刚好能运行!</p>
<p class="writer">酥妃大魔王 · 6-17</p>
</li>
<li>
<img src="./lib/v5.webp" alt="">
<div class="pageview">
<span class="w">85.5万</span>
<span class="q">862</span>
<span class="time">02:24</span>
</div>
<p class="topic">有 人 等 烟 雨 ， 有 人 怪 雨 急</p>
<p class="writer">橘子味i汽水 · 6-16</p>
</li>
<li><img src="./lib/v6.webp" alt="">
<div class="pageview">
<span class="w">638.1万</span>
<span class="q">8116</span>
<span class="time">11:59</span>
</div>
<p class="topic">汤姆：法庭上禁止电音摇！！！</p>
<p class="writer">芦苇十三少 · 6-17</p>
</li>
</ul>
</div>
</div>
<!--------- 轮播图 end------- -->
<!-- 推广模块开始 -->
<div class="extend wrapper">
<!-- 顶部推广文字栏 -->
<div class="top">
<div class="top-left">
<img src="./images/推广.png" alt="">
<span>推广</span>
</div>
</div>
<!-- 推广下面视频 -->
<div class="bottom">
<div class="video">
<ul>
<li><img src="./lib/t1.webp" alt="">
<p class="topic">每天建模一小时，趁年轻多学点技能养活自己！</p>
<p class="writer">博学教育</p>
</li>
<li><img src="./lib/t2.webp" alt="">
<div class="pageview">
<span class="w">14.2万</span>
<span class="q">1224</span>
<span class="time">12:01</span>
</div>
<p class="topic">粘在一起の家！房子可不是夹心饼干啊！你搁这变形金刚呢？</p>
<p class="writer">百万巨星麒麟君 · 7-19</p>
</li>
<li><img src="./lib/t3.webp" alt="">
<p class="topic">IGN评分10，媒体玩家吹爆的公认神作！</p>
<p class="writer">极限竞速：地平线</p>
</li>
<li><img src="./lib/t4.webp" alt="">
<div class="pageview">
<span class="w">12万</span>
<span class="q">167</span>
<span class="time">01:45</span>
</div>
<p class="topic">史上最差《武林外传》动画版？</p>
<p class="writer">彩虹咸鱼YA · 7-22</p>
</li>
<li><img src="./lib/t5.webp" alt="">
<div class="pageview">
<span class="w">6.1万</span>