微信小程序视频点播在线视频学习系统 毕业设计 课程设计（5）视频播放页面
2024-05-11 09:41:34
wxml代码
<!--pages/shipin/vedio.wxml--><view class="biaoti">视频课程：微信小程序样式Flex Box精通课程</view>
<view class="kc"><video class="kc_shipin" id="myVideo" src="http://wx.hzyaoyi.cn/02-jichu/01.mp4" controls></video><view class="kc_caozuo"><view class="kc_caozuo_bofang"><button bindtap="bindPlay" class="kc_caozuo_bofang_bt" type="primary">播放</button></view><view class="kc_caozuo_zanting"><button bindtap="bindPause" class="kc_caozuo_zanting_bt" type="primary">暂停</button></view></view>
</view><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">当前学习章节</view><view class="qukuai_you"></view>
</view>
<view class="zhang2"> <view class="zhang2_zuo xuanzhong">1.6 HTML 元素入门要点</view><view class="zhang2_you">学习</view>
</view><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">上2个章节</view><view class="qukuai_you"></view>
</view>
<view class="zhang2"> <view class="zhang2_zuo">1.4 HTML编辑器</view><view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> <view class="zhang2_zuo">1.5 入门示例</view><view class="zhang2_you">学习</view>
</view><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">接下来学习的3个章节</view><view class="qukuai_you"></view>
</view>
<view class="zhang2"> <view class="zhang2_zuo">1.7 HTML属性入门要点</view><view class="zhang2_you">学习</view>
</view><view class="zhang1">
<view class="zhang1_zuo">第2章 HTML 基础标签</view>
<view class="zhang1_you">学习</view>
</view>
<view class="zhang2"> <view class="zhang2_zuo">2.1 HTML 标题 h1-h6 标签</view><view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> <view class="zhang2_zuo">2.2 HTML 水平线 hr 标签</view><view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> <view class="zhang2_zuo">2.3 HTML 注释标签和查看源代码</view><view class="zhang2_you">学习</view>
</view>
<view class="zhang2">
<view class="zhang2_zuo">2.4 HTML 段落 p 标签</view><view class="zhang2_you">学习</view>
</view>
<view class="zhang2"> <view class="zhang2_zuo">2.5 HTML 换行 br 标签</view><view class="zhang2_you">学习</view>
</view>
wxss代码
.biaoti{font-size: 16px; padding:0px 5px; background-color: white; height: 25px;box-sizing: border-box; line-height: 25px;text-shadow: 1px 1px 2px gainsboro;color: rgb(13, 163, 233);}.kc{}
.kc_shipin{width: 100%;}
.kc_caozuo{display: flex; padding: 5px;}
.kc_caozuo_bofang{width: 50%; text-align: center;}
.kc_caozuo_bofang_bt{width: 90%;}
.kc_caozuo_zanting{width: 50%;}
.kc_caozuo_zanting_bt{width: 90%; text-align: center;}.qukuai{display: flex;align-items:center; background-color:#f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;color: rgb(13, 163, 233);}
.qukuai_you{font-size: 16px; color: gray;padding-right: 10px;}.zhang1{display: flex; font-size: 16px;padding: 5px;background-color: white;}
.zhang1_zuo{flex-grow: 1; padding-right: 10px;}
.zhang1_you{}.zhang2{display: flex; font-size: 15px; padding: 10px 5px;color: gray;background-color: white;}
.zhang2_zuo{flex-grow: 1; padding-right: 10px;}
.zhang2_you{}.xuanzhong{color: rgb(13, 163, 233);}
微信小程序视频点播在线视频学习系统 毕业设计 课程设计（5）视频播放页面相关推荐
- node.js+小程序基于微信小程序的校园失物招领系统毕业设计源码072343
微信小程序的校园失物招领系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...
- node.js基于微信小程序的校园失物招领系统毕业设计源码072343
微信小程序的校园失物招领系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...
- Springboot+mysql+微信小程序校园在线打印预约系统-计算机毕业设计源码91740
摘 要 本文设计了一种基于微信支付的校园在线打印预约系统小程序,系统为人们提供了方便快捷的线上打印服务,包括打印预约.注册登录.打印平台.校园资讯等,用户不仅能够方便快捷在线搜索打印方式.还能进行打印 ...
- SSM基于微信小程序的外卖点餐系统 毕业设计-附源码2711704
基于微信小程序的外卖点餐系统的设计与实现 摘要 立足于当下餐饮行业现有的点餐模式,分析传统APP点餐的运作流程,结合微信小程序的特点设计新型的外卖点餐系统.近几年,人们生活水平日益提升,但工作强度和压 ...
- 基于微信小程序的高校失物招领系统#毕业设计
项目介绍 随着我国教育制度的不断改革,高校的人数也越来越多,如此多的人难免会有物品丢失的事情发展,尤其是在高校这种学习高度紧张的环境下.通常的校园失物招领都是通过张贴广告等当时进行的,这明显和当下大学 ...
- ssm+java+vue基于微信小程序的新生自助报到系统#毕业设计
每年到开学之际,都会有新生涌入到大学校园之中来,如何能够更好的做好高校的新生报到工作,是很多高校一直以来研究的一个问题.因为新生大多数都是第一次走进大学的校园,所以对具体的手续办理流程不是很清楚,这个 ...
- 基于微信小程序社区疫情防控系统#毕业设计
项目介绍 基于小程序社区疫情防控系统可以在安卓系统的手机上运行,实现,管理员:首页.个人中心.行动轨迹管理.用户管理.体温上报管理.上报提醒管理.疫情公告管理.紧急情况管理.代办管理.防疫物资管理.健 ...
- java基本微信小程序的在线拼车系统 uniapp小程序
当前,随着经济的高速发展,汽车越来越多,开车的成本越来越高.交通问题越来越严重的影响世界各大城市,大范围的交通拥堵,造成了环境污染.土地紧缺已经能源消耗等诸多社会问题.交通问题不仅阻碍城市的进一步发展 ...
- 基于微信小程序的在线医生答疑系统
21世纪是网络应用技术的发展,越来越多的用户借助于移动手机.电脑完成生活中的事务,许多的传统行业也更加重视与互联网的结合,由于城镇人口的增加,人们有问题只能到线下进行咨询,对于时间紧的人是一个非常头痛 ...
最新文章
- java列表包含列表_java – 包含另一个列表的列表
- HDOJ---1273 漫步森林[图论]
- 控制游戏中物体的移动速度
- Stack Overflow通过关注性能，实现单块应用架构的扩展能力
- MongoDB 定位 oplog 必须全表扫描吗？
- JS的基本语法知识概括（ECMA、DOM、BOM）
- 2场直播丨PostgreSQL、openGauss
- 使用CLion构建Qt项目
- ffmpeg 封面提取
- 在MySQL中创建cm-hive使用的数据库及账号
- 《机器视觉算法与应用》第3章 机器视觉算法之光学字符识别（OCR）——学习笔记
- Android下载文件，如何获取实际的文件名
- 冯诺依曼计算机流程图,基本流程图综述
- kali 克隆网页_Web侦察工具HTTrack （网站克隆）
- 浅谈内存分配方式以及堆和栈的区别
- 最全的程序化交易模型设计思路在这里
- 使用 MitmProxy 玩爬虫的，这篇文章别错过了！
- 小游戏——满天小星星
- Qt（一）消息提示框
- 内存马涉及基础知识整理