开发者社区> 向善的灯> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82557308 ...
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82557308

首先来直接看一下最终的效果吧:

项目地址:https://github.com/xiugangzhang/vip.github.io

在线预览地址:https://xiugangzhang.github.io/vip.github.io/index.html

目前视频网站已经实现了前台页面所有数据从后台数据库的读取,由于Github上面只能查看到静态的页面,对于动态网站还是不支持的,这个等待后期网站全部写完后,会把所有代码一并上传,如果觉得不错的话,可以到Github上面支持一下。

声明:前台页面在开发的过程中也参考了国内一些主流视频网站的布局,比如爱奇艺,优酷和腾讯视频网站,网站的风格类似于Discuz网站的布局风格。

视频网站项目静态页面目前已经完成的功能:

  • 首页导航栏,中部轮播图,以及电影列表的展现,底部导航链接
  • 注册页面
  • 视频播放页面
  • 登录页面
  • 用户管理页面

主要特点

  • 未使用任何第三方框架,均为纯原生的HTML,CSS, js实现(至于这个xframe-min-1.0.js文件是我对于JavaScript封装的一个小型的类似于JQuery的框架,可以参见我的GitHub xframe.js这个开源项目)
  • 首页轮播图的实现,轮播图的效果为模仿当前爱奇艺,优酷,腾讯视频的首页风格,实现了预告页面的自动轮播,并且对该部分的效果实现进行了代码封装,以面向对象的方式实现了这一部分的效果
  • 顶部导航栏的实现:这部分使用的是类似于一般博客的布局方式,实现了导航栏固定于顶部的方式
  • 电影播放页面:此处也是类似于当前主流网站的的播放页面,左侧为播放窗口,右侧部分为电影的详细信息
  • 底部导航:使用分栏的方式实现了底部的导航,前面的搜歌栏位为链接,后面的一个为网站的微信,QQ等联系方式,实现了鼠标移动自动切换效果的实现
  • 用户中心:这部分实现了修改密码,评论,登录,日志管理,收藏电影的功能,用户可以自由切换

 

 

首页面

 

登录页面:

 

注册页面

 

会员中心页面

电影播放页面

 

也在这里希望大家能够支持原创,转载请注明出处,谢谢!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
某东购物车(动态)网页搭建
网页编程实战二: 利用JavaScript实现某东购物车(动态)网页搭建
0 0
Dsicuz移动端二开之关注和粉丝页面以及关注状态处理(2)
Dsicuz移动端二开之关注和粉丝页面以及关注状态处理
0 0
Dsicuz移动端二开之关注和粉丝页面以及关注状态处理(1)
Dsicuz移动端二开之关注和粉丝页面以及关注状态处理
0 0
聊聊大麦网UWP版的首页顶部图片联动效果的实现方法
原文:聊聊大麦网UWP版的首页顶部图片联动效果的实现方法 随着Windows10的发布,国内已经有越来越多的厂商上架了自家的通用应用程序客户端,比如QQ、微博、大麦等。所实话,他们设计的确实很好,很符合Windows10 的设计风格和产品理念,而对于开发者而言,当我们发现一个不错的UI设计风格不禁想自己动手也写一个类似的效果玩玩。
682 0
仿支付宝首页头部伸缩效果
原文链接:https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw 每次打开支付宝首页滑动,头部的伸缩动画甚是吸引人。
1634 0
第21天:京东页面轮播图
一、轮播图小圆点 HTML代码1 2 1 3 2 4 3 5 4 6 5 7 6 8 CSS代码 1 .
998 0
fbh
添加到收藏夹和设置首页代码大全
            添加到收藏夹和设置首页代码大全                                                                                   加...
633 0
百度首页增加了二维码扫描
百度首页增加了二维码扫描 移动就是未来!
647 0
移除首页->重回首页
  之前发布了一篇文章《订餐系统之获取淘宝外卖订单》,因为是关于淘宝外卖的,所以文中出现这个词时,都加了链接,还设置了 target='_blank',就是为了让看的人方便点击,查看。后来,博客园说这个文章中含有推广链接,于是移除首页了。
921 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
微信广告引擎与播放节奏算法实践
立即下载
QQ移送页面框架优化实践
立即下载
QQ移动页面框架优化实践
立即下载