首页 > 代码库 > 靠写CSS代码来帮助青蛙和他的朋友们

靠写CSS代码来帮助青蛙和他的朋友们

2024-09-16 13:20:16   220人阅读

<!doctype html> 

 <html> 

 <head> 

 <meta charset="utf-8"> 

 <title>Flexbox Froggy - A game for learning CSS flexbox</title> 

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

 <meta property="og:url"           content="https://flexboxfroggy.com"> 

 <meta property="og:type"          content="website"> 

 <meta property="og:title"         content="Flexbox Froggy"> 

 <meta property="og:description"   content="A game for learning CSS flexbox"> 

 <meta property="og:image"         content="技术分享
"> 

 <meta property="fb:app_id"        content="916849395036923"> 

 <meta name="twitter:url"          content="https://flexboxfroggy.com"> 

 <meta name="twitter:title"        content="Flexbox Froggy"> 

 <meta name="twitter:description"  content="A game for learning CSS flexbox"> 

 <meta name="twitter:image"        content="技术分享
"> 

 <link rel="stylesheet" href="http://www.mamicode.com/node_modules/animate.css/animate.min.css"> 

 <link href=http://www.mamicode.com/‘https://fonts.googleapis.com/css?family=PT+Sans|Fredoka+One|Source+Code+Pro‘ rel=‘stylesheet‘ type=‘text/css‘>

 <link rel="stylesheet" href="http://www.mamicode.com/css/style.css"> 

 </head> 

 <body> 

 <section id="sidebar"> 

 <div> 

 <div id="level-counter"> 

 <span class="arrow left">?</span> 

 <span id="level-indicator"> 

 <span id="labelLevel">Level</span> 

 <span>1</span> 

 <span id="labelOf">of</span> 

 <span>1</span> 

 <span>?</span> 

 </span> 

 <span class="arrow right">?</span> 

 <div id="levelsWrapper"> 

 <div id="levels"></div> 

 <div id="labelReset">Reset</div> 

 </div> 

 </div> 

 <h1>Flexbox Froggy</h1> 

 <p id="instructions"></p> 

 <p id="docs"></p> 

 </div> 

 <div id="editor"> 

 <div id="css"> 

 <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div> 

 <pre id="before"></pre> 

 <textarea id="code" autofocus></textarea> 

 <pre id="after"></pre> 

 </div> 

 <button id="next">Next</button> 

 </div> 

 <div id="share"> 

 <p> 

 <span id="tweet"> 

 <a href="https://twitter.com/share"{count} data-url="https://flexboxfroggy.com" data-via="thomashpark">Tweet</a> 

 <a href="https://twitter.com/thomashpark" data-show-count="false">Follow @thomashpark</a> 

 </span> 

 <span data-href="https://flexboxfroggy.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></span> 

 </p> 

 </div> 

 <div id="credits"> 

 <span id="labelFooter">Flexbox Froggy is created by</span> 

 <a href="https://thomaspark.co">Thomas Park</a> ? 

 <a href="https://github.com/thomaspark/flexboxfroggy/">GitHub</a> ? 

 <a href="https://twitter.com/thomashpark">Twitter</a> ? 

 <span id="language"> 

 <span id="languageActive" class="toggle translate">English</span> 

 <span> 

 <a href="http://www.mamicode.com/#en">English</a> 

 <a href="http://www.mamicode.com/#es">Espa?ol</a> 

 <a href="http://www.mamicode.com/#fr">Fran?ais</a> 

 <a href="http://www.mamicode.com/#de">Deutsch</a> 

 <a href="http://www.mamicode.com/#nl">Nederlands</a> 

 <a href="http://www.mamicode.com/#pt-br">Português</a> 

 <a href="http://www.mamicode.com/#it">Italiano</a> 

 <a href="http://www.mamicode.com/#sv">Svenska</a> 

 <a href="http://www.mamicode.com/#pl">Polski</a> 

 <a href="http://www.mamicode.com/#cs">?esky</a> 

 <a href="http://www.mamicode.com/#hu">Magyar</a> 

 <a href="http://www.mamicode.com/#bg">Български</a> 

 <a href="http://www.mamicode.com/#lt">Lietuvi?</a> 

 <a href="http://www.mamicode.com/#uk">Укра?нська</a> 

 <a href="http://www.mamicode.com/#ru">Русский</a> 

 <a href="http://www.mamicode.com/#sr">Српски</a> 

 <a href="http://www.mamicode.com/#tr">Türk?e</a> 

 <a href="http://www.mamicode.com/#fa">?????</a> 

 <a href="http://www.mamicode.com/#hi">?????</a> 

 <a href="http://www.mamicode.com/#zh-cn">简体中文</a> 

 <a href="http://www.mamicode.com/#zh-tw">繁體中文</a> 

 <a href="http://www.mamicode.com/#ja">日本語</a> 

 <a href="http://www.mamicode.com/#ko">???</a> 

 <a href="http://www.mamicode.com/#vi">Ti?ng Vi?t</a> 

 <a href="http://www.mamicode.com/#eo">Esperanto</a> 

 </span> 

 </span> 

 </div> 

 </section> 

 <section id="view"> 

 <div id="board"> 

 <div id="pond"> 

 </div> 

 <div id="background"> 

 </div> 

 </div> 

 </section> 

 <script src="http://www.mamicode.com/node_modules/jquery/dist/jquery.min.js"></script> 

 <script src="https://unpkg.com/parse@1.9.2/dist/parse.min.js"></script> 

 <script src="http://www.mamicode.com/js/levels.js"></script> 

 <script src="http://www.mamicode.com/js/docs.js"></script> 

 <script src="http://www.mamicode.com/js/messages.js"></script> 

 <script src="http://www.mamicode.com/js/game.js"></script> 

 <script> 

 (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject‘]=r;i[r]=i[r]||function(){ 

 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 

 m=s.getElementsByTagName(o)[0];a.async=1;a.src=http://www.mamicode.com/g;m.parentNode.insertBefore(a,m)

 })(window,document,‘script‘,‘https://www.google-analytics.com/analytics.js‘,‘ga‘); 

  

 ga(‘create‘, ‘UA-23019901-13‘, ‘auto‘); 

 ga(‘send‘, ‘pageview‘); 

 </script> 

 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?‘http‘:‘https‘;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=http://www.mamicode.com/p+‘://platform.twitter.com/widgets.js‘;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script‘, ‘twitter-wjs‘);

 </script> 

 <div id="fb-root"></div> 

 <script>(function(d, s, id) { 

 var js, fjs = d.getElementsByTagName(s)[0]; 

 if (d.getElementById(id)) return; 

 js = d.createElement(s); js.id = id; 

 js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=916849395036923"; 

 fjs.parentNode.insertBefore(js, fjs); 

 }(document, ‘script‘, ‘facebook-jssdk‘));</script> 

 </body> 

 </html> 

 海量学习资源，进群下载【web前端交流学习群21】

靠写CSS代码来帮助青蛙和他的朋友们


联系
我们