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

转x33g5p2x  于2022-02-07 转载在 HTML5  
字(8.2k)|赞(0)|评价(0)|浏览(401)

 项目：视频网站项目

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

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

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

作品演示

1.网站首页

2. 娱乐栏

3.底部

目录结构

代码展示

  1. <!---------- 顶部页面 ---------->
  2.   <div id="header">
  4.     <!-- 最顶部 -->
  5.     <div class="header-top">
  6.       <div class="auto-width">
  7.         <h1 class="logo fl"><a href="#"><img src="images/logo.png" alt="#"></a></h1>
  8.         <div class="search-box fl">
  9.           <form action="#">
  10.             <input type="text" class="fl search-text" placeholder="Search here...">
  11.             <button class="fl search-btn">
  12.               <i class="iconfont icon-search"></i>
  13.             </button>
  14.           </form>
  15.           <div class="search-feedback">
  16.             <span class="search-hot">今日热搜</span>
  17.             <div class="search-menu">
  18.               <a href="#" class="item item-cur">
  19.                 <span>1</span>
  20.                 <em>OverWatch</em>
  21.               </a>
  22.               <a href="#" class="item item-cur">
  23.                 <span>2</span>
  24.                 <em>电影知道答案</em>
  25.               </a>
  26.               <a href="#" class="item item-cur">
  27.                 <span>3</span>
  28.                 <em>S6</em>
  29.               </a>
  30.               <a href="#" class="item">
  31.                 <span>4</span>
  32.                 <em>夏目友人帐</em>
  33.               </a>
  34.               <a href="#" class="item">
  35.                 <span>5</span>
  36.                 <em>微小而确实的幸福</em>
  37.               </a>
  38.               <a href="#" class="item">
  39.                 <span>6</span>
  40.                 <em>神盾局特工</em>
  41.               </a>
  42.               <a href="#" class="item">
  43.                 <span>7</span>
  44.                 <em>天凉好个秋</em>
  45.               </a>
  46.             </div>
  47.           </div>
  48.         </div>
  49.         <ul class="header-guide fr">
  50.           <li class="guide-item download">
  51.             <a href="#">
  52.               <i class="iconfont icon-app"></i>
  53.               <span>下载客户端</span>
  54.             </a>
  55.             <div class="guide-hover">
  56.               <img src="images/app-download.png" alt="#">
  57.             </div>
  58.           </li>
  59.           <li class="guide-item login">
  60.             <a href="#">登录/注册</a>
  61.           </li>
  62.           <li class="guide-item history">
  63.             <a href="#">
  64.               <i class="iconfont icon-history"></i>
  65.             </a>
  66.             <div class="guide-hover">
  67.               <span class="text">尚未记录任何历史信息。</span>
  68.               <a href="#" class="more">More</a>
  69.             </div>
  70.           </li>
  71.           <li class="guide-item upload">
  72.             <a href="#">
  73.               <i class="iconfont icon-upload"></i>
  74.             </a>
  75.             <div class="guide-hover">
  76.               <ul>
  77.                 <li><a href="#">投视频</a></li>
  78.                 <li><a href="#">投文章</a></li>
  79.               </ul>
  80.             </div>
  81.           </li>
  82.           <li class="guide-item collect">
  83.             <a href="#">
  84.               <i class="iconfont icon-collect"></i>
  85.             </a>
  86.           </li>
  87.         </ul>
  88.       </div>
  89.     </div>
  91.     <!-- 焦点图 -->
  92.     <div class="header-banner">
  93.       <a href="#" class="bg"></a>
  94.       <span class="text">这辆车……到底能不能上啊！！！</span>
  95.       <a href="#" class="link"></a>
  96.     </div>
  97.     <!-- 导航 -->
  98.     <div class="header-nav">
  99.       <div class="nav-wrap auto-width clearfix">
  100.         <a href="#" class="nav-item nav-cur">首页</a>
  101.         <a href="#" class="nav-item">番剧</a>
  102.         <a href="#" class="nav-item nav-item_hover">动画</a>
  103.         <a href="#" class="nav-item nav-item_hover">音乐</a>
  104.         <a href="#" class="nav-item nav-item_hover">舞蹈</a>
  105.         <a href="#" class="nav-item nav-item_hover">游戏</a>
  106.         <a href="#" class="nav-item nav-item_hover">娱乐</a>
  107.         <a href="#" class="nav-item nav-item_hover">科技</a>
  108.         <a href="#" class="nav-item nav-item_hover">影视</a>
  109.         <a href="#" class="nav-item nav-item_hover">体育</a>
  110.         <a href="#" class="nav-item nav-item_hover">彼女</a>
  111.         <a href="#" class="nav-item nav-item_hover">鱼塘</a>
  112.         <a href="#" class="nav-item nav-item_hover">文章</a>
  113.         <a href="#" class="nav-item nav-item_hover">合辑</a>
  114.         <a href="#" class="nav-rank">
  115.           <i class="iconfont icon-rank"></i>
  116.           全站排行榜
  117.         </a>
  118.       </div>
  119.       <div class="subNav">
  120.         <ul class="auto-width">
  121.           <li class="subNav-item">
  122.             <a href="#">动画短片</a>
  123.             <a href="#">动画资讯</a>
  124.             <a href="#">旧番补档</a>
  125.             <a href="#">新番连载</a>
  126.             <a href="#">MAD·AMV</a>
  127.             <a href="#">MMD·3D</a>
  128.             <a href="#">2.5次元</a>
  129.             <a href="#">国产动画</a>
  130.           </li>
  131.           <li class="subNav-item">
  132.             <a href="#">原创·翻唱</a>
  133.             <a href="#">演奏</a>
  134.             <a href="#">Vocaloid</a>
  135.             <a href="#">日系音乐</a>
  136.             <a href="#">综合音乐</a>
  137.             <a href="#">演唱会</a>
  138.           </li>
  139.           <li class="subNav-item">
  140.             <a href="#">宅舞</a>
  141.             <a href="#">综合舞蹈</a>
  142.           </li>
  143.           <li class="subNav-item">
  144.             <a href="#">主机单机</a>
  145.             <a href="#">游戏集锦</a>
  146.             <a href="#">电子竞技</a>
  147.             <a href="#">LOL</a>
  148.             <a href="#">守望先锋</a>
  149.             <a href="#">桌游卡牌</a>
  150.             <a href="#">Mugen</a>
  151.           </li>
  152.           <li class="subNav-item">
  153.             <a href="#">生活娱乐</a>
  154.             <a href="#">鬼畜调教</a>
  155.             <a href="#">萌宠</a>
  156.             <a href="#">美食</a>
  157.             <a href="#">综艺</a>
  158.           </li>
  159.           <li class="subNav-item">
  160.             <a href="#">SF</a>
  161.             <a href="#">黑科技</a>
  162.             <a href="#">数码</a>
  163.             <a href="#">广告</a>
  164.             <a href="#">白科技</a>
  165.             <a href="#">自我发电</a>
  166.             <a href="#">科学技术</a>
  167.             <a href="#">汽车</a>
  168.           </li>
  169.           <li class="subNav-item">
  170.             <a href="#">电影</a>
  171.             <a href="#">日剧</a>
  172.             <a href="#">美剧</a>
  173.             <a href="#">国产剧</a>
  174.             <a href="#">网络剧</a>
  175.             <a href="#">韩剧</a>
  176.             <a href="#">布袋·特摄</a>
  177.             <a href="#">纪录片</a>
  178.             <a href="#">其他</a>
  179.           </li>
  180.           <li class="subNav-item">
  181.             <a href="#">综合体育</a>
  182.             <a href="#">足球</a>
  183.             <a href="#">篮球</a>
  184.             <a href="#">搏击</a>
  185.             <a href="#">11区体育</a>
  186.             <a href="#">惊奇体育</a>
  187.           </li>
  188.           <li class="subNav-item">
  189.             <a href="#">造型</a>
  190.             <a href="#">西皮</a>
  191.             <a href="#">爱豆</a>
  192.             <a href="#">其他</a>
  193.           </li>
  194.           <li class="subNav-item">
  195.             <a href="#">军事</a>
  196.             <a href="#">历史</a>
  197.             <a href="#">焦点</a>
  198.           </li>
  199.           <li class="subNav-item">
  200.             <a href="#">文章综合</a>
  201.             <a href="#">工作·情感</a>
  202.             <a href="#">漫画·轻小说</a>
  203.             <a href="#">游戏</a>
  204.           </li>
  205.           <li class="subNav-item">
  206.             <a href="#">AcFun专题</a>
  207.           </li>
  208.         </ul>
  209.       </div>
  210.     </div>
  212.   </div>

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

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

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

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

最后

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

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持

关注：前端老实人👇领取源码哦~

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_52691965/article/details/122670004

内容来源于网络，如有侵权，请联系作者删除！

JavaScriptHtmlcss前端web网页模板

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com