HTML5+CSS3+Vue小实例：仿制B站PC端首页的吃豆人轮播图

于 2023-06-13 16:57:24 发布
阅读量229 收藏 1
点赞数
分类专栏： HTML+CSS+JS小实例 文章标签： vue.js html5 css3 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68127493/article/details/131191873
版权

实例：仿制B站PC端首页的吃豆人轮播图

技术栈：HTML+CSS+Vue.js

字体图标库：font-awesome

效果：

源码：

【html】

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>仿制B站PC端首页的吃豆人轮播图</title>
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="/fonts/css/font-awesome.css">
    <link rel="stylesheet" href="150.css">
    <!-- 这个案例用到的是vue的语法 -->
    <script src="/js/vue.min.js"></script>
</head>

<body>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
艾恩小灰灰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
仿哔哩哔哩，Vue和element-ui组件搭配使用实现
05-15
仿哔哩哔哩，主要技术：Vue和element-ui组件搭配使用 实现功能：首页响应式制作、首页搜索和搜索提示功能、搜索页面制作，搜索页面排序分类功能实现、解决跨域问题。 仿哔哩哔哩，主要技术：Vue和element-ui组件搭配使用 实现功能：首页响应式制作、首页搜索和搜索提示功能、搜索页面制作，搜索页面排序分类功能实现、解决跨域问题。 仿哔哩哔哩，主要技术：Vue和element-ui组件搭配使用 实现功能：首页响应式制作、首页搜索和搜索提示功能、搜索页面制作，搜索页面排序分类功能实现、解决跨域问题。 仿哔哩哔哩，主要技术：Vue和element-ui组件搭配使用 实现功能：首页响应式制作、首页搜索和搜索提示功能、搜索页面制作，搜索页面排序分类功能实现、解决跨域问题。 仿哔哩哔哩，主要技术：Vue和element-ui组件搭配使用 实现功能：首页响应式制作、首页搜索和搜索提示功能、搜索页面制作，搜索页面排序分类功能实现、解决跨域问题。 仿哔哩哔哩，主要技术：Vue和element-ui
使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(1.环境配置、实现登录功能)
z2428478096的博客
02-02 1051
二、环境配置 1.先打开VsCode创建一个项目文件夹，右键打开终端。输入指令：vue create bilibili 2.选择预设，我们选择自定义 3.选择配置文件，中间有一步是选择vue的版本，我忘记截图了，选择2.0x就行了 4.开始，完成以上步骤后我们cd到目前的文件夹下，执行 npm run serve 5.按住ctrl点击左键进入 6.然后我们ctrl+v先退出运行...
vue 仿B站下拉刷新上拉加载
qq_41369815的博客
04-26 505
vue 仿B站下拉刷新上拉加载 功能大部分都是跟B站一样的，还是有一些瑕疵和小bug的，φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github.com/Micoki/vue-refresh pull-refresh.vue 所有功能代码都在这里面直接创建全局组件就可以使用 import pullRefresh from './comp...
vue.js实现带表情评论功能前后端实现（仿B站评论）
pscool的博客
04-15 3473
文章目录学习链接效果图后台建表评论表（重要）用户表实体类CommentUserCommentDTO（重要）WebConfig配置配置跨域和静态资源文件夹Mybatisplus相关类MyBatisPlusConfig 配置分页插件CommentMapperCommentMapper.xmlCommentServiceImpl评论接口CommentControllerPageUtilsResult其它相关类和配置启动类application.ymlpom.xml前台 学习链接 程序员老罗B站项目视频 JS操作文
超仿bilibili播放器(带后台)_1.2.1b12
09-27
超仿bilibili播放器，做视频站不错（本版本是无任何加密，无任何授权，此版本带弹幕库）更新如下: 1.修复各大浏览器兼容性问题 2.修复微信不能播放的问题 3.美化播放器 4.更新js为远程调用 5.修复弹幕屏蔽词功能问题 6.修复支持跨域自动下一集播放问题 7.修改弹幕库设置问题 8.修复IOS微信 不能播放的问题
通用权限管理系统前端页面+html5+css3+javascript+vue+elementui
05-30
系统后端使用 Spring Boot框架开发，前端使用的是 Vue框架和 Element UI的组件，持久层框架使用 MyBatis，数据库使用 MySQL。 系统支持基于角色的用户权限分配功能。用户只有被分配的权限才能访问相应的资源。该系统...
html5+css3实现圆分成四个扇形，并有点击事件
12-15
】做一个圆:周围4个扇形，有点击事件（html5+css3实现扇形），html5+css3实现圆分成四个扇形，并有点击事件。使用的是vue，但是可以提取为html+css，自己提取
2023最新前端面试题总结HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试
08-10
2023年最全前端面试（20w字）HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试 （一开始就是在CSDN博客上写的，现在应部分同学的要求，我直接将博客内容复制成pdf
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
HTML5、CSS3和JavaScript是现代网页开发的三大核心技术，它们共同构建了互联网上丰富多彩的交互式用户体验。这篇教程结合源代码，旨在帮助初学者快速入门这三门语言，并掌握实际开发技能。 HTML5（HyperText Markup...
包含html+css+javaScript+vue+大前端串讲前端文档.zip
06-20
在当前的【标题】"包含html+css+javaScript+vue+大前端串讲前端文档.zip"中，我们可以看到这是一个关于前端开发的综合教程资源，它涵盖了五个关键的知识领域：HTML、CSS、JavaScript、Vue.js以及大前端串讲。...
【Vue】模仿b站网站-----使用vue实现
coding加油站
08-17 2864
vue作业，vue模仿b站，b站，b站网页设计
【Vue项目】仿哔哩哔哩网页
热门推荐
sheng_er_sheng的博客
03-11 1万+
目前市面上，有一些以短视频为主的手机应用越来越多。如哔哩哔哩、抖音、小红书、快手、youtube，这些手机短视频软件应用，个人认为，之所以能拔地而起，主要是由于以下几点：1、门槛低、视频功能强大、平台社交功能强大、贴近生活。毫不夸张地说，假设一个人自制力较弱，并且拥有大把的闲暇时光，给他推荐一款这样类型的软件，一天之内，他就会沉浸在刷视频的快感之中。话不多说，我设计的这款应用主要参照哔哩哔哩这款手机应用，同时搭建本都服务器来提供数据响应。这款网站将部署至阿里云服务器......
Vue2学习笔记3——B站
xiaopi3的博客
02-05 453
目录5 webpack详解5.1 安装5.2 使用5.2.1 webpack配置文件5.2.2 映射命令到package.json5.3 loader5.3.1 css-loader5.3.2 less-loader5.3.3 图片处理loader5.3.4 ES6文件转码 babel-loader5.3.5 webpack配置Vue vue-loader5.4 plugin5.4.1 版权插件5.4.2 打包html到dist插件6 vue-cli7 vue-router8 vuex9 网络10 Rush
Vue2.5打造简洁视频webapp（近期停更。。。）
阿虾搞搞的博客
05-06 1393
一、前言 由于疫情原因，在家待了很长时间，所以在这段时间里对前端的知识进行了巩固及学习，然而在学了一段时间以后，有一种掌握了一些技术但却无处可施的感觉，于是脑海中就浮现了做一个项目的念头。有了这个念头之后，就开始想做什么呢？在一次逛B站的时候，对不起，我对它动手了（仿哔哩哔哩视频webapp） 从一开始对这个项目进行业务分析后，让我有着坚定的决心要长期维护这个项目，这个项目无论是从数据接口，还是运...
使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(3.主页和视频播放页面的实现)
z2428478096的博客
02-05 3160
主页分为三个板块：1.轮播图 2.虚拟直播板块 3.推荐内容板块 实现主页内容需要用到Element.ui里的Carousel 走马灯(轮播图)、Card 卡片(推荐内容)组件。对于轮播图的功能是点击跳转到b站官方网页，点击虚拟直播板块显示功能还未开放，点击推荐内容则跳转到播放页面进行视频播放。 实现主页内容的步骤为：1.通过Axios来获取接口数据，把获取到的数据进行分类 2.把获取的数据渲染到主页页面 3.点击主页轮播图跳转到b站官方网页 4.点击虚拟直播板块弹出警告框提示：功能...
仿B站一（轮播图的制作）
Richard的博客
03-22 2261
仿B站一（轮播图的制作）前言概述轮播图制作思路html框架布局用js实现滚动效果 从大一的时候就开始用B站，对B站有种深沉的热爱，很想要弄清楚B站是怎么做出来的，最近在学习做网站方面的知识，在此记录一下我开发仿B站过程的点滴。以下是我制作的轮播图的效果 前言概述 从大一的时候就开始用B站，对B站有种深沉的热爱，很想要弄清楚B站是怎么做出来的，最近在学习做 网站方面的知识，在此记录一下我开发仿B站过...
vue实现吃豆人动画效果轮播图
iufesjgc的博客
05-24 233
吃豆人动画效果轮播图
模仿bilibili轮播图 无左右键无缝轮播
weixin_43796496的博客
07-08 688
body样式 <!-- 轮播图区域 --> <div class="main-banner carousel"> <div class="pic" > <ul class="pic-content"> <li class="now"><img src="./images/ban...
html5+css3 vue
最新发布
08-19
HTML5、CSS3 和 Vue 是一种常见的技术组合，用于开发现代的 Web 应用程序。 HTML5 是最新的 HTML 标准，提供了一系列新的语义化标签和 API，使得开发者能够更好地构建丰富的 Web 内容和应用。它支持多媒体元素、本地存储、Canvas 绘图等功能，为开发者提供了更多的选择和灵活性。 CSS3 是最新的 CSS 标准，引入了许多新的特性和增强，使得开发者能够更好地设计和布局网页。它支持圆角、阴影、渐变、动画等效果，为网页提供了更丰富的样式选择。 Vue 是一个流行的 JavaScript 框架，用于构建用户界面。它采用了组件化的开发模式，将界面分解成独立可复用的组件，使得开发者可以更高效地开发和维护复杂的用户界面。Vue 提供了响应式数据绑定、组件化开发、路由管理等功能，使得开发者能够更好地构建交互性强、可扩展性好的 Web 应用。 使用 HTML5、CSS3 和 Vue 可以实现现代化的 Web 应用程序。HTML5 提供了丰富的语义化标签和功能，CSS3 提供了丰富的样式选择，而 Vue 提供了高效的组件化开发模式和交互性的支持。这个技术组合可以帮助开发者构建漂亮、交互性强、用户体验好的 Web 应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

艾恩小灰灰

打赏不能超过你的早餐钱哦！

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

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

打赏作者

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

抵扣说明：

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

余额充值