Home思洋影视事业部网站建设知识库
0 Comments

Win8风格的Web启动界面(1)

发布于：2013-10-28  |   作者：广州网站建设  |   已聚集：人围观

主要用到jquery.animation.easing.js 和jquery.mousewheel.min.js 两个jQuery插件。
广州网站建设,网站建设,广州网页设计,广州网站设计

页面布局

HTML



    
	
  1. 
		View Code   
    2. 
	
  2. 
		 
    3. 
	
  3. 
		<html xmlns="http://www.w3.org/1999/xhtml"> 
    4. 
	
  4. 
		    <head> 
    5. 
	
  5. 
		        <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    6. 
	
  6. 
		        <link rel="stylesheet" type="text/css" href="lib/style.css"/> 
    7. 
	
  7. 
		        <link rel="shortcut icon" href="favicon.png"/> 
    8. 
	
  8. 
		        <script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script> 
    9. 
	
  9. 
		        <script type="text/javascript" src="lib/jquery.animation.easing.js"></script> 
    10. 
	
  10. 
		        <script type="text/javascript" src="lib/jquery.mousewheel.min.js"></script> 
    11. 
	
  11. 
		        <script type="text/javascript" src="source.js"></script> 
    12. 
	
  12. 
		        <script type="text/javascript" src="lib/script.js"></script> 
    13. 
	
  13. 
		          
    14. 
	
  14. 
		        <title>New tab</title> 
    15. 
	
  15. 
		    </head> 
    16. 
	
  16. 
		    <body> 
    17. 
	
  17. 
		        <div id="place"> 
    18. 
	
  18. 
		            <div id="name1"></div> 
    19. 
	
  19. 
		            <div id="wrapper1"> 
    20. 
	
  20. 
		                <div id="thumb1-1"></div> 
    21. 
	
  21. 
		                <div id="thumb1-2"></div> 
    22. 
	
  22. 
		                <div id="thumb1-3"></div> 
    23. 
	
  23. 
		                <div id="thumb1-4"></div> 
    24. 
	
  24. 
		                <div id="thumb1-5"></div> 
    25. 
	
  25. 
		                <div id="thumb1-6"></div> 
    26. 
	
  26. 
		                <div id="thumb1-7"></div> 
    27. 
	
  27. 
		                <div id="thumb1-8"></div> 
    28. 
	
  28. 
		                <div id="thumb1-9"></div> 
    29. 
	
  29. 
		                <div id="thumb1-10"></div> 
    30. 
	
  30. 
		                <div id="thumb1-11"></div> 
    31. 
	
  31. 
		                <div id="thumb1-12"></div> 
    32. 
	
  32. 
		              
    33. 
	
  33. 
		                <form action="" method="get"> 
    34. 
	
  34. 
		                    <input type="text" name="q" value="" /><button type="submit"></button> 
    35. 
	
  35. 
		                    <div id="engines1"> 
    36. 
	
  36. 
		                        <div id="google1"></div> 
    37. 
	
  37. 
		                        <div id="bing1"></div> 
    38. 
	
  38. 
		                        <div id="yahoo1"></div> 
    39. 
	
  39. 
		                        <div id="wikipedia1"></div> 
    40. 
	
  40. 
		                    </div> 
    41. 
	
  41. 
		                    <div id="search-engine1"></div> 
    42. 
	
  42. 
		                </form> 
    43. 
	
  43. 
		            </div><!-- end wrapper1 --> 
    44. 
	
  44. 
		            <div id="button1to2"></div> 
    45. 
	
  45. 
		            <div id="button2to1"></div> 
    46. 
	
  46. 
		            <div id="name2"></div> 
    47. 
	
  47. 
		            <div id="wrapper2"> 
    48. 
	
  48. 
		                <div id="thumb2-1"></div> 
    49. 
	
  49. 
		                <div id="thumb2-2"></div> 
    50. 
	
  50. 
		                <div id="thumb2-3"></div> 
    51. 
	
  51. 
		                <div id="thumb2-4"></div> 
    52. 
	
  52. 
		                <div id="thumb2-5"></div> 
    53. 
	
  53. 
		                <div id="thumb2-6"></div> 
    54. 
	
  54. 
		                <div id="thumb2-7"></div> 
    55. 
	
  55. 
		                <div id="thumb2-8"></div> 
    56. 
	
  56. 
		                <div id="thumb2-9"></div> 
    57. 
	
  57. 
		                <div id="thumb2-10"></div> 
    58. 
	
  58. 
		                <div id="thumb2-11"></div> 
    59. 
	
  59. 
		                <div id="thumb2-12"></div> 
    60. 
	
  60. 
		              
    61. 
	
  61. 
		                <form action="" method="get"> 
    62. 
	
  62. 
		                    <input type="text" name="q" value="" placeholder="" /><button type="submit"></button> 
    63. 
	
  63. 
		                    <div id="engines2"> 
    64. 
	
  64. 
		                        <div id="google2"></div> 
    65. 
	
  65. 
		                        <div id="bing2"></div> 
    66. 
	
  66. 
		                        <div id="yahoo2"></div> 
    67. 
	
  67. 
		                        <div id="wikipedia2"></div> 
    68. 
	
  68. 
		                    </div> 
    69. 
	
  69. 
		                    <div id="search-engine2"></div> 
    70. 
	
  70. 
		                </form> 
    71. 
	
  71. 
		            </div><!-- end wrapper2 --> 
    72. 
	
  72. 
		            <div id="button2to3"></div> 
    73. 
	
  73. 
		            <div id="button3to2"></div> 
    74. 
	
  74. 
		            <div id="name3"></div> 
    75. 
	
  75. 
		            <div id="wrapper3"> 
    76. 
	
  76. 
		                <div id="thumb3-1"></div> 
    77. 
	
  77. 
		                <div id="thumb3-2"></div> 
    78. 
	
  78. 
		                <div id="thumb3-3"></div> 
    79. 
	
  79. 
		                <div id="thumb3-4"></div> 
    80. 
	
  80. 
		                <div id="thumb3-5"></div> 
    81. 
	
  81. 
		                <div id="thumb3-6"></div> 
    82. 
	
  82. 
		                <div id="thumb3-7"></div> 
    83. 
	
  83. 
		                <div id="thumb3-8"></div> 
    84. 
	
  84. 
		                <div id="thumb3-9"></div> 
    85. 
	
  85. 
		                <div id="thumb3-10"></div> 
    86. 
	
  86. 
		                <div id="thumb3-11"></div> 
    87. 
	
  87. 
		                <div id="thumb3-12"></div> 
    88. 
	
  88. 
		              
    89. 
	
  89. 
		                <form action="" method="get"> 
    90. 
	
  90. 
		                    <input type="text" name="q" value="" placeholder="" /><button type="submit"></button> 
    91. 
	
  91. 
		                    <div id="engines3"> 
    92. 
	
  92. 
		                        <div id="google3"></div> 
    93. 
	
  93. 
		                        <div id="bing3"></div> 
    94. 
	
  94. 
		                        <div id="yahoo3"></div> 
    95. 
	
  95. 
		                        <div id="wikipedia3"></div> 
    96. 
	
  96. 
		                    </div> 
    97. 
	
  97. 
		                    <div id="search-engine3"></div> 
    98. 
	
  98. 
		                </form> 
    99. 
	
  99. 
		            </div><!-- end wrapper3 --> 
    100. 
	
  100. 
		        </div><!-- end place --> 
    101. 
	
  101. 
		    </body> 
    102. 
	
  102. 
		</html> 
    103. 



			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机