TailwindCss
发表于|更新于
|浏览量:
懒惰象生锈一样，比操劳更能消耗身体；经常用的钥匙，总是亮闪闪的。——富兰克林
分享一个CSS框架，内置了很多css样式：
使用方式：
https://www.tailwindcss.cn/docs/installation
注意其不支持IE浏览器
仓库地址：https://github.com/tailwindlabs/tailwindcss
甚至你可以直接在Playground中进行尝试：
相关推荐
2022-07-17
vue3中css里的v-bind
一旦别人问起自己想要什么，那一刹那反倒什么都不想要了。——太宰治 官方文档：状态驱动的动态 CSS 编写一个组件： 123456789101112131415161718192021222324252627<template> <div class="ruben"> <p>You clicked {{ count }} times</p> <button @click="increment">Click me</button> </div></template><script>export default { data() { return { count: 1 } }, methods: { increment...
2022-01-13
for of和for in
人生而自由，却无往不在枷锁中——卢梭《社会契约论》 我之前写过一篇for in的博客 for in是遍历对象key或者数组下标 前端还可以使用for of来遍历value 简单写一下两者区别和使用方式吧： 12let ruben = {name:'ruben', age:21}for(key in ruben) console.log(key) 然后是for of 提示对象并不是iterable(可迭代的) 因此for of并不能遍历对象的key 接下来看数组的： 12let list = [1,2,3,4,5,6]for(i in list) console.log(i) 可以看到是遍历获取出了下标并不是实际的值 而for of： 12let list = [1,2,3,4,5,6]for(i of list) console.log(i) 遍历出了我们的value
2024-11-21
渐变的艺术：变量的力量——阿超与ChatGPT 4o的代码探险
人类之所以有进步，主要原因是下一代不怎么听上一代的话。——倪匡 效果在右下角，请滚动页面查看～ .scroll-text { position: fixed; bottom: 10%; right: 10%; background: linear-gradient(180deg,var(--color-light) 0%,var(--color-light) 40%,var(--color-dark) 60%,var(--color-dark) 100%); background-size: 100% 200%; background-position: center calc(var(--scroll) * 100%); background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent;...
2026-02-14
chrome-devtools-mcp
你热爱生命吗?那幺别浪费时间，因为时间是组成生命的材料——富兰克林 让你的 AI 助手真正“看见”浏览器：Chrome DevTools MCP 深度介绍与上手指南如果你正在用 Gemini、Claude、Cursor 或 Copilot 这样的编码助手进行自动化、调试或性能分析，你很快就会遇到一个难题：如何让 AI 真正地“连接”到一个真实的 Chrome 浏览器，稳定地执行操作、读取页面状态，并且跑出可信的性能结果？ 来自 ChromeDevTools/chrome-devtools-mcp 的 Chrome DevTools MCP（Model Context Protocol）服务器，正是为此而生。它以 MCP 服务器的形式，向你的 AI 编码助手暴露 Chrome DevTools 的能力：自动化操作、网络与控制台调试、截图与快照、性能追踪与洞察……并且由 Puppeteer 提供可等待、可重试的可靠自动化基底。 仓库简介（Description）：Chrome DevTools for coding agents主语言：TypeScript许可协议：Ap...
2025-01-24
css循环淡入淡出播放
令她反感的，远不是世界的丑陋，而是这个世界所戴的漂亮面具。——《不能承受的生命之轻》 代码如下： 12345678910111213141516171819202122232425262728293031323334353637383940import React from "react";import clsx from "clsx";import styles from './index.module.css';import Layout from "@theme/Layout";function HomepageHeader() { return ( <header className={clsx('hero', styles.heroBanner)}> <div className={clsx(styles.heroContainer)}> <img clas...
2020-12-16
禁止文字图片拖拽
智者千虑，必有一失；愚者千虑，必有一得。——《史记》 我们在进行开发的时候可能会遇到一个问题文字、图片选中后能被拖拽 但我们不想要这种效果 就可以给标签加一个属性 12<div ondragstart="return false">ruben</div><img ondragstart="return false" width="500px" src="https://VampireAchao.github.io/imgs/preview/3459_3.jpg"/> 之后就拽不动啦~
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog