flexboxdefense
发表于|更新于
|浏览量:
理解绝对是养育一切友情之果的土壤——威尔逊
分享一个还不错的网站：
http://www.flexboxdefense.com/
其可以通过塔防游戏的方式，来让玩家学习flex布局
一共12关，每一关都精心设计
相关推荐
2024-01-15
纯css实现炫酷头像效果
官僚作风是一门使可能变成不可能的艺术。——萨尔塞多 分享一个炫酷头像效果： 从b站渡一教育的一个视频看到的（不是推广，只是注明出处） 123456789101112131415161718192021222324252627282930313233343536373839<style> img { --s: 280px; --c1: #c02942; --c2: #ecd078; --b: 5px; --f: 1; --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%; --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b)); width: var(--s); height: var(--s); cursor: pointer; transition: 0.5s; padding-top: 100px; outline: ...
2021-12-02
uniapp播放音频
人们不太看重自己的力量——这就是他们软弱的原因。——高尔基 播放音频的代码很简单： 123const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.src = '/img/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav'; innerAudioContext.play(); 官方文档： https://uniapp.dcloud.io/api/media/audio-context 除了播放、暂停、停止等也都能实现 完整代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<template> <view class=...
2020-10-02
cookie相关操作
青春在人的一生中只有一次，而青春时期比任何时期都最强盛美好。因此，千万不要使自己的精神僵化，而要把青春保持永远。 ——别林斯基 JavaScript Cookie Cookie 用于存储 web 页面的用户信息。 什么是 Cookie？Cookie 是一些数据, 存储于你电脑上的文本文件中。 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。 Cookie 的作用就是用于解决 “如何记录客户端的用户信息”: 当用户访问 web 页面时，他的名字可以记录在 cookie 中。 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。 Cookie 以名/值对形式存储，如下所示: username=John Doe 当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。 使用 JavaScript 创建CookieJavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。 JavaSc...
2025-03-18
文本精准对齐
即使饱含泪水，我仍旧将它们擦干；即使不被信任，我仍旧相信。就是这样，也将是这样。——保罗·科埃略的《阿莱夫》 CSS 如何让文本随背景图等比例缩放？背景在响应式布局中，我们经常需要让文本标注准确地贴合背景图，并且在窗口缩放时，文本应 保持相对位置不变，同时等比例缩放。然而，传统的 position: absolute 方式往往会导致文本发生 偏移，影响对齐。 最佳实践：position + transform在 CSS 中，最简单且稳定的方法是结合： 1234position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); 这能确保文本始终居中，不随容器缩放而偏移。 原理解析 position: absolute 确定参考点 文本相对于 position: relative 的父元素 进行绝对定位。 left: 50%; top: 50% 让文本的左上角 位于背景图 50% 的位置。 transform: translate(-50%, -50%) 精准居中 向左移动自身宽度 50% (t...
2022-05-17
display:contents
多少人以友谊的名义，爱着一个人。——电影《One Day》 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/display-box 首先是一段代码： 12345678910111213141516171819<!DOCTYPE html><head> <title>display</title> <style> .outer { border: 2px solid red; width: 300px; } .outer>div { border: 1px solid green; } </style></head><body> <div class="outer"> <div>I...
2020-11-23
js打字机动画效果实现
坦白使人心地轻松的妙药。——西塞罗 实现打字机效果 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog