之前写javascript、html等常用的知识，都是在理论的基础上写的。今天将写好的一个例子带来给大家分享，以项目的方式来向大家展示html、javascript等前端语言带来的成果展示，更加增进大家对前端知识的了解和关注。

小熊进阶之WEB前端高端大气摄影html示例展示

1. <!-- banner -->

2. <div class="banner">

3. <div class="container">

4. <div class="header">

5. <div class="logo">

6. <a href="index.html">Dazzly</a>

7. </div>

8. <div class="top-nav">

9. <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">

10. <h3>Menu</h3>

11. <ul>

12. <li class="active"><a href="index.html">Home</a></li>

13. <li><a href="#about" class="scroll">About Us</a></li>

14. <li><a href="#services" class="scroll">Services</a></li>

15. <li><a href="#events" class="scroll">News & Events</a></li>

16. <li><a href="#portfolio" class="scroll">Portfolio</a></li>

17. <li><a href="#mail" class="scroll">Mail Us</a></li>

18. </ul>

19. </nav>

20. <div class="main buttonset">

21. <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->

22. <button id="showRightPush"><img src="images/menu.png" alt=""/></button>

23. <!--<span class="menu"></span>-->

24. </div>

25. <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->

26. <script src="js/classie.js"></script>

27. <script>

28. var menuRight = document.getElementById( 'cbp-spmenu-s2' ),

29. showRightPush = document.getElementById( 'showRightPush' ),

30. body = document.body;

31. showRightPush.onclick = function() {

32. classie.toggle( this, 'active' );

33. classie.toggle( body, 'cbp-spmenu-push-toleft' );

34. classie.toggle( menuRight, 'cbp-spmenu-open' );

35. disableOther( 'showRightPush' );

36. };

37. function disableOther( button ) {

38. if( button !== 'showRightPush' ) {

39. classie.toggle( showRightPush, 'disabled' );

40. }

41. }

42. </script>

43. </div>

44. <div class="clearfix"> </div>

45. </div>

46. <div class="banner-info">

47. <h1>Neque quisquam <span>quidolorem</span></h1>

48. <p>pursues or desires</p>

49. </div>

50. </div>

51. </div>

52. <!-- //banner -->

1. <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

2. function hideURLbar(){ window.scrollTo(0,1); } </script>

3. <!-- //for-mobile-apps -->

4. <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />

5. <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

6. <!-- js -->

7. <script src="js/jquery-1.11.1.min.js"></script>

8. <!-- //js -->

9. <!-- menu -->

10. <link href="css/component.css" rel="stylesheet" type="text/css" />

11. <!-- //menu -->

12. <!-- gallery -->

13. <script src="js/jquery.chocolat.js"></script>

14. <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">

15. <!--light-box-files -->

16. <script type="text/javascript" charset="utf-8">

17. $(function() {

18. $('.gallery a').Chocolat();

19. });

20. </script>

21. <!-- //gallery -->

22. <!-- start-smoth-scrolling -->

23. <script type="text/javascript" src="js/move-top.js"></script>

24. <script type="text/javascript" src="js/easing.js"></script>

25. <script type="text/javascript">

26. jQuery(document).ready(function($) {

27. $(".scroll").click(function(event){

28. event.preventDefault();

29. $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);

30. });

31. });

32. </script>

小熊进阶之WEB前端高端大气摄影html示例展示

小熊进阶之WEB前端高端大气摄影html示例展示

小熊进阶之WEB前端高端大气摄影html示例展示

1. <!-- portfolio -->

2. <div id="portfolio" class="gallery">

3. <div class="container">

4. <h3>Portfolio</h3>

5. <div class="gallery-grids">

6. <div class="col-md-6 baner-top">

7. <figure class="effect-bubba">

8. <a href="images/2.jpg" rel="title" class="b-link-stripe b-animate-go thickbox">

9. <img src="images/2.jpg" alt="" class="img-responsive" />

10. <figcaption>

11. <h4>Enimet pulvinar posuere</h4>

12. <p>In sit amet sapien eros Integer dolore magna aliqua</p>

13. </figcaption>

14. </a>

15. </figure>

16. </div>

17. <div class="col-md-6 baner-top">

18. <figure class="effect-bubba">

19. <a href="images/3.jpg" rel="title" class="b-link-stripe b-animate-go thickbox">

20. <img src="images/3.jpg" alt="" class="img-responsive" />

21. <figcaption>

22. <h4>Enimet pulvinar posuere</h4>

23. <p>In sit amet sapien eros Integer dolore magna aliqua</p>

24. </figcaption>

25. </a>

26. </figure>

27. </div>

28. <div class="clearfix"> </div>

29. <div class="baner-row">

30. <div class="col-md-4 baner-bottom">

31. <figure class="effect-bubba">

32. <a href="images/6.jpg" rel="title" class="b-link-stripe b-animate-go thickbox">

33. <img src="images/6.jpg" alt="" class="img-responsive" />

34. <figcaption>

35. <h4 class="sec">Enimet pulvinar</h4>

36. <p>In sit amet sapien eros Integer dolore magna</p>

37. </figcaption>

38. </a>

39. </figure>

40. </div>

41. <div class="col-md-4 baner-bottom">

42. <figure class="effect-bubba">

43. <a href="images/7.jpg" rel="title" class="b-link-stripe b-animate-go thickbox">

44. <img src="images/7.jpg" alt=""/ class="img-responsive" >

45. <figcaption>

46. <h4 class="sec">Enimet pulvinar</h4>

47. <p>In sit amet sapien eros Integer dolore magna</p>

48. </figcaption>

49. </a>

50. </figure>

51. </div>

52. <div class="col-md-4 baner-bottom">

53. <figure class="effect-bubba">

54. <a href="images/8.jpg" rel="title" class="b-link-stripe b-animate-go thickbox">

55. <img src="images/8.jpg" alt=""/ class="img-responsive" >

56. <figcaption>

57. <h4 class="sec">Enimet pulvinar</h4>

58. <p>In sit amet sapien eros Integer dolore magna</p>

59. </figcaption>

60. </a>

61. </figure>

62. </div>

63. <div class="clearfix"> </div>

64. </div>

65. <div class="col-md-6 baner-top">

66. <figure class="effect-bubba">

67. <a href="images/5.jpg" rel="title" class="b-link-stripe b-animate-go thickbox">

68. <img src="images/5.jpg" alt="" class="img-responsive" />

69. <figcaption>

70. <h4>Enimet pulvinar posuere</h4>

71. <p>In sit amet sapien eros Integer dolore magna aliqua</p>

72. </figcaption>

73. </a>

74. </figure>

75. </div>

76. <div class="col-md-6 baner-top">

77. <figure class="effect-bubba">

78. <a href="images/4.jpg" rel="title" class="b-link-stripe b-animate-go thickbox">

79. <img src="images/4.jpg" alt="" class="img-responsive" />

80. <figcaption>

81. <h4>Enimet pulvinar posuere</h4>

82. <p>In sit amet sapien eros Integer dolore magna aliqua</p>

83. </figcaption>

84. </a>

85. </figure>

86. </div>

87. <div class="clearfix"> </div>

88. </div>

89. </div>

90. </div>

91. <!-- //portfolio -->

欢迎大家在下方积极吐槽，小编会一一进行查看并回复，期待你的答案哦……

------------------------------------------

如果喜欢请转发，小小支持一下。

更多精彩文章请关注 本头条号（小熊学IT ） 或 微信公众号 ITDetail（小熊学IT ），更有机会联系小熊为你在IT行业的答疑解惑……