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

前言

今天给大家分享一下，模仿哔哩哔哩首页的直播部分的设计
先来看看网站的原稿设计

接下来看看完成的效果

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

<!--* @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"><imgsrc="https://i0.hdslb.com/bfs/archive/0b7eef054547750e6bfeff6f36c83e83d2a058fb.png"alt=""/></header><!-- 正在直播列表 --><div class="all"><div class="top-content"><imgstyle="padding-right: 15px; width: 36px; height: 36px"src="https://wx3.sinaimg.cn/mw690/006nMOhAgy1gj24apl46mj301g01f0sh.jpg"alt=""/><span class="video-title"><astyle="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"><imgclass="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><imgclass="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><imgclass="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><imgclass="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><imgclass="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><imgclass="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><imgclass="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><imgclass="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格式

学习前端——仿写哔哩哔哩直播部分相关推荐

Java学习之仿写Tomcat
一.原理讲解 OSI七层模型如何调动后四层协议先仿写一个socket服务端和客户端接发数据的demo /*** 服务器端*/ public class ServerA {//main方法是主线程要 ...
哔哩哔哩网页仿写总结
哔哩哔哩网页仿写总结神在成为神之前也是人--<头文字D>阿木 1.哔哩哔哩的分区布局真的非常美妙 2.学习到新的css知识.通过开发者工具,去模仿顶级页面的开发技巧,还有css的布局思路 ...
Flutter高级进阶实战仿哔哩哔哩APP学习笔记
Flutter高级进阶实战仿哔哩哔哩APP学习笔记近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...
仿写哔哩哔哩的头部导航部分（HTML+CSS静态）
介绍先来看看哔哩哔哩的头部导航部分效果,B站的头部导航背景图片使用的是动态叠加(变形和动画的效果),我们可以采用静态的图片的方式来实现背景图的部分效果来看看我的实现效果,是不是可以非常棒? 代码 ...
实现在不同宽度设备中等比缩放的网页效果(仿写哔站首页)
项目目录及文件: <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
【Vue项目】仿哔哩哔哩网页
一. 项目开发的背景目前市面上,有一些以短视频为主的手机应用越来越多.如哔哩哔哩.抖音.小红书.快手.youtube,这些手机短视频软件应用,个人认为,之所以能拔地而起,主要是由于以下几点:1.门槛 ...
b站前端构架_技术干货：哔哩哔哩（B站）功能框架图 ——以B站为例分析面对秋招必须要掌握的前后端...
本次夏令营知了堂项目经理以B站为原型,带着大家熟悉了软件的开发流程及还原了部分功能模块.现在就将B站功能架构图及前后端技术栈给大家.同时从以B站技术为例给大家分析作为应届毕业生,面对秋季校招时必须要掌 ...
哔哩哔哩2018校招前端笔试
前言前几日,哔哩哔哩在电子科大清水河校区举行了校招宣讲会.B站不用多说,中国最大的同性交友网站,不去工作也能去看看. 当晚便进行了部分笔试,下面是我参加的前端笔试试题和我自己的解答,分享给大家. 博 ...
哔哩哔哩php开发工作怎么样,[上海] [哔哩哔哩]-努力寻求[PHP /C++/Andro/iOS/前端开发工程师]-会是你吗？...
-------------------- [我们是谁?] -------------------- [哔哩哔哩弹幕网] -简称 ["bilibili"] [bilibili] 是一 ...
uniapp开发短视频系统仿哔哩哔哩
uniapp开发短视频系统仿哔哩哔哩,是一款多端点播系统.录播.可以发布多级选集视频.问答.题库.资讯.营销推广.等功能. 源码包含:h5+小程序+app 前台用户直接发布视屏.录播视屏多端录播课程 ...

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

前言

学习前端——仿写哔哩哔哩直播部分相关推荐

最新文章

热门文章