Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

React Array - 列表数据

2019-08-27 描述使用一个原始数组中的数据渲染出一个列表元素。使用 isOrdered 属性值来判断渲染的是 <ol> 列表,还是 <ul> 列表使用 Array.prototype.map 渲染 data 中的每一项作为一个 <li> 元素,根据每一项的索引和值生成一个 keyisOrdered 属性的默认值为 false,使用 <ul> 列表进行渲染实现 functionDataList({isOrdered,data}){

每天 30 秒系列之 React

精选有用的 React 片段,帮助你获取最佳实践 Array 列表数据表格数据表格数据映射 Hook 使用内部点击使用外部点击使用 fetch 请求使用间隔使用浏览器端识别使用延迟 Inputinput 传值给父组件限制 textarea 输入的长度单词个数限制多选列表向父组件传值显示密码框内容下拉列表向父组建传值滑动元素向父组件传值文本输入框向父组件传值输入框向父组件直接传值 Visual 手风琴 advanced 提示组件文本

CSS 其他 - 自定义变量

2019-08-26 描述 CSS 变量包含在整个文档中可重复使用的特定值。HTML<pclass="custom-variables">CSSisawesome!</p>CSS:root{/*Placevariableswithinheretousethevariablesglobally.*/}.custom-variables{--some-color:#da7800;--some-keyword:

CSS 其他 - 计数器

2019-08-23 描述计数器本质上是由 CSS 维护的变量,他的值可以通过 CSS 跟踪元素被使用的次数规则来进行递增。HTML<ul><li>Listitem</li><li>Listitem</li><li>Listitem<ul><li>Listitem</li><li>Listitem</li><li>Listitem</li></ul></li></ul>CSSul{counter-reset:

CSS 其他 - Cacl()

2019-08-22 描述 calc()函数允许使用数学表达式来定义 CSS 值,采用数学表达式的结果作为属性值。HTML<divclass="box-example"></div>CSS.box-example{height:280px;background:#222url('https://image.ibb.co/fUL9nS/wolf.png')no-repeat;background-positi

CSS 交互 - 可切换的开关

2019-08-21 描述使用纯 CSS 构建一个可切换的开关。HTML<inputtype="checkbox"id="toggle"class="offscreen"/><labelfor="toggle"class="switch"></label>CSS.switch{position:relative;display:inline-block;width:40px;height:20px;bac

CSS 交互 - 相邻兄弟视觉弱化

2019-08-20 描述鼠标移上时,对相邻的兄弟元素进行视觉上的弱化。HTML<divclass="sibling-fade"><span>Item1</span><span>Item2</span><span>Item3</span><span>Item4</span><span>Item5</span><span>Item6</span></div>CSSspan{padding:01rem;t

CSS 交互 - 跟踪光标的渐变效果

2019-08-16 描述一个渐变跟随着光标移动的效果。HTML<buttonclass="mouse-cursor-gradient-tracking"><span>Hoverme</span></button>CSS.mouse-cursor-gradient-tracking{position:relative;background:#7983ff;padding:0.5rem1rem;font

CSS 交互 - 选不中我

2019-08-14 描述让内容无法被选中。HTML<p>Youcanselectme.</p><pclass="unselectable">Youcan'tselectme!</p>CSS.unselectable{user-select:none;}DemoSeethePen<ahref='https://codepen.io/vanessa219/pen/KKPVJVZ/'>Disablesel

CSS 动画 - 下划线动画

2019-08-13 描述当光标在文本上移动时,为其创建一个可以移动的下划线效果。HTML<pclass="hover-underline-animation">Hoverthistexttoseetheeffect!</p>CSS.hover-underline-animation{display:inline-block;position:relative;color:#0087ca;}.hove

CSS 动画 - 阴影盒子的动画效果

2019-08-12 描述当鼠标移上时,在文本周围创建一个带阴影盒子的效果。HTML<pclass="hover-shadow-box-animation">Boxit!</p>CSS.hover-shadow-box-animation{display:inline-block;vertical-align:middle;transform:perspective(1px)translateZ(0)

CSS 动画 - 高度变化时的过渡效果

2019-08-09 描述在一个元素高度不确定的情况下,为其做一个高度从 0 到 auto 的过渡效果。HTML<divclass="trigger">Hovermetoseeaheighttransition.<divclass="el">content</div></div>CSS.el{transition:max-height0.5s;overflow:hidden;max-height:0;}.tr

CSS 动画 - 简单的变量

2019-08-08 描述为 transition-timing-function 属性构建比 ease,ease-in,ease-out 和 ease-in-out 更强大的可再次使用的变量。HTML<divclass="easing-variables">Hover</div>CSS:root{/*Placevariablesinheretouseglobally*/}.easing-variables{--

CSS 动画 - 🍩式的旋转

2019-08-07 描述创建一个🍩式的旋转,以其用于表示内容正在加载中。HTML<divclass="donut"></div>CSS@keyframesdonut-spin{0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}.donut{display:inline-block;border:4pxsolidrgba(0,0,0,

CSS 动画 - 按钮边框动画

2019-08-06 描述当鼠标移上时,创建一个边框的动画。HTML<divclass="button-border"><buttonclass="button">Submit</button></div>CSS.button{background-color:#c47135;border:none;color:#ffffff;outline:none;padding:12px40px10px;pos

CSS 视觉 - 斑马条纹列表

2019-08-05 描述创建一个背景色交替的条纹列表,这对于区分使用行来展示内容的兄弟节点很有用。HTML<ul><li>Item01</li><li>Item02</li><li>Item03</li><li>Item04</li><li>Item05</li></ul>CSSli:nth-child(odd){background-color:#eee;}DemoSeethePen<ahref=

CSS 视觉 - 三角形

2019-08-04 描述使用纯 CSS 创建一个三角形。HTML<divclass="triangle"></div>CSS.triangle{width:0;height:0;border-top:20pxsolid#333;border-left:20pxsolidtransparent;border-right:20pxsolidtransparent;}DemoSeethePen<ahref='

CSS 视觉 - 系统字体栈

2019-08-03 描述使用操作系统自带的原生字体,让其有更接近原生应用的感觉。HTML<pclass="system-font-stack">Thistextusesthesystemfont.</p>CSS.system-font-stack{font-family:-apple-system,BlinkMacSystemFont,'SegoeUI',Roboto,Oxygen-Sans,Ubu