还记得对象Object吗? let obj = { a: 1 } 对象的格式: Object { key: value } 在ES5的时代,对象的key只能是字符串String类型。有人就想搞事,把key改成其他数据类型…
分类:css3
CSS Grid:页面网格布局从未如此简单
页面布局从来就不是一件让人省心的事! 如果pc端的两列布局、表格布局、圣杯布局等已经让你心力交瘁!那么移动端更加五花八门的布局肯定也是让你吃尽苦头!table不知道你用过没?bootstrap用过没?antd用过没? 这…
「干货」CSS 不定宽高的垂直水平居中(最全 9 种)
前言 垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还…
小于12px字体的实现
采用缩放方案,被缩放的标签仍然会占据缩放前的空间,垂直方向可以通过设置 line-height: 1;去掉本来空间,再调整上下边距,而横向可以通过调整margin为负值或其它办法去解决。 示例代码 .font-siz…
css按钮交互效果
最近在网上闲逛时,发现了http://www.nows.fun/ 这个毒鸡汤,内容有趣,按钮交互做的也很棒,简约而不简单。于是就把按钮交互的效果拿来学习一下。总体上来说,是利用了:active和box-shadow两个特…
小而美的颜色选择器:xy-color-picker
html5表单元素input新增了一个color类型,也就是颜色选择器。 <input type="color"> 该选择器在windows上的默认效果如下: 可以说非常难看并且难用了。 为了解决这个问题,x…
你可能不知道的css骚操作 — 表单验证🤦♂️
效果图 原理 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证..);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元…
uni-app项目瀑布流布局
github地址,喜欢的可以star下哦 插件预览图 使用教程 1.插件代码拷贝 下载后把components目录下waterfall.vue文件拷贝到自己项目目录下 2.插件全局配置 在项目里main.js中配置如下代…
前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
过往项目 2018 年 9 月份项目汇总(共 26 个项目) 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(共 27 个项目) 2…
【Hello CSS】第四章-HTML的标签与语意
作者:陈大鱼头 github: KRISACHAN 上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。 我们在序章的开头就简单的讲解了HTM…
CSS3主要内容
CSS3主要内容 一、CSS选择器 CSS3选择器规范地址: https://www.w3.org/TR/2011/RE… CSS3最新选择器规范: https://www.w3.org/TR/sele…
前端每日实战 169# 视频演示如何制作“数略词”交互动画(内含2个视频)
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/byvRxB 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中…