aspect-ratio
发表于|更新于
|浏览量:
物以稀为贵，情因老更慈。——白居易
分享一个css属性aspect-ratio
大家其实能看出来值2/1就是宽高比
这个属性在width和height只要有任意一个没有配的情况下就会生效，非常方便用于配置一些指定宽高比例的场景
相关推荐
2021-09-23
sessionStorage
勤奋是一种可以吸引一切美好事物的天然磁石。 ——罗•伯顿 前端除了localStorage还有sessionStorage localStorage即便关闭了浏览器，再次打开该页面仍然存在 但sessionStorage的作用于仅仅局限于当前标签页或通过当前标签页中的点击事件打开的新页面 localStorage一般用于用户token储存、主题设置等需要稍微长期持久化的场景 sessionStorage一般用于刷新页面记住分页页码、记住检索条件等关闭标签页即销毁的场景 sessionStorage的api和localStorage的api非常相似： 12// 存sessionStorage.setItem("ruben","ruben") 取出来： 12// 取sessionStorage.getItem("ruben")
2022-12-31
unocss
忍把浮名，换了浅斟低唱。——柳永《鹤冲天》 分享一个css框架unocss 可以通过class规则，生成对应样式，例如通过m-1生成margin: 0.25rem 而且规则可以通过 https://uno.antfu.me/ 进行查询 除了预制规则，还可以自定义规则： 123rules: [ ['m-1', { margin: '0.25rem' }],] 即可生成 1.m-1 { margin: 0.25rem; } 还可以通过正则的方式 1234rules: [ [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })], [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],] 使用起来 123456<div class="m-100"> &...
2021-06-27
before和after选择器
在科学上没有平坦的大道，只有不畏劳苦，沿着陡峭山路攀登的人，才有希望达到光辉的顶点——马克思 我们可以使用::before和::after去选择我们节点内部的首项或尾项 例如我这里代码如下 123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .ruben-parent { width: 100%; border: 0.1em solid #ababab; text-align: center; } .ruben-parent::before, .ruben-parent::after { margin: 0 auto; content: ''; ...
2026-03-16
project-nomad
尊重生命、尊重他人也尊重自己的生命，是生命进程中的伴随物，也是心理健康的一个条件。——弗洛姆 Project N.O.M.A.D.Node for Offline Media, Archives, and DataKnowledge That Never Goes Offline Project N.O.M.A.D：一台把“知识、教育、工具、AI”背在身上的离线小型堡垒Project N.O.M.A.D 的自我介绍特别像一句誓言： Project N.O.M.A.D, is a self-contained, offline survival computer packed with critical tools, knowledge, and AI to keep you informed and empowered—anytime, anywhere. 他不想当“又一个必须联网才能运行”的应用集合，他更像一个坚决的旅行者：行李里装着知识、地图、课程、数据工具、笔记本、甚至还有能跟你聊天的本地 AI——不管你身处哪里，哪怕网络断了，他也想把“信息与能力”留在你...
2024-12-18
ARIA16
兴趣是最好的老师，其次是耻辱——胖子邓 ARIA16技术：使用aria-label增强Web可访问性 在现代Web开发中，可访问性（Accessibility）是提升用户体验的关键因素之一。尤其对于视障用户来说，屏幕阅读器依赖准确的页面结构和标签描述来解释内容。ARIA16是一种有效的技术，使用aria-label属性为无可见文本的元素提供描述性标签，从而增强Web的可访问性。 什么是ARIA16？ARIA16是W3C推荐的一项技术，旨在通过aria-label属性为交互式元素提供可访问性支持。aria-label允许开发者为没有可见文本的元素定义可读的描述信息，供屏幕阅读器使用。 使用场景 图标按钮：为只有图标的按钮添加描述性标签。 装饰性元素：为装饰性但可交互的元素提供语义化说明。 复杂控件：为动态生成或没有内嵌文本的控件提供可读内容。 如何使用ARIA16？实现ARIA16非常简单，只需在相关元素上添加aria-label属性并提供适当的描述文本。 示例代码以下是一个使用aria-label的图标按钮示例： 123456<button aria-label=&q...
2022-08-24
introjs
爱情沉默的地方，责任就要起作用——歌德 introjs是一个前端指引库 官网：https://introjs.com/ github：https://github.com/usablica/intro.js 用法也很简单： 引入： 12npm install intro.js --saveyarn add intro.js 或者 12https://unpkg.com/intro.js/minified/intro.min.jshttps://unpkg.com/intro.js/minified/introjs.min.css 使用： 12345678introJs().setOptions({ steps: [{ intro: "Hello world!" }, { element: document.querySelector('#login'), intro: "Click here to login!" }]}).st...
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog