项目：视频网站项目

作品描述：仿b站视频项目模板HTML+CSS+JavaScript。主要包括的页面有推荐、推荐、榜单、推荐、游戏、游戏、 音乐、舞蹈等总共8个栏区。

视频链接：寒假充电了吗？快拿走b站源码练练手吧（HTML+CSS+JS）

实现技术：CSS+HTML+JS+H5+CSS3+jQuery；

作品演示

1.网站首页

2. 娱乐栏

3.底部

目录结构

代码展示

  <!---------- 顶部页面 ----------><div id="header"><!-- 最顶部 --><div class="header-top"><div class="auto-width"><h1 class="logo fl"><a href="#"><img src="data:images/logo.png" alt="#"></a></h1><div class="search-box fl"><form action="#"><input type="text" class="fl search-text" placeholder="Search here..."><button class="fl search-btn"><i class="iconfont icon-search"></i></button></form><div class="search-feedback"><span class="search-hot">今日热搜</span><div class="search-menu"><a href="#" class="item item-cur"><span>1</span><em>OverWatch</em></a><a href="#" class="item item-cur"><span>2</span><em>电影知道答案</em></a><a href="#" class="item item-cur"><span>3</span><em>S6</em></a><a href="#" class="item"><span>4</span><em>夏目友人帐</em></a><a href="#" class="item"><span>5</span><em>微小而确实的幸福</em></a><a href="#" class="item"><span>6</span><em>神盾局特工</em></a><a href="#" class="item"><span>7</span><em>天凉好个秋</em></a></div></div></div><ul class="header-guide fr"><li class="guide-item download"><a href="#"><i class="iconfont icon-app"></i><span>下载客户端</span></a><div class="guide-hover"><img src="data:images/app-download.png" alt="#"></div></li><li class="guide-item login"><a href="#">登录/注册</a></li><li class="guide-item history"><a href="#"><i class="iconfont icon-history"></i></a><div class="guide-hover"><span class="text">尚未记录任何历史信息。</span><a href="#" class="more">More</a></div></li><li class="guide-item upload"><a href="#"><i class="iconfont icon-upload"></i></a><div class="guide-hover"><ul><li><a href="#">投视频</a></li><li><a href="#">投文章</a></li></ul></div></li><li class="guide-item collect"><a href="#"><i class="iconfont icon-collect"></i></a></li></ul></div></div><!-- 焦点图 --><div class="header-banner"><a href="#" class="bg"></a><span class="text">这辆车……到底能不能上啊！！！</span><a href="#" class="link"></a></div><!-- 导航 --><div class="header-nav"><div class="nav-wrap auto-width clearfix"><a href="#" class="nav-item nav-cur">首页</a><a href="#" class="nav-item">番剧</a><a href="#" class="nav-item nav-item_hover">动画</a><a href="#" class="nav-item nav-item_hover">音乐</a><a href="#" class="nav-item nav-item_hover">舞蹈</a><a href="#" class="nav-item nav-item_hover">游戏</a><a href="#" class="nav-item nav-item_hover">娱乐</a><a href="#" class="nav-item nav-item_hover">科技</a><a href="#" class="nav-item nav-item_hover">影视</a><a href="#" class="nav-item nav-item_hover">体育</a><a href="#" class="nav-item nav-item_hover">彼女</a><a href="#" class="nav-item nav-item_hover">鱼塘</a><a href="#" class="nav-item nav-item_hover">文章</a><a href="#" class="nav-item nav-item_hover">合辑</a><a href="#" class="nav-rank"><i class="iconfont icon-rank"></i>全站排行榜</a></div><div class="subNav"><ul class="auto-width"><li class="subNav-item"><a href="#">动画短片</a><a href="#">动画资讯</a><a href="#">旧番补档</a><a href="#">新番连载</a><a href="#">MAD·AMV</a><a href="#">MMD·3D</a><a href="#">2.5次元</a><a href="#">国产动画</a></li><li class="subNav-item"><a href="#">原创·翻唱</a><a href="#">演奏</a><a href="#">Vocaloid</a><a href="#">日系音乐</a><a href="#">综合音乐</a><a href="#">演唱会</a></li><li class="subNav-item"><a href="#">宅舞</a><a href="#">综合舞蹈</a></li><li class="subNav-item"><a href="#">主机单机</a><a href="#">游戏集锦</a><a href="#">电子竞技</a><a href="#">LOL</a><a href="#">守望先锋</a><a href="#">桌游卡牌</a><a href="#">Mugen</a></li><li class="subNav-item"><a href="#">生活娱乐</a><a href="#">鬼畜调教</a><a href="#">萌宠</a><a href="#">美食</a><a href="#">综艺</a></li><li class="subNav-item"><a href="#">SF</a><a href="#">黑科技</a><a href="#">数码</a><a href="#">广告</a><a href="#">白科技</a><a href="#">自我发电</a><a href="#">科学技术</a><a href="#">汽车</a></li><li class="subNav-item"><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></li><li class="subNav-item"><a href="#">综合体育</a><a href="#">足球</a><a href="#">篮球</a><a href="#">搏击</a><a href="#">11区体育</a><a href="#">惊奇体育</a></li><li class="subNav-item"><a href="#">造型</a><a href="#">西皮</a><a href="#">爱豆</a><a href="#">其他</a></li><li class="subNav-item"><a href="#">军事</a><a href="#">历史</a><a href="#">焦点</a></li><li class="subNav-item"><a href="#">文章综合</a><a href="#">工作·情感</a><a href="#">漫画·轻小说</a><a href="#">游戏</a></li><li class="subNav-item"><a href="#">AcFun专题</a></li></ul></div></div></div>

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要可在公z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个

HTML期末作业，仿b站视频项目模板（HTML+CSS+JS）相关推荐

HTML期末作业-仿家居装饰公司HTML网站模板(HTML+CSS+JavaScript)
HTML期末作业-仿家居装饰公司HTML网站模板(HTML+CSS+JavaScript) 绿色家居装饰工程公司HTML网站模板,DIV+CSS布局设计,全套模板,包括首页.公司简介.新闻资讯.经典案 ...
HTML期末作业作业-仿商城个人中心网站模板(HTML+CSS+JavaScript)
HTML期末作业作业-仿商城个人中心网站模板(HTML+CSS+JavaScript) 商城个人中心网站模板,全套模板,包括注册.登录.个人中心首页.实名认证.购物车.我的成长值.意见投诉.自营店铺. ...
HTML期末作业-在线电影腾龙网站HTML模板(HTML+CSS+JavaScript)
HTML期末作业-在线电影腾龙网站HTML模板(HTML+CSS+JavaScript) HTML5和CSS3电影网站模板设计,js挑选电影座位特效代码非常适合大学生HTML期末作业/Javascr ...
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适 ...
HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript)
HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript) 商城购物网HTML模板,(HTML+CSS+JavaScript)布局,全套模板,包括商城首页.特色产品.产品详情. ...
HTML期末作业-仿美食菜谱网站模板(HTML+CSS+JavaScript)
HTML期末作业-仿美食菜谱网站HTML模板(HTML+CSS+JavaScript) 美食菜谱网站模板,DIV+CSS布局设计,自适应分辨率,兼容PC端和移动端,全套模板,包括首页.饮食健康.美食达 ...
HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)
HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)
web网页设计期末课程大作业~粉色的服装购物商城页面模板临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系 ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现6个页面(HTML+CSS+JavaScript)...
HTML网页设计基础期末作业--仿Coco线上订奶茶饮料网站设计与实现 6个页面(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...

HTML期末作业，仿b站视频项目模板（HTML+CSS+JS）