学习前端——仿写哔哩哔哩直播部分

最新推荐文章于 2023-01-04 18:45:28 发布
最新推荐文章于 2023-01-04 18:45:28 发布
阅读量1.7k 收藏 20
点赞数 7
分类专栏： 04-前端技术 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44723773/article/details/108809428
版权

前言

今天给大家分享一下，模仿哔哩哔哩首页的直播部分的设计
先来看看网站的原稿设计
在这里插入图片描述
接下来看看完成的效果
在这里插入图片描述

话不多说，直接上源码，在源代码中涉及了一些文件和图片的使用，我会把图片附在文末部分。

<!--
 * @Author: OriginalCoder
 * @Date: 2020-09-25 17:34:00
 * @version: 
 * @LastEditTime: 2020-09-25 23:13:36
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <link rel="shortcut icon" href="favicons/bilibili-fill.png" />
    <style type="text/css">
    html {
        width: 100%;
        height: 100%;
    }
    a {
        color: black;
      }
      a:link {
        text-decoration: none;
      } /* 未被访问的链接 */
      a:visited {
        text-decoration: none;
      } /* 已被访问的链接 */
      a:hover {
        color: #4e6ef2;
        text-decoration: none;
      } /* 鼠标指针移动到链接上 */
      a:active {
        text-decoration: none;
      }
      #main {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        width: 70%;
      }
        /* banner图片等比例缩小 */
       .banner{padding-bottom:34px;}
 
       .banner,.banner a,.banner img{width: 100%;height: 100%;}
      .pic {
        height: 228px;
        width: 280px;
      }
      .picture {
        height: 125px;
        width: 206px;
      }
      #mian div {
        width: 100px;
        height: 100px;
      }
      .all {
        /* display: flex;
        flex-direction: column; */
        padding-right: 95px;
        padding-left: 105px;
        margin-right: auto;
        margin-left: auto;
      }
      .live-card {
        /* color: #505050;
        font-size: 12px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: 206px; */
      }
      .row {
        padding-left: 15px;
        padding-right: 15px;
      }
      .top-content * {
        /* 文字在图片后面居中对齐 */
        display: inline-block;
        vertical-align: middle;
        padding-top: 10px;
        padding-bottom: 5px;
        /* left: 120px; */
      }
      .video-title {
        font-size: 24px;
        color: #000000;
      }
      .text-info {
        text-align: center;
        font-size: 12px;
        box-sizing: border-box;
        margin: 0;
        padding-left: 30px;
        color: #505050;
        line-height: 28px;
      }
      .swap {
          padding-left: 417px;
      }
      .btn {
          font-size: 12px;
          height: 28px;
          width: 60px;
          line-height: 6px;
          border: none;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          margin: 4px 2px;
      }
      .other {
        padding-left: 15px;
        
      }
      .tab-switch {
        color: #505050;
        font-size: 12px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 12px;
        line-height: 18px;
        height: 22px;
        margin-right: 20px;
        border-bottom: 2px solid;
        padding: 0px;
      }
      .container {
        width: 1160px;
        height: 520px;
        margin: 0 auto;
        display: flex;
        border: 4px solid #ededed;
        border-radius: 4px;
      }
      .icon {
        height: 36px;
        width: 36px;
        padding-top: 30px;
        padding-left: 120px;
      }
      /* 兄弟姐妹，这个公司没有年终奖，老板特别抠
      很喜欢给大家画饼，我就是看到这个离了职
      另外现在的这个项目很多bug，
      及减持不了多久的，祝你好运，告辞！ */
      .live {
        padding-left: 30px;
      }
      .right {
        float: right;
        width: 320px;
        height: 330px;
        box-sizing: border-box;

      }
      .slide-pic {
          padding-top: 10px;
          width: 315px;
          height: 367px;
      }
      table {
          position: absolute;
      }
      .up {
        font-size: 12px;
        cursor: pointer;
        color: #00a1d6;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        line-height: 16px;
      }
      .up-cover {
        font-size: 12px;
        cursor: pointer;
        color: #212121;
        line-height: 16px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        position: relative;
      }
      .face {
        position: absolute;
        font-size: 12px;
        color: #212121;
        line-height: 16px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        vertical-align: middle;
        border-style: none;
        width: 36px;
        height: 36px;
        display: inline-block;
        border-radius: 50%;
        background: #f7f7f7;
        margin-top: 20px;
      }
      .txt {
          padding-left: 50px;
      }
      .name {
          font-size: 14px;
          font-weight: bold;
          /* padding-left: 50px; */
      }
      .tag {
        font-size: 12px;
        line-height: 16px;
        color: #999;
        margin-top: 8px;
      }
    </style>
  </head>
  <body>
    <!-- 头部导航栏 -->
    <header class="banner">
      <img
        src="https://i0.hdslb.com/bfs/archive/0b7eef054547750e6bfeff6f36c83e83d2a058fb.png"
        alt=""
      />
    </header>
    <!-- 正在直播列表 -->
    <div class="all">
      <div class="top-content">
        <img
          style="padding-right: 15px; width: 36px; height: 36px"
          src="https://wx3.sinaimg.cn/mw690/006nMOhAgy1gj24apl46mj301g01f0sh.jpg"
          alt=""
        />
        <span class="video-title">
          <a
            style="font-size: 20px"
            href="https://live.bilibili.com/?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.1"
            target="blank"
            >正在直播</a
          >
          <div class="text-info">
            <span>当前共有26409个在线直播</span>
          </div>
        </span>
        <span class="swap">
            <button class="btn">换一换</button>
            <button class="btn">更多</button>
        </span>
        <span class="other">
            <div class="tab-switch">直播排行</div>
            <div class="tab-switch">关注的主播</div>
            <div class="tab-switch">为你推荐</div>
        </span>
      </div>
    <table class="tab" cellspacing="10">
      <tr>
        <td>
            <div style="position:relative; width:100px height:100px">
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/vc/f92960eac592cb03b49fbbed2985b261fa416858.jpg"
            alt=""
          />
          <span style="position:absolute;">9401</span>
          </div>
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i1.hdslb.com/bfs/face/c082025ef7f7351030a41c0c761c6ccd48b34cc8.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">哔哩哔哩王者荣耀赛事</p></a>
                      <p class="title">武汉eStarPro vs RW侠</p>
                      <p class="tag">王者荣耀</p>
                  </div>
              </div>
          </div>
        </td>
        <td>
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/vc/dea5690be7dce5e132226836849bb598306a06f3.png"
            alt=""
          />
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i2.hdslb.com/bfs/face/7e56f8b0f342ca0325ae50821bf19384072bd9d5.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">幻境光影</p></a>
                      <p class="title">走进比利时法兰得斯，全息...</p>
                      <p class="tag">户外</p>
                  </div>
              </div>
          </div>
        </td>
        
        <td>
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/live/new_room_cover/998f92ee8513c03ac81f9585be43d5866b1b66b3.jpg"
            alt=""
          />
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i2.hdslb.com/bfs/face/03e7f3f6d88563038e275298c2cd942d2ac99d6a.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">白神遥Haruka</p></a>
                      <p class="title">PUBG的苏帕海豹！</p>
                      <p class="tag">虚拟主播</p>
                  </div>
              </div>
          </div>
        </td>
        <td>
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/live/user_cover/c4feb13f58f01a5646869d64bc2c8ee5730b010c.jpg"
            alt=""
          />
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i0.hdslb.com/bfs/face/d6ce0a652840166789873ea3b623e828af59b2e4.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">小菜刀夫斯基</p></a>
                      <p class="title">什么标题都无法让你点进来</p>
                      <p class="tag">视频聊天</p>
                  </div>
              </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/live/new_room_cover/2867490b8b069c35a158be5ba58abd7b7e6ca121.jpg"
            alt=""
          />
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i0.hdslb.com/bfs/face/f3828cb7eb627cfdb334a10009d2b6171afb1535.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">打滚的白面包</p></a>
                      <p class="title">造女儿</p>
                      <p class="tag">绘画</p>
                  </div>
              </div>
          </div>
        </td>
        <td>
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/live/user_cover/b64f38e5c5a9d8cff50c6a9ffda932ced2fe3ed3.jpg"
            alt=""
          />
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i0.hdslb.com/bfs/face/386c8dfa4f00a87b30ce2959c118a189785ceb71.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">❀Sakulaˇ小舞</p></a>
                      <p class="title">四叶草剧场：梦醒！~♪</p>
                      <p class="tag">虚拟主播</p>
                  </div>
              </div>
          </div>
        </td>
        <td>
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/live/new_room_cover/36f9e0c9f600f406292936c1b1f791b62242af5c.jpg"
            alt=""
          />
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i0.hdslb.com/bfs/face/039020a19ae660d80f007dfc6fa2848cd06af3f1.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">绘伴-绘画教学课堂</p></a>
                      <p class="title">【板绘教学课堂】</p>
                      <p class="tag">绘画</p>
                  </div>
              </div>
          </div>
        </td>
        <td>
          <img
            class="picture"
            src="https://i0.hdslb.com/bfs/live/user_cover/cf7523853dd80dd0b9e49d21479d26f3acf02a61.jpg@309w_174h_1c_100q.webp"
            alt=""
          />
          <div class="up">
              <div class="up-cover">
                  <img class="face" src="https://i2.hdslb.com/bfs/face/c482f464081bb49f65c7dc3edbd029c62f95fc85.jpg" alt="">
                  <div class="txt">
                      <a href="https://live.bilibili.com/13?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.3" target="blank">
                        <p class="name">哔哩哔哩王者荣耀赛事</p></a>
                      <p class="title">努力学习丨朝六晚一</p>
                      <p class="tag">陪伴学习</p>
                  </div>
              </div>
          </div>
        </td>
    </tr>
    </table>
    <div class="right">
        <img class="slide-pic" src="https://i0.hdslb.com/bfs/live/564150a1ac4548241a83da6bef3cd432f30c5ca8.jpg" alt="">
    </div>
  </body>
</html>

哔哩哔哩的icon
在这里插入图片描述
其他图片等自己引用就好，需要上哔哩哔哩的图片名称改为bilibili-fill.png格式

王菜鸟
关注
专栏目录
仿哔哩哔哩直播平台
07-12
仿哔哩哔哩平台，代码需在真机中运行
仿哔哩哔哩代码
04-22
仿哔哩哔哩bilibili代码就是gocommonmaster仿哔哩哔哩的代码
哔哩哔哩网站前端源码_分享一个仿制哔哩哔哩镜子网站源码
weixin_32141627的博客
01-14 1063
我老婆非常喜欢看哔哩哔哩，前些天她兴奋地和我说哔哩哔哩网站有个隐藏的彩蛋，传送门http://www.ilidilid.com/，我看了下，相当于把镜子中的网站样子弄出来了。于是，我寻思着，把自己的博客也弄个这样的彩蛋，感觉还是有点意思的，代码非常简单，大家有兴趣的可以弄弄。QQ截图20180829204539.png (1.2 MB, 下载次数: 3)2018-8-29 20:48 上传QQ截图...
仿哔哩哔哩视频播放器源码
04-23
源码介绍： 域名/?url=，如果放在二级目录就是：域名/二级目录名/?url=，支持所有m3u8跟mp4资源，其他没测。 因为一般的采集站都是m3u8资源，所以够用了，播放器logo.直接替换logo.png文件即可， 源码仅供技术参考学习！严禁商业用途！
仿bilibili 哔哩哔哩 android源码
10-13
该程序是高仿旧版的哔哩哔哩，程序还有用户中心和放送时间表两个功能没有实现，其它的功能已经实现了，程序能正常运行；程序使用到了DanmakuFlameMaster弹幕插件、Vitamio4.0视频插件和StaggeredGridView瀑布流插件，sdk为android 4.0以上的版本，开发环境为eclipse
在线学习中弹幕高能现象的教育价值解析——以哔哩哔哩程序语言学习类课程为例.pdf
05-30
弹幕作为一种实时互动的方式，已经成为在线学习过程中不可或缺的一部分。然而，关于弹幕在教育领域的应用和价值，目前的研究还不够深入。 #### 二、研究目的与方法 ##### （一）研究目的 本研究旨在探讨在线学习中...
互联网背景下新媒体营销模式浅析——以哔哩哔哩为例.doc
09-15
互联网背景下新媒体营销模式浅析——以哔哩哔哩为例 在互联网高速发展的背景下，新媒体行业迎来了机遇也迎来了挑战。哔哩哔哩作为一家以二次元文化起步的新媒体平台，其发展的速度不容小觑，逐渐活跃在大众的视野中...
叙事·互动·元素——基于哔哩哔哩慢视频的分析.pdf
05-30
叙事·互动·元素——基于哔哩哔哩慢视频的分析
基于狂欢理论对弹幕现象的思考——以哔哩哔哩弹幕网站为例.pdf
05-30
基于狂欢理论对弹幕现象的思考——以哔哩哔哩弹幕网站为例
仿哔哩哔哩_android源代码
06-25
该程序是高仿旧版的哔哩哔哩，程序还有用户中心和放送时间表两个功能没有实现，其它的功能已经实现了，程序能正常运行；程序使用到了DanmakuFlameMaster弹幕插件、Vitamio4.0视频插件和StaggeredGridView瀑布流插件，sdk为android 4.0以上的版本，开发环境为eclipse
仿bilibili哔哩哔哩视频网站主页源码模板
11-06
仿bilibili哔哩哔哩视频网站主页源码模板 仿bilibili网站主页源码 哔哩哔哩（bilibili）现为国内领先的年轻人文化社区，该网站于2009年6月26日创建，被粉丝们亲切的称为“B站”。B站的特色是悬浮于视频上方的实时评论功能，爱好者称其为“弹幕”，这种独特的视频体验让基于互联网的弹幕能够超越时空限制，构建出一种奇妙的共时性的关系，形成一种虚拟的部落式观影氛围，让B站成为极具互动分享和二次创造的文化社区。B站目前也是众多网络热门词汇的发源地之一。
模仿b站的网页源码-带图片
03-19
b站源码（伪）-仅供参考
仿照映客直播界面的用户刷礼物的效果，详细可以看下映客的直播界面，看看刷礼物效果
11-11
仿照映客直播界面的用户刷礼物的效果，详细可以看下映客的直播界面，看看刷礼物效果 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
仿哔哩哔哩毕业设计—（包含完整源码可运行）.zip
04-23
仿哔哩哔哩毕业设计—（包含完整源码可运行）.zip
电商的运营模式——以哔哩哔哩为例.pdf
07-09
内容电商是一种新型的电商模式，其核心在于以消费者为中心，通过创造能够触发客户情感共鸣的内容，以...通过关注哔哩哔哩的运营模式和策略，中小企业可以学习如何更好地结合内容营销与电商业务，提高自身的市场竞争力。
仿哔哩哔哩微信小程序源码
爱技术、爱生活、爱健康
06-28 1218
仿哔哩哔哩微信小程序源码
B站首页仿写
qq_64595930的博客
01-04 807
b站首页仿写
仿bilibili网站主页源码
01-09
哔哩哔哩（bilibili）现为国内领先的年轻人文化社区，该网站于2009年6月26日创建，被粉丝们亲切的称为“B站”。B站的特色是悬浮于视频上方的实时评论功能，爱好者称其为“弹幕”，这种独特的视频体验让基于互联网的弹幕能够超越时空限制，构建出一种奇妙的共时性的关系，形成一种虚拟的部落式观影氛围，让B站成为极具互动分享和二次创造的文化社区。B站目前也是众多网络热门词汇的发源地之一。
python抓取哔哩哔哩直播间信息
最新发布
06-04
Python可以通过requests库和BeautifulSoup库来实现抓取哔哩哔哩直播间信息。具体步骤如下： 1. 使用requests库向哔哩哔哩直播间发送网络请求，获取网页源代码。 2. 使用BeautifulSoup库解析网页源代码，提取所需信息。 3. 处理提取到的信息，进行展示或保存。 以下是一个简单的代码示例，用于抓取哔哩哔哩直播间的房间号、主播名和当前在线观众数： ```python import requests from bs4 import BeautifulSoup # 直播间页面的URL url = 'https://live.bilibili.com/XXXX' # 发送网络请求 response = requests.get(url) # 解析网页源代码 soup = BeautifulSoup(response.text, 'html.parser') # 提取所需信息 room_id = soup.select_one('.room-id').text.strip() anchor_name = soup.select_one('.anchor-name').text.strip() online_count = soup.select_one('.online-count').text.strip() # 展示抓取到的信息 print('房间号：', room_id) print('主播名：', anchor_name) print('在线观众数：', online_count) ``` 相关问题： 1. Python如何发送网络请求？ 2. 什么是BeautifulSoup库？如何使用它解析网页？ 3. 如何提取网页中的信息？ 4. Python中有哪些常用的数据处理和展示工具？
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王菜鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值