bilibili案例-移动端

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量45 收藏
点赞数
文章标签： 前端 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78691786/article/details/131969307
版权

效果图

 

HTML 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入首页css -->
    <link rel="stylesheet" href="./less/index.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>bilibili-干杯~~~</title>
</head>

<body>
    <!-- 头部模块--------------------start -->
    <header class="suspension">
        <!-- m-navbar -->
        <div class="m-navbar">
            <!-- 左侧 -->
            <a href="#" class="logo">
                <i class="iconfont Navbar_logo"></i>
            </a>
            <!-- 右侧 -->
            <div class="right">
                <a href="#" class="search">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="#" class="face">
                    <img src="./image/login.png" alt="">
                </a>
                <div class="app-btn">
                    <img src="./image/download.png" alt="">
                </div>
            </div>
        </div>
        <!-- channel-menu -->
        <div class="channel-menu">
            <!-- 左侧 -->
            <div class="tabs">
                <!-- 很宽的盒子 -->
                <div class="tabs-list">
                    <a href="#">首页</a>
                    <a href="#">动画</a>
                    <a href="#">番剧</a>
                    <a href="#">国创</a>
                    <a href="#">音乐</a>
                    <a href="#">舞蹈</a>
                    <a href="#">舞蹈</a>
                    <a href="#">舞蹈</a>
                    <a href="#">舞蹈</a>
                    <!-- 红色线 -->
                    <div class="line"></div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="after">
                <i class="iconfont general_pulldown_s"></i>
            </div>
        </div>
    </header>

    <!-- 内容模块-----------------start -->
    <div class="m-home">
        <div class="video-list">
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】暑假再也不用盲目自学了，专门为小白量身录制的PS+AI入门全套视频，新手看完信手拈来，拿走不谢，允许白嫖！</p>
            </a>
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】暑假再也不用盲目自学了，专门为小白量身录制的PS+AI入门全套视频，新手看完信手拈来，拿走不谢，允许白嫖！</p>
            </a>
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】</p>
            </a>
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】</p>
            </a>
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】</p>
            </a>
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】暑假再也不用盲目自学了，专门为小白量身录制的PS+AI入门全套视频，新手看完信手拈来，拿走不谢，允许白嫖！</p>
            </a>
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】</p>
            </a>
            <a href="#" class="video-item">
                <!-- 上 图片 -->
                <div class="card">
                    <img src="./image/2.jpg" alt="">
                    <div class="count">
                        <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                        <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                    </div>
                </div>
                <!-- 下 文字 -->
                <p class="title ellipsis-2">【PS教程+AI教程】暑假再也不用盲目自学了，专门为小白量身录制的PS+AI入门全套视频，新手看完信手拈来，拿走不谢，允许白嫖！</p>
                <a href="#" class="video-item">
                    <!-- 上 图片 -->
                    <div class="card">
                        <img src="./image/2.jpg" alt="">
                        <div class="count">
                            <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                            <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                        </div>
                    </div>
                    <!-- 下 文字 -->
                    <p class="title ellipsis-2">【PS教程+AI教程】</p>
                </a>
                <a href="#" class="video-item">
                    <!-- 上 图片 -->
                    <div class="card">
                        <img src="./image/2.jpg" alt="">
                        <div class="count">
                            <span><i class="iconfont icon_shipin_bofangshu"></i> 播放量</span>
                            <span><i class="iconfont icon_shipin_danmushu"></i> 评论数</span>
                        </div>
                    </div>
                    <!-- 下 文字 -->
                    <p class="title ellipsis-2">【PS教程+AI教程】</p>
                </a>
            </a>
        </div>

    </div>

    <!-- 底部模块--------------------start -->
    <footer class="app">
        <div class="btn-app ">
            <i class="iconfont Navbar_logo"></i>
            打开App，看你感兴趣的视频
        </div>
    </footer>
</body>

</html>

CSS

//导入base.less
//out:../css/ 
@import url(base.less);



// 声明基准值变量
@baseSize: 3.75vmin;

// 头部模块--------------------start
.suspension {
    // 固定定位 必须有宽度
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 111;

    // m-navbar
    .m-navbar {
        display: flex;
        // 两侧对齐
        justify-content: space-between;
        padding: 0 (12/@baseSize) 0 (18/@baseSize);
        height: (44/@baseSize);
        // 侧轴居中对齐
        align-items: center;

        // 左侧
        .logo {
            i {
                font-size: (28/@baseSize);
                color: #fb7299;
            }
        }

        // 右侧 
        .right {
            display: flex;

            .search {
                i {
                    color: #ccc;
                    font-size: (22/@baseSize);
                }
            }

            .face {
                width: (20/@baseSize);
                height: (20/@baseSize);
                border-radius: 50%;
                overflow: hidden;
                margin: 0 (20/@baseSize);
            }

            .app-btn {
                width: (72/@baseSize);
                height: (24/@baseSize);
            }
        }
    }

    // channel-menu
    .channel-menu {
        position: relative;
        display: flex;
        // 两端对齐
        justify-content: space-between;
        height: (40/@baseSize);
        align-items: center;
        border-bottom: 1px solid #e7e7e7;

        // 左侧
        .tabs {
            flex: 1;
            overflow: hidden;

            .tabs-list {
                display: flex;

                a {
                    height: (40/@baseSize);
                    line-height: (40/@baseSize);
                    padding: 0 (16/@baseSize);
                    // 强制一行内显示文本
                    white-space: nowrap;
                    font-size: (14/@baseSize);
                }

                .line {
                    position: absolute;
                    left: (16/@baseSize);
                    bottom: 0;
                    width: (28/@baseSize);
                    height: (2/@baseSize);
                    background-color: #fb7299;
                }
            }
        }

        // 右侧
        .after {
            width: (40/@baseSize);
            height: (39/@baseSize);
            text-align: center;
            line-height: (40/@baseSize);
            font-size: (20/@baseSize);
            color: #ccc;
            background-color: #fff;
        }
    }
}

// 内容模块-----------------start
.m-home {
    padding: (85/@baseSize) (5/@baseSize) 0;

    .video-list {
        display: flex;
        flex-wrap: wrap;

        .video-item {
            width: 50%;
            padding: (8/@baseSize) (5/@baseSize);

            // 上 图片
            .card {
                position: relative;
                height: (97/@baseSize);

                .count {
                    // 绝对定位的盒子大小取决于内容大小
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: (27/@baseSize);
                    padding: 0 (5/@baseSize);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: (12/@baseSize);
                    color: #fff;
                    background: linear-gradient(180deg, transparent, rgba(0, 0, 0.5));

                    i {
                        vertical-align: middle;
                    }
                }
            }

            // 下 文字 
            .title {
                font-size: (12/@baseSize);
                margin-top: (5/@baseSize);
            }
        }
    }
}

// 底部模块--------------------start
.app {
    position: fixed;
    left: 0;
    bottom: (30/@baseSize);
    width: 100%;
    height: (38/@baseSize);

    .btn-app {
        height: (38/@baseSize);
        margin: 0 (20/@baseSize);
        border-radius: (19/@baseSize);
        text-align: center;
        line-height: (38/@baseSize);
        color: #fff;
        background-color: #fb7299;
    }
}

 

2301_78691786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
移动端项目实战之哔哩哔哩
He200106277的博客
11-16 445
哔哩哔哩移动端项目实战
前端案例-3 rem布局移动页面
KathyLJQ的博客
03-27 265
效果图： less+媒体查询+rem 步骤： (1)下载node（本版本为node-v14.16.0-x64）下载完直接双击下一步直到安装完成（在cmd中输入node -v确认是否安装成功，若安装成功会提示当前版本号，否则安装不成功） https://pan.baidu.com/s/1rSeVOqsoLuLCqjsYhlNDEQ 提取码：8iyz (2)在cmd中安装less,命令行中输入npm install -g less,安装完成后输入lessc -v 确认安装是否成功，如果出现当前less版本号
bilibili 移动端vw / vh 手段制作案例
绿色水杯
08-27 712
现在比较流行的是rem制作方法，但是现在大厂（b站等）已经开始尝试使用vw、vh技术了，所以要学习vw技术，vw技术的优点就在于不用引入js文件等，相对于rem比较简单，使用过程可以全部使用vw或者全部使用vh作为单位，不建议vw和vh混合使用模式。 单纯将字体图标和.css文件引入就可以了 <link rel="stylesheet" href="./fonts/iconfont.css"> <link rel="stylesheet" href="./css/index.css"&gt
使用vw实现模仿哔哩哔哩移动端案例
qq_53847322的博客
07-19 226
使用vw实现哔哩哔哩移动端适配案例效果图如下。 vw vh 移动端适配 哔哩哔哩案例模仿
vm vh移动端布局及 bilibili官网移动端首页布局
薛定谔的猫
12-22 1050
市场上的移动端大多数为flex布局，此时我们用到了rem这个单位，但是rem需要媒体查询，要根据页面是尺寸进行修改，而vm/vh省去各种判断和修改，像B站就通过vue和vm写的。为什么现在还是px，和人用的多，这是因为vm/vh的兼容性比较差，主要用于移动端开发。我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所有开发中使用vw就好啦(等比例缩放)。当前屏幕视口是375px，则1vm就是3.75px,如果当前视口为414，则1vh就是4.14px。超级简单，元素单位之间使用新单位vw/vh即可。
HMVue8.4 定制主题【课程综合案例-HM头条(移动端)】
yubaby
11-30 51
1 官方文档 vant定制主题的核心：less变量的覆盖 https://vant-contrib.gitee.io/vant/#/zh-CN/theme 本项目：手动引入样式 + vue-cli搭建项目 2 实现方案1(不推荐) 重启项目 3 实现方案2(推荐) https://less.bootcss.com/ less中使用@定义变量 ...
仿Bilibili iOS客户端 练习案例源码
weixin_30911809的博客
09-26 143
仿Bilibili iOS客户端 练习启动页 源码下载：http://code.662p.com/view/14534.html 首页 分区 发现 我的 视频信息 普通/直播 视频播放 详细说明：http://ios.662p.com/thread-3...
CSS 定位案例学习 - 焦点图
GoldenaArcher的博客
04-20 681
主要使用了 相对定位 和 绝对定位 完成了焦点图的页面布局 视频资料还是来源于 [黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩](https://www.bilibili.com/video/BV14J4114768?p=221)部分的内容，从 p221 开始到 p244 这个阶段都是定位相关的，这个案例也是这上面的案例学习
探索Bilibili-React-Native：一个高效开发哔哩哔哩移动应用的框架
gitblog_00030的博客
03-28 429
探索Bilibili-React-Native：一个高效开发哔哩哔哩移动应用的框架 项目地址:https://gitcode.com/879479119/Bilibili-React-Native 项目简介 Bilibili-React-Native 是一个基于React Native构建的开源项目，旨在为开发者提供一个快速、便捷地创建和维护哔哩哔哩（B站）移动应用程序的平台。通过该项目，开发者可...
BiliBili-Manga-Downloader
08-26
BiliBili Manga Downloader是一款好用的哔哩哔哩漫画下载器，拥有图形界面，支持关键词搜索漫画，黑科技下载未解锁章节，支持多线程下载，多种保存格式，本地漫画管理，一键检查更新，非常方便。
bilibili-api-docs:bilibili-api 的开发文档
07-24
bilibili-api-docs Python 库 的文档。 请向 dev 分支发起 PR。 若新增文档命名请使用 连字符命名法，如：this-is-an-example.md。 并在 docs/_sidebar.md 中增加对应目录。 使用技术：
bilibili搜索-crx插件
04-04
【标题】：“bilibili搜索-crx插件”是一个针对哔哩哔哩（B站）的浏览器扩展程序，旨在提供方便快捷的搜索功能。 【描述】：该插件以中文（简体）为语言界面，与哔哩哔哩网站的用户群体紧密贴合。其核心功能在于，...
bilibili-user-master-python
01-30
【标题】"bilibili-user-master-python" 是一个与Python编程相关的项目，专注于Bilibili（哔哩哔哩）平台的用户数据处理。这个项目可能是为了帮助开发者或数据分析人员了解如何通过编程方式获取和分析B站用户的资料...
bilibili图床-crx插件
04-01
【bilibili图床-crx插件】是一款专为用户设计的浏览器扩展程序，主要针对中文（简体）用户群体，旨在提供一个便捷高效的图片上传和管理服务，尤其适合经常在Bilibili平台上进行图文创作的用户。这款插件简化了上传...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 328
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1099
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 568
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1553
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
bilibili的ncz-racing
05-24
ncz-racing 是一个在 bilibili 平台上的直播间，主要内容是关于赛车游戏的实况直播和相关比赛的解说。他是一位非常专业的赛车游戏玩家，拥有丰富的经验和技巧，并且深受许多粉丝的喜爱和支持。在他的直播间里，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值