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

最新推荐文章于 2024-11-14 15:33:48 发布
最新推荐文章于 2024-11-14 15:33:48 发布
阅读量156 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：https://my.oschina.net/u/3388416/blog/884809
版权

<!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="http://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="screenshot.png
"> 

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

 <meta name="twitter:url"          content="http://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="screenshot.png
"> 

 <link rel="stylesheet" href="node_modules/animate.css/animate.min.css"> 

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

 <link rel="stylesheet" href="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 id="docs">

 

 

 </div> 

 <div id="editor"> 

 <div id="css"> 

 <div>1
2
3
4
5
6
7
8
9
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="http://flexboxfroggy.com" data-via="thomashpark">Tweet</a> 

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

 </span> 

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

 

 

 

 </div> 

 <div id="credits"> 

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

 <a href="http://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="#en">English</a> 

 <a href="#es">Español</a> 

 <a href="#fr">Français</a> 

 <a href="#de">Deutsch</a> 

 <a href="#nl">Nederlands</a> 

 <a href="#pt-br">Português</a> 

 <a href="#it">Italiano</a> 

 <a href="#sv">Svenska</a> 

 <a href="#pl">Polski</a> 

 <a href="#cs">Česky</a> 

 <a href="#hu">Magyar</a> 

 <a href="#bg">Български</a> 

 <a href="#lt">Lietuvių</a> 

 <a href="#uk">Українська</a> 

 <a href="#ru">Русский</a> 

 <a href="#sr">Српски</a> 

 <a href="#tr">Türkçe</a> 

 <a href="#fa">فارسی</a> 

 <a href="#hi">हिंदी</a> 

 <a href="#zh-cn">简体中文</a> 

 <a href="#zh-tw">繁體中文</a> 

 <a href="#ja">日本語</a> 

 <a href="#ko">한국어</a> 

 <a href="#vi">Tiếng Việt</a> 

 <a href="#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="node_modules/jquery/dist/jquery.min.js"></script> 

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

 <script src="js/levels.js"></script> 

 <script src="js/docs.js"></script> 

 <script src="js/messages.js"></script> 

 <script src="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=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=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 = "//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】

转载于:https://my.oschina.net/u/3388416/blog/884809

chenlaojie7596
关注
[网络安全自学篇] 六十五.Vulnhub靶机渗透之环境搭建及JIS-CTF入门和蚁剑提权示例（一）
杨秀璋的专栏
04-10 1万+
这是作者的网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您们喜欢，一起进步。前文分享了SMBv3服务远程代码执行漏洞（CVE-2020-0796），攻击者可能利用此漏洞远程无需用户验证，执行恶意代码并获取机器的完全控制。本文将详细讲解Vulnhub靶机渗透的环境搭建和JIS-CTF题目，采用Nmap、Dirb、中国蚁剑、敏感文件分析、SSH远程连接、Shell提权等获取5个flag。由于hack the box速度堪忧，作者选择了Vulnhub靶场，希望深入分析来
div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
qq_524614081的博客
04-10 876
HTML5期末大作业：电影网站设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以
纯CSS3绘制可爱的青蛙表情
08-23
之前我们分享过很多基于jQuery、CSS3和SVG的动画表情，比如一套HTML5/SVG表情图标和HTML5/CSS3鬼脸表情下拉菜单。今天要分享另外一款超炫酷的CSS3青蛙表情，一共有12个表情，分别用青蛙的表情，有笑脸、也有生气的表情，非常可爱。
学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解
Jay17的博客
04-07 1861
学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解
纯CSS3青蛙表情符号动画特效
12-13
这是一组使用纯CSS3制作的青蛙表情符号动画特效。这组青蛙表情符号共12种表情，表情符号通过CSS3 transform和animation来制作动画效果。
flexbox Froggy 小青蛙跳荷叶源码答案
08-03
flex中有12个属性，除去一些融合缩写属性，属性值可谓五花八门，而且组合使用的话，还有很多注意点，建议大家可以玩下这个flexbox小青蛙的游戏，游戏几乎包含了所有的常用属性和属性值，形象且容易记忆。做出出来的同学可以看下里面的游戏答案
在css的框中打文字,css 边框上如何写入文字？
weixin_35999303的博客
08-03 7331
方法一：1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入html代码：。文字3、浏览器运行index.html页面，此时实现了边框角落开口显示文字。方法二：这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现1position:relative;下面举例说明1234我是边框上的文字我是边框内的文字设置css样式1234...
10年测试工程师的工作感悟，写给还在迷茫中的朋友
主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。
05-14 616
不知不觉已经从事软件测试六年了，从毕业到进入外包公司外包给微软做软件测试， 到现在加入著名的外企。 六年的时间过得真快。长期的测试工作也让我对软件测试有了比较深入的认识。我就跟大家分享一下我做测试的心得，如有错误还请批评改正。 文章内容讲的很真实，不管是刚入行还是在这个行业做了两三年的同志们，都可以看一下，可能很多人觉得讲的都是大道理，但是这些点都是我们今后要面对的。接下来看看文章吧。 01.软件测试人员应该居安思危 每当经济不好，公司业绩不好的时候，公司都可能进行裁员。首先裁的就是测试人员。因为测试人员的
HTML5期末大作业：在线电影网站设计——电影我不是药神响应式页播(4页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计
11-08 748
HTML5期末大作业：在线电影网站设计——电影我不是药神响应式页播(4页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页
web开发技术发展，CSS全局样式
m0_60196468的博客
07-23 215
▍CSS 相关 ● 1 CSS Battle - 在线比拼 CSS https://cssbattle.dev 在线比拼 CSS ，一个挺有趣的竞争性游戏，一共有12个级别，需要你用 HTML和 CSS 100%还原它给出的页面，然后再尽量减少代码，你也可以查看全球的排行榜，看解决方案。 ● 2 Learn CSS layout - 学习 CSS 布局 http://learnlayout.com 在线CSS布局学习，它会一步一步引导初学者学习 CSS 基础知识，在实践中帮助初学者掌握好 CSS
flex froggy 青蛙跳荷叶的小游戏答案
fay_ren的博客
11-27 2627
flax froggy青蛙跳荷叶的小游戏答案
CSS Flexbox 青蛙游戏
前端开发博客
11-01 3233
关注前端开发博客，回复“加群”加入我们一起学习，天天进步导语在学习CSS中，Flexbox是一个比较实用的CSS 布局属性，但很复杂，有些人可能没法很快掌握，今天我要推荐一个跟这个相关...
FLEXBOX FROGGY11-24level(flex布局小游戏)
weixin_43406277的博客
11-30 4388
FLEXBOX FROGGY11-24level(flex布局小游戏) FLEXBOX FROGGY11-24level(flex布局小游戏) level-11 使用 flex-direction 和 justify-content帮助青蛙找到他们的荷叶 当伸缩方向为纵向时，justify-content将改变垂直方向，align-items将改变水平方向。 flex-direction:column;//将方向更改为垂直方向 justify-content:end;//将小青蛙移到底部 #po
flex 下对齐_flex布局 小青蛙跳荷叶 答案
weixin_39599166的博客
11-30 872
level1justify-content 属性指引青蛙到右边的荷叶上。这个属性可以水平对齐元素，并且接受以下几个参数：flex-start: 元素和容器的左端对齐。flex-end: 元素和容器的右端对齐。center: 元素在容器里居中。space-between:元素之间保持相等的距离。space-around:元素周围保持相等的距离。举个例子，justify-content: flex-e...
css怎么让div动起来，实现动画效果一直在动
热门推荐
廖圣平
09-24 1万+
div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite alternate; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow;
CSS入门部分
weixin_43299422的博客
11-14 199
目录 1 基础语法 1.1 CSS规则 1.2 CSS选择器 2 CSS样式 CSS的使用目的就是生成.css格式文件，规定格式，可以在不同的浏览器中只用相同的样式。 1 基础语法 1.1 CSS规则 &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&a
前端（1）——快速入门HTML
最新发布
m0_63086198的博客
11-14 951
参考： W3school 1. HTML 我使用的是vs code，在使用之前，先安装以下几个插件： Auto Rename Tage HTML CSS Support Live Server 1.1 HTML标签 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键 字。 标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如
篡改淘宝销量：CSS代码教程
这个特定的讨论围绕着如何通过修改CSS代码来实现这一目的，标题"淘宝销量修改CSS代码"表明了主题的核心——利用前端技术来操纵网站元素展示的销量数据，而非实际的后台数据更新。 在提供的HTML片段中，可以看到一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值