視頻鏈接:分享兩個(gè)前端網(wǎng)頁(yè),能用我的就別自己做了(含源" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > HTML期末作業(yè)~個(gè)人信息展示網(wǎng)站響應(yīng)式模板(HTML+CSS+JavaScript)

HTML期末作業(yè)~個(gè)人信息展示網(wǎng)站響應(yīng)式模板(HTML+CSS+JavaScript)

時(shí)間:2022-08-07 00:54:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2022-08-07 00:54:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)

項(xiàng)目:雷神個(gè)人信息展示項(xiàng)目

作品描述:個(gè)人信息展示網(wǎng)站響應(yīng)式模板HTML+CSS+JavaScript。主要包括的頁(yè)面有HOME,ABOUT,MOVIE,SPORTS,TRAVEL,SINGLE,CONTACT等總共7個(gè)頁(yè)面。

視頻鏈接:分享兩個(gè)前端網(wǎng)頁(yè),能用我的就別自己做了(含源碼)

實(shí)現(xiàn)技術(shù):CSS+HTML+JS+H5+CSS3+jqury+bootstrap;

作品演示

1.網(wǎng)站首頁(yè)

2.MOVIE頁(yè)

3.響應(yīng)式

目錄結(jié)構(gòu)

代碼展示

<header class="header"> <div data-velocity="-.4" id="particles" class="header-bg"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="social-links"> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-facebook"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-twitter"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-google-plus"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-youtube"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-linkedin"></i> <div class="ripple-wrapper"></div> </a> </div> </div> </div> </div> <div class="site-title-table"> <div class="site-title-tablecell"> <div class="slide-text"> <h2><a href="index.html"><span>S</span>uper<span>H</span>eros</a></h2> <p>Another exciting blog template from awesome team</p> </div> </div> </div> </header> <section class="maincontent-wrap"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="maincotnent shadow-z-1"> <div class="mainmenu"> <div class="navbar navbar-nobg"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home <div class="ripple-wrapper"></div> </a></li> <li><a href="about.html">About</a></li> <li><a href="archive.html">Movie</a></li> <li><a href="archive.html">Sports</a></li> <li><a href="archive.html">Travel</a></li> <li><a href="single.html">Single</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="article-list"> <article class="post"> <header class="article-title text-center"> <p><a href="archive.html">Nature</a></p> <h2><a href="single.html">Green Lantern for Green World!</a></h2> <p class="post-meta">by Farhan Rizvi @ 11th May</p> </header> <div class="article-featured-content shadow-z-2"> <a href="single.html"><img class="img-responsive" src="img/post-2.jpg" alt=""></a> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <article class="post"> <header class="article-title text-center"> <p><a href="archive.html">Movie</a></p> <h2><a href="single.html">My Favorite Spiderman Movie</a></h2> <p class="post-meta">by Ratul Ahmed @ 09th May</p> </header> <div class="article-featured-content shadow-z-2"> <a href="single.html"><img class="img-responsive" src="img/post-1.jpg" alt=""></a> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <article class="post"> <header class="article-title text-center"> <p><a href="archive.html">Movie</a></p> <h2><a href="single.html">Marvel Phase to SuperCut</a></h2> <p class="post-meta">by Rasel Ahmed @ 07th May</p> </header> <div class="article-featured-content shadow-z-2"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" width="500" height="281"></iframe> </div> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <article class="post"> <header class="article-title text-center"> <p><a href="archive.html">Fun</a></p> <h2><a href="single.html">The Return of Hulk!</a></h2> <p class="post-meta">by Tamanna Ferdous @ 07th May</p> </header> <div class="article-featured-content shadow-z-2"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" width="500" height="281"></iframe> </div> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <article class="post"> <header class="article-title text-center"> <p><a href="archive.html">Character</a></p> <h2><a href="single.html">Thor - The Hero of Power!</a></h2> <p class="post-meta">by Farhan Rizvi @ 06th May</p> </header> <div class="article-featured-content shadow-z-2"> <img class="img-responsive" src="img/article-2.jpg" alt=""> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <article class="post"> <header class="article-title text-center"> <p><a href="archive.html">Analysis</a></p> <h2><a href="single.html">Beauty Queen of Avengers</a></h2> <p class="post-meta">by Rasel Ahmed @ 05th May</p> </header> <div class="article-featured-content shadow-z-2"> <a href="single.html"><img class="img-responsive" src="img/article-3.jpg" alt=""></a> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <article class="post"> <header class="article-title text-center"> <p>Movie</p> <h2><a href="single.html">The Target Man!</a></h2> <p class="post-meta">by Ratul Ahmed @ 05th May</p> </header> <div class="article-featured-content shadow-z-2"> <a href="single.html"><img class="img-responsive" src="img/article-4.jpg" alt=""></a> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <article class="post"> <header class="article-title text-center"> <p><a href="archive.html">Secret</a></p> <h2><a href="single.html">Mind can be controled like mine!</a></h2> <p class="post-meta">by Unknown @ 02nd May</p> </header> <div class="article-featured-content shadow-z-2"> <a href="single.html"><img class="img-responsive" src="img/article-5.jpg" alt=""></a> </div> <div class="post-summary"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div class="post-detail-link text-center"> <a href="single.html" class="btn btn-fab btn-raised btn-material-red"> <i class="fa fa-plus"></i> <div class="ripple-wrapper"></div> </a> </div> </article> <nav role="navigation" class="navigation posts-navigation"> <div class="nav-links"> <div class="nav-previous"> <a href="#">Older posts</a> </div> <div class="nav-next"> <a href="#">Newer posts</a> </div> </div> </nav> </div> </div> </div> </div> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-6 col-lg-offset-1"> <div class="footer-wid"> <h2 class="wid-title">A<span>vengers</span></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan,</p> </div> </div> <div class="col-lg-5 col-md-6"> <div class="footer-wid"> <h2 class="wid-title">Newsletter</h2> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <div class="newsletter-form"> <form action="index.html"> <input class="shadow-z-1" type="email" placeholder="Your Email address"> <button type="submit" class="btn btn-material-red">Subscribe Now!</button> </form> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="footer-bottom"> <div class="row"> <div class="col-md-8"> <div class="copyright-text"> <p>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="#">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p> </div> </div> <div class="col-md-4"> <div class="social-links footer-social-links"> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-facebook"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-twitter"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-google-plus"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-youtube"></i> <div class="ripple-wrapper"></div> </a> <a class="btn social-link" href="javascript:void(0)"><i class="fa fa-linkedin"></i> <div class="ripple-wrapper"></div> </a> </div> </div> </div> </div> </div> </div> </div> </footer>

做好的網(wǎng)頁(yè)效果,如何通過(guò)發(fā)鏈接給別人看?

1.1解決部署上線~> 部署上線工具(永久免費(fèi)使用)

1.不需要買服務(wù)器就能部署線上,全世界都能訪問(wèn)你的連接啦, 這里給大家推薦一個(gè)程序員必備神器~
簡(jiǎn)單易懂, 簡(jiǎn)直神器 ~ 需要可在我公_號(hào):前端老實(shí)人,自取

2.就是把你的代碼效果做好了以后, 部署到線上, 把鏈接發(fā)給別人, 就可以讓對(duì)方通過(guò)你的連接點(diǎn)擊進(jìn)去, 就能看到你的網(wǎng)頁(yè)效果啦, 電腦端和手機(jī)端都可以噢! (不然別人看你的網(wǎng)頁(yè)都要發(fā)文件過(guò)去,體驗(yàn)感不太好~)

最后

博主為人老實(shí),無(wú)償解答問(wèn)題,也會(huì)錄制一些學(xué)習(xí)視頻教同學(xué)們知識(shí)?

如果對(duì)您有幫助,希望能給個(gè) /評(píng)論/收藏

您的三連~是對(duì)我創(chuàng)作最大的動(dòng)力支持

關(guān)鍵詞:響應(yīng),模板,展示,作業(yè),信息

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉