HTML期末作业~个人信息展示网站响应式模板(HTML+CSS+JavaScript)

转x33g5p2x  于2022-01-13 转载在 HTML5  
字(17.1k)|赞(0)|评价(0)|浏览(524)

项目：雷神个人信息展示项目

作品描述：个人信息展示网站响应式模板HTML+CSS+JavaScript。主要包括的页面有HOME，ABOUT，MOVIE，SPORTS，TRAVEL，SINGLE，CONTACT等总共7个页面。

视频链接：分享两个前端网页，能用我的就别自己做了（含源码）

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

作品演示

1.网站首页

2.MOVIE页

3.响应式

目录结构

代码展示

  1. <header class="header">
  2.     <div data-velocity="-.4" id="particles" class="header-bg"></div>
  3.     <div class="container">
  4.       <div class="row">
  5.         <div class="col-md-12">
  6.           <div class="social-links">
  7.             <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-facebook"></i>
  8.               <div class="ripple-wrapper"></div>
  9.             </a>
  10.             <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-twitter"></i>
  11.               <div class="ripple-wrapper"></div>
  12.             </a>
  13.             <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-google-plus"></i>
  14.               <div class="ripple-wrapper"></div>
  15.             </a>
  16.             <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-youtube"></i>
  17.               <div class="ripple-wrapper"></div>
  18.             </a>
  19.             <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-linkedin"></i>
  20.               <div class="ripple-wrapper"></div>
  21.             </a>
  22.           </div>
  23.         </div>
  24.       </div>
  25.     </div>
  27.     <div class="site-title-table">
  28.       <div class="site-title-tablecell">
  29.         <div class="slide-text">
  30.           <h2><a href="index.html"><span>S</span>uper<span>H</span>eros</a></h2>
  31.           <p>Another exciting blog template from awesome team</p>
  32.         </div>
  34.       </div>
  35.     </div>
  36.   </header>
  38.   <section class="maincontent-wrap">
  39.     <div class="container">
  40.       <div class="row">
  41.         <div class="col-md-12">
  42.           <div class="maincotnent shadow-z-1">
  43.             <div class="mainmenu">
  44.               <div class="navbar navbar-nobg">
  45.                 <div class="navbar-header">
  46.                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  47.                     <span class="sr-only">Toggle navigation</span>
  48.                     <span class="icon-bar"></span>
  49.                     <span class="icon-bar"></span>
  50.                     <span class="icon-bar"></span>
  51.                   </button>
  52.                 </div>
  54.                 <div class="navbar-collapse collapse">
  55.                   <ul class="nav navbar-nav">
  56.                     <li class="active"><a href="index.html">Home <div class="ripple-wrapper"></div>
  57.                       </a></li>
  58.                     <li><a href="about.html">About</a></li>
  59.                     <li><a href="archive.html">Movie</a></li>
  60.                     <li><a href="archive.html">Sports</a></li>
  61.                     <li><a href="archive.html">Travel</a></li>
  62.                     <li><a href="single.html">Single</a></li>
  63.                     <li><a href="contact.html">Contact</a></li>
  64.                   </ul>
  65.                 </div>
  66.               </div>
  67.             </div>
  69.             <div class="row">
  70.               <div class="col-md-10 col-md-offset-1">
  71.                 <div class="article-list">
  72.                   <article class="post">
  73.                     <header class="article-title text-center">
  74.                       <p><a href="archive.html">Nature</a></p>
  75.                       <h2><a href="single.html">Green Lantern for Green World!</a></h2>
  76.                       <p class="post-meta">by Farhan Rizvi @ 11th May</p>
  77.                     </header>
  79.                     <div class="article-featured-content shadow-z-2">
  80.                       <a href="single.html"><img class="img-responsive" src="img/post-2.jpg" alt=""></a>
  81.                     </div>
  83.                     <div class="post-summary">
  84.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  85.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  86.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  87.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  88.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  89.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  90.                     </div>
  92.                     <div class="post-detail-link text-center">
  93.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  94.                         <i class="fa fa-plus"></i>
  95.                         <div class="ripple-wrapper"></div>
  96.                       </a>
  97.                     </div>
  98.                   </article>
  99.                   <article class="post">
  100.                     <header class="article-title text-center">
  101.                       <p><a href="archive.html">Movie</a></p>
  102.                       <h2><a href="single.html">My Favorite Spiderman Movie</a></h2>
  103.                       <p class="post-meta">by Ratul Ahmed @ 09th May</p>
  104.                     </header>
  106.                     <div class="article-featured-content shadow-z-2">
  107.                       <a href="single.html"><img class="img-responsive" src="img/post-1.jpg" alt=""></a>
  108.                     </div>
  110.                     <div class="post-summary">
  111.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  112.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  113.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  114.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  115.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  116.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  117.                     </div>
  119.                     <div class="post-detail-link text-center">
  120.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  121.                         <i class="fa fa-plus"></i>
  122.                         <div class="ripple-wrapper"></div>
  123.                       </a>
  124.                     </div>
  125.                   </article>
  126.                   <article class="post">
  127.                     <header class="article-title text-center">
  128.                       <p><a href="archive.html">Movie</a></p>
  129.                       <h2><a href="single.html">Marvel Phase to SuperCut</a></h2>
  130.                       <p class="post-meta">by Rasel Ahmed @ 07th May</p>
  131.                     </header>
  133.                     <div class="article-featured-content shadow-z-2">
  134.                       <div class="embed-responsive embed-responsive-16by9">
  135.                         <iframe class="embed-responsive-item" src="" width="500" height="281"></iframe>
  137.                       </div>
  139.                     </div>
  141.                     <div class="post-summary">
  142.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  143.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  144.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  145.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  146.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  147.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  148.                     </div>
  150.                     <div class="post-detail-link text-center">
  151.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  152.                         <i class="fa fa-plus"></i>
  153.                         <div class="ripple-wrapper"></div>
  154.                       </a>
  155.                     </div>
  156.                   </article>
  157.                   <article class="post">
  158.                     <header class="article-title text-center">
  159.                       <p><a href="archive.html">Fun</a></p>
  160.                       <h2><a href="single.html">The Return of Hulk!</a></h2>
  161.                       <p class="post-meta">by Tamanna Ferdous @ 07th May</p>
  162.                     </header>
  164.                     <div class="article-featured-content shadow-z-2">
  165.                       <div class="embed-responsive embed-responsive-16by9">
  166.                         <iframe class="embed-responsive-item" src="" width="500" height="281"></iframe>
  167.                       </div>
  168.                     </div>
  170.                     <div class="post-summary">
  171.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  172.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  173.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  174.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  175.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  176.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  177.                     </div>
  179.                     <div class="post-detail-link text-center">
  180.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  181.                         <i class="fa fa-plus"></i>
  182.                         <div class="ripple-wrapper"></div>
  183.                       </a>
  184.                     </div>
  185.                   </article>
  186.                   <article class="post">
  187.                     <header class="article-title text-center">
  188.                       <p><a href="archive.html">Character</a></p>
  189.                       <h2><a href="single.html">Thor - The Hero of Power!</a></h2>
  190.                       <p class="post-meta">by Farhan Rizvi @ 06th May</p>
  191.                     </header>
  193.                     <div class="article-featured-content shadow-z-2">
  194.                       <img class="img-responsive" src="img/article-2.jpg" alt="">
  195.                     </div>
  197.                     <div class="post-summary">
  198.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  199.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  200.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  201.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  202.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  203.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  204.                     </div>
  206.                     <div class="post-detail-link text-center">
  207.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  208.                         <i class="fa fa-plus"></i>
  209.                         <div class="ripple-wrapper"></div>
  210.                       </a>
  211.                     </div>
  212.                   </article>
  213.                   <article class="post">
  214.                     <header class="article-title text-center">
  215.                       <p><a href="archive.html">Analysis</a></p>
  216.                       <h2><a href="single.html">Beauty Queen of Avengers</a></h2>
  217.                       <p class="post-meta">by Rasel Ahmed @ 05th May</p>
  218.                     </header>
  220.                     <div class="article-featured-content shadow-z-2">
  221.                       <a href="single.html"><img class="img-responsive" src="img/article-3.jpg" alt=""></a>
  222.                     </div>
  224.                     <div class="post-summary">
  225.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  226.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  227.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  228.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  229.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  230.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  231.                     </div>
  233.                     <div class="post-detail-link text-center">
  234.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  235.                         <i class="fa fa-plus"></i>
  236.                         <div class="ripple-wrapper"></div>
  237.                       </a>
  238.                     </div>
  239.                   </article>
  240.                   <article class="post">
  241.                     <header class="article-title text-center">
  242.                       <p>Movie</p>
  243.                       <h2><a href="single.html">The Target Man!</a></h2>
  244.                       <p class="post-meta">by Ratul Ahmed @ 05th May</p>
  245.                     </header>
  247.                     <div class="article-featured-content shadow-z-2">
  248.                       <a href="single.html"><img class="img-responsive" src="img/article-4.jpg" alt=""></a>
  249.                     </div>
  251.                     <div class="post-summary">
  252.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  253.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  254.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  255.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  256.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  257.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  258.                     </div>
  260.                     <div class="post-detail-link text-center">
  261.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  262.                         <i class="fa fa-plus"></i>
  263.                         <div class="ripple-wrapper"></div>
  264.                       </a>
  265.                     </div>
  266.                   </article>
  267.                   <article class="post">
  268.                     <header class="article-title text-center">
  269.                       <p><a href="archive.html">Secret</a></p>
  270.                       <h2><a href="single.html">Mind can be controled like mine!</a></h2>
  271.                       <p class="post-meta">by Unknown @ 02nd May</p>
  272.                     </header>
  274.                     <div class="article-featured-content shadow-z-2">
  275.                       <a href="single.html"><img class="img-responsive" src="img/article-5.jpg" alt=""></a>
  276.                     </div>
  278.                     <div class="post-summary">
  279.                       <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  280.                         suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
  281.                         vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  282.                         consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
  283.                         accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
  284.                         delenit augue duis dolore te feugait nulla facilisi.</p>
  285.                     </div>
  287.                     <div class="post-detail-link text-center">
  288.                       <a href="single.html" class="btn btn-fab btn-raised btn-material-red">
  289.                         <i class="fa fa-plus"></i>
  290.                         <div class="ripple-wrapper"></div>
  291.                       </a>
  292.                     </div>
  293.                   </article>
  295.                   <nav role="navigation" class="navigation posts-navigation">
  296.                     <div class="nav-links">
  297.                       <div class="nav-previous">
  298.                         <a href="#">Older posts</a>
  299.                       </div>
  300.                       <div class="nav-next">
  301.                         <a href="#">Newer posts</a>
  302.                       </div>
  303.                     </div>
  304.                   </nav>
  305.                 </div>
  306.               </div>
  307.             </div>
  309.           </div>
  310.         </div>
  311.       </div>
  312.     </div>
  313.   </section>
  315.   <footer class="footer">
  316.     <div class="container">
  317.       <div class="row">
  318.         <div class="col-lg-5 col-md-6 col-lg-offset-1">
  319.           <div class="footer-wid">
  320.             <h2 class="wid-title">A<span>vengers</span></h2>
  321.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
  322.               tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
  323.               nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  324.               Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
  325.               illum dolore eu feugiat nulla facilisis at vero eros et accumsan,</p>
  326.           </div>
  327.         </div>
  328.         <div class="col-lg-5 col-md-6">
  329.           <div class="footer-wid">
  330.             <h2 class="wid-title">Newsletter</h2>
  331.             <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  332.               ut aliquip ex ea commodo consequat.</p>
  334.             <div class="newsletter-form">
  335.               <form action="index.html">
  336.                 <input class="shadow-z-1" type="email" placeholder="Your Email address">
  337.                 <button type="submit" class="btn btn-material-red">Subscribe Now!</button>
  338.               </form>
  339.             </div>
  340.           </div>
  341.         </div>
  342.       </div>
  344.       <div class="row">
  345.         <div class="col-md-12">
  346.           <div class="footer-bottom">
  347.             <div class="row">
  348.               <div class="col-md-8">
  349.                 <div class="copyright-text">
  350.                   <p>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank"
  351.                       href="#">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
  352.                 </div>
  353.               </div>
  354.               <div class="col-md-4">
  355.                 <div class="social-links footer-social-links">
  356.                   <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-facebook"></i>
  357.                     <div class="ripple-wrapper"></div>
  358.                   </a>
  359.                   <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-twitter"></i>
  360.                     <div class="ripple-wrapper"></div>
  361.                   </a>
  362.                   <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-google-plus"></i>
  363.                     <div class="ripple-wrapper"></div>
  364.                   </a>
  365.                   <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-youtube"></i>
  366.                     <div class="ripple-wrapper"></div>
  367.                   </a>
  368.                   <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-linkedin"></i>
  369.                     <div class="ripple-wrapper"></div>
  370.                   </a>
  371.                 </div>
  372.               </div>
  373.             </div>
  374.           </div>
  375.         </div>
  376.       </div>
  377.     </div>
  378.   </footer>
  379. 复制代码

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

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

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

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

最后

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

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

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

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

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

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

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

JavaScriptHtmlcssweb网页模板

相关文章

    查看更多

    热门标签

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

    最新文章

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