哔哩哔哩移动端页面搭建（iphoneSE）

已于 2024-09-19 16:05:52 修改
阅读量293 收藏 4
点赞数 3
分类专栏： HTML、CSS页面搭建 文章标签： 前端 经验分享 html css less vscode
于 2024-09-19 15:40:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zym_0409/article/details/142361946
版权

以尽量还原页面为目的。可滑动。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://s1.hdslb.com/bfs/static/jinkela/mstation-h5/css/mstation.6.425e6f5fbc4ae5e22dfcf88c6642bb8562b4726e.css">
    <link rel="stylesheet" href="./02bilibili.css">
</head>

<body>
    <!-- 1.头部 -->
    <header>
        <div class="header-top">
            <img class="header-top-logo" src="https://s1.hdslb.com/bfs/static/jinkela/long/mstation/logo-bilibili-pink.png@132w_60h_1c.webp" alt="">
            <div class="header-top-right">
                <i class="iconfont ic_search_tab"></i>
                <img src="https://i1.hdslb.com/bfs/face/00de4a711009ecaac84f9a3b4eeb353a773fa503.jpg@48w_48h_1c.webp"
                    alt="">
                <div>下载 App</div>
            </div>
        </div>
        <div class="header-nav">
            <!-- 溢出隐藏 -->
            <div class="header-nav-left">
                <div class="header-nav-list">
                    <div class="header-nav-item" style="color: #f69;">首页</div>
                    <div class="header-nav-item">动画</div>
                    <div class="header-nav-item">番剧</div>
                    <div class="header-nav-item">国创</div>
                    <div class="header-nav-item">音乐</div>
                    <div class="header-nav-item">舞蹈</div>
                    <div class="header-nav-item">会员购</div>
                    <div class="header-nav-item">直播</div>
                    <div class="header-nav-line"></div>
                </div>
            </div>
            <!-- 自己起的类名,在最后 -->
            <i class="iconfont general_pulldown_s header-nav-arrow"></i>
        </div>
    </header>
    <!-- 2.主体内容 -->
    <div class="main">
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
        <div class="main-item">
            <!-- 图片 -->
            <div style="position: relative;">
                <img src="https://i1.hdslb.com/bfs/archive/ec3cd9f7a3374002e9aedbc01c6a4aa56ee8e14c.jpg@960w_540h_1c.webp"
                    alt="">
                <div class="main-item-play">
                    <!-- 播放量 -->
                    <div>
                        <i class="iconfont icon_shipin_bofangshu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                    <!-- 弹幕量 -->
                    <div class="main-item-danmu">
                        <i class="iconfont icon_shipin_danmushu" style="margin-right: 1.33vw;"></i>
                        <span>175300</span>
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="main-item-text">
                内容爆炸！《崩坏3》×《崩坏：星穹铁道》联动幕后揭秘
            </div>
        </div>
    </div>
    <!-- 3.固定按钮 -->
     <div class="download">
        <i class="iconfont Navbar_logo"></i>
        <span>打开App，看你感兴趣的视频</span>
     </div>
</body>

</html>

图片和字体图标引用官网在线图片图标！除了顶部头像外。

CSS：

这里用less语言写的，会自动生成css文件，记得引用。

创建less文件——保存——引用

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header{
    position: fixed;
    background-color: #fff;
    z-index: 3;
}
.header{
    &-top{
        display: flex;
        justify-content: space-between;
        height: 11.73vw;
        align-items: center;
        padding: 0 3.2vw 0 4.8vw;
        &-logo{
            width: 17.6vw;
            height: 8vw;
        }
        &-right{
            display: flex;
            i{
                font-size: 5.87vw;
                color: #ccc;
                margin-right: 5.87vw;
            }
            img{
                width: 6.4vw;
                height: 6.4vw;
                border-radius: 50%;
                margin-right: 3.2vw;
            }
            div{
                width: 19.2vw;
                height: 6.4vw;
                color: #fff;
                font-size: 3.2vw;
                background-color: #f69;
                line-height: 6.4vw;
                text-align: center;
                border-radius: 1.06667vw;
                margin-left: 2.13vw;
            }
        }
    }
    &-nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e7e7e7;
        &-left{
            width: 89.33vw;
            height: 10.67vw;
            overflow: hidden;
        }
        &-list{
            display: flex;
            position: relative;
        }
        &-item{
            // 在手机端,为了让用户好点击,用padding
            padding: 0 4.27vw;
            // 给子元素设置,让它不会变形.
            flex-shrink: 0;
            line-height: 10.67vw;
            font-size: 3.73vw;
            color: #505050;
        }
        &-line{
            position: absolute;
            left: 4.27vw;
            bottom: 0vw;
            width: 7.47vw;
            height: 0.53vw;
            background-color: #f69;
        }
        &-arrow{
            margin: 0 2.67vw;
            color: #aaa;
        }
    }
}
.main{
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    padding: 0 1.33vw;
    padding-top: 22.67vw;
    &-item{
        flex: 50%;
        flex-shrink: 0;
        padding: 2.13vw 1.2vw;
        img{
            width: 46.13vw;
            height: 25.87vw;
        }
        &-text{
            width: 46.13vw;
            font-size: 3.2vw;
            color: #212121;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            margin-top: 1.6vw;
        }
        &-play{
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            color: #fff;
            font-size: 3.2vw;
            background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
            padding: 1.33vw 1.6vw;
        }
        &-danmu{
            display: flex;
            justify-content: end;
        }
    }
}
.download{
    position: fixed;
    left: 50%;
    bottom: 8vw;
    // 基于左上角移动50%,让本体往回移动50%
    transform: translate(-50%);
    background-color: #f69;
    width: 93.6vw;
    height: 9.87vw;
    border-radius: 6.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 3.73vw;
    i{
        margin-right: 2.67vw;
    }
}

效果对比：（左边官网）

zym_0409
关注
专栏目录
Vue项目实战 —— 哔哩哔哩移动端开发
m0_67595657的博客
05-07 506
评论盖楼A回复B B回复C C回复A类似 项目开始 封装登录、注册 封装登录 从零到一开发一个 哔哩哔哩移动端App 包括后面的打包成包安装到手机上 亲测熟练操作掌握，技能会更上一阶，生活不是林黛玉，不会因为忧伤而风情万种，运气就是，机会正好碰上了你的努力。加油干 前期回顾     十五万字的后台管理系统项目 包括从零搭建到结束自己写服务器上线结合 服务器+后端+前端，完成 vue项目 后台管理系统_0.活在风浪里的博客-CSDN博客亲测可用 gitee 网址 包括php包
正在解析s1.hdslb.com等卡加载问题的解决办法
oqqXie的博客
01-01 7963
最近老是访问不了网页版B站，一看控制台发现是获取不了s1.hdslb.com和s2.hdslb.com这两个网站的资源，解决办法如下 1.找个测ping网站如ping.chinaz.com测一下上面这两个网站的ping。 2.按响应时间从小到大排列并复制ping最小的那个ip地址。 3.以我的设置为例，替换ip填写到C:\Windows\System32\drivers\etc目录下的host文件最后。 116.211.223.238 s1.hdslb.com 42.236.87.243 s2.hdslb.
python用爬虫爬取一张图片
weixin_30764883的博客
05-11 314
代码： import requestsresponse = requests.get('https://s1.hdslb.com/bfs/static/jinkela/video/asserts/33.png')with open('C:\\Users\\lingu\\Desktop\\1.png', 'wb') as f: f.write(response.content) f.c...
如何下载网页的字体图标相关文件
Huyingxue107的博客
07-24 1265
字体图标 css html 移动web
哔哩哔哩客服中心头部banner设置代码
qq_37265714的博客
05-25 196
可以放底部或消息通知页面顶部，还是挺好看的。有防盗链，自行本地化图片修改css内链接）放后台自定义CSS（
Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
技术前端，忠于热爱 @0.活在风浪里
03-31 4020
前期回顾 30秒学会 —— 《获取验证码基本操作》_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用，及其好使的插件，开发懒人必整，就算是自己可以写，一大堆代码，真的要写吗？https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501先说先验证码思路，其实很简单，1、前端触发获取验证码,同步显示有效验证倒计时;2、后...
Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
热门推荐
技术前端，忠于热爱 @0.活在风浪里
03-24 1万+
撑着下班前半小时我用vue写《哔哩哔哩 项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2，技术栈有axios、Vh等，下班过来敲哈哈
2024年最全Vue项目实战 —— 哔哩哔哩移动端开发(1)，前端 400道面试题通关宝典助你进大厂
2401_84437982的博客
05-14 603
在一开始会配置路径别名、封装好axios、rem等，写移动端rem适配，肯定要做好，这里我单独写了多种设配，极简易懂站在逆向思维去写的， 希望可以帮助到大家。在项目中会大量使用复用组件的形式来开发，也能更好的与真实企业级项目接轨，更加减少我们的冗余代码，提高可读效率（除自己以外的开发人员）亲测熟练操作掌握，技能会更上一阶，生活不是林黛玉，不会因为忧伤而风情万种，运气就是，机会正好碰上了你的努力。父组件写不同的值传到子组件，子组件负责接受，子组件用来定义结构样式，父组件负责传值。label=“姓名”
哔哩哔哩移动端项目：Vue3.2 + TS + Axios入门到实战
技术专家
08-24 1056
完成带数据交互的 B 站移动端 学习到 Vue3 + TypeScript 的开发环境配置 Volar + DevTools 学习到 Vant3 组件库 + Axios 请求库在项目实战中使用
react-用React仿哔哩哔哩移动端
08-14
在本项目中，我们以"React-用React仿哔哩哔哩移动端"为主题，将深入探讨如何使用React.js框架来构建一个类似哔哩哔哩移动应用的前端界面。React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适用于构建...
行业数据-2018Q1-2020Q1哔哩哔哩移动端活跃用户数.rar
09-11
标题中的“行业数据-2018Q1-2020Q1哔哩哔哩移动端活跃用户数”指的是一个关于哔哩哔哩（B站）在2018年第一季度到2020年第一季度期间，其移动端活跃用户数量的数据报告。这个报告可能包含了季度性的用户增长趋势、...
2018Q1-2020Q1哔哩哔哩移动端活跃用户数.xls
04-13
2018Q1-2020Q1哔哩哔哩移动端活跃用户数.xls
Vuejs仿哔哩哔哩动画移动端
08-09
在“Vuejs仿哔哩哔哩动画移动端”项目中，我们将探索如何使用Vue.js来构建一个类似哔哩哔哩（B站）的移动版应用。这个项目将涵盖多个Vue.js的核心概念和技术，包括组件化、数据绑定、路由管理、状态管理和动画效果等...
哔哩哔哩移动端首页html代码
05-26
很抱歉，我作为一名语言模型，并不能提供实时的网页源代码，但你可以通过以下步骤来...你可以通过查看代码来了解哔哩哔哩移动端首页的结构和内容。 注意：这种方法只能获得静态的HTML代码，无法获取动态生成的内容。
06_实现watch
qq_53109172的博客
10-16 1112
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 414
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端开发攻略---8种方法实现在浏览器中跨页面通信
nibabaoo的博客
10-15 1270
浏览器实现跨标签页通信的多种方式
前端地图数据开发
shuxiaoxii的博客
10-13 370
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值