- 博客(39)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 Tailwind FAB
FAB全称Floating Action Button浮动的动作按钮FAB尺寸样式属性smallw-10 h-10-mediumw-12 h-12-largew-16 h-16-禁用效果样式属性cursor-not-allowed-opacity-50-<link href="https...
2020-05-31 03:16:11
194
原创 Tailwind Typography
排版样式Typography标题（heading）标题<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5...
2020-05-31 02:50:10
423
原创 Tailwind Label
label标签可插入到任何位置，也可结束按钮一起使用。默认标签采用圆角，可设置圆角尺寸。基础样式<span class="inline-block mr-1 last:mr-0 py-1 px-2 rounded bg-gray-200 text-xs font-semibold text-gray-600 uppercase"> label</span&...
2020-05-30 20:48:55
151
原创 Tailwind Input
基础输入框无边框无边框输入框主要使用了shadow阴影，适合在有底色的环境中使用。无边框<input type="text" class="relative outline-none rounded px-2 py-1 w-full bg-white shadow text-sm text-gray-700 placeholder-gray-400 focus:outli...
2020-05-30 20:17:50
801
原创 Tailwind Image
image type常用图片的效果依靠是圆角和阴影属性，可以产生很多不同的效果，比如圆形图片更多是用于社交人物头像展示。类型描述圆角图片rounded shadow圆形图片rounded-full shadow圆角凸起rounded shadow-lg圆形凸起rounded-full shadow-lg普通效果（simple im...
2020-05-30 17:14:29
517
原创 Tailwind Link Button
链接按钮即将按钮转化为链接的表现形式link button链接按钮基础形式<button class="outline-none mr-1 mb-1 px-3 py-1 bg-transprent text-xs font-bold text-blue-500 uppercase focus:outline-none"> link button</butt...
2020-05-30 16:23:14
209
原创 Tailwind Outline Button
默认样式和字体图标资源<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="sty...
2020-05-30 15:37:15
294
原创 Tailwind Filled Button
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">...
2020-05-30 13:24:09
286
原创 Tailwind Alert
alert基本结构alert组件容器父级容器：采用相对定义因为内部按钮需要使用绝对定位alert组件内部分为三部分，依次是图标按钮：行内元素垂直居中文本内容：行内元素垂直居中关闭按钮：右上绝对定位<div class="relative px-6 py-4 border-0 rounded mb-4 bg-red-500 text-white"> ...
2020-05-30 11:16:26
304
原创 Tailwind Login
largemediumsmall<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/c...
2020-05-29 19:23:32
550
原创 CSS Overflow
CSS的overflow属性定义了当内容溢出元素框时发生的事情，即定义溢出元素内容区content-box中的内容如何处理。如果值为scroll则不论是否需要用户代理都会提供一种滚动机制，此时即使元素框内可以放下所有的内容也会出现滚动条。overflow属性工作在指定高度的块级元素上overflow属性除在body和textarea元素上默认值为auto外，其它元素均为visible。...
2020-05-29 03:11:58
196
原创 Tailwind Card
card<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"><div class="bg-gray-200 mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"> <di...
2020-05-29 03:11:50
282
原创 CSS Table
表格布局有两种使用方式，一种是使用HTML提供的table标签，一种是使用CSS提供的display:table属性。CSS提供的display:table属性主要为表设置表格布局算法，CSS Table实际上是使用CSS属性模仿HTML Table的布局模型。HTML Table是包含语义化的标签，它描述了什么是数据，因此最好是用于标记那些需要制表的数据，比如财务信息表。如果数据能够以电子表格...
2020-05-29 02:43:26
535
原创 CSS Replaced Object
可替换元素（Replaced Object）CSS中的可替换元素指的是其内容不受到CSS视觉格式化模型控制的元素，比如image元素、iframe嵌入式文档、applet等。典型的如空白的html可能没有固定的尺寸。可替换元素的展现效果不是由CSS来控制的，这些元素是一种外部对象，它们外观的渲染是独立于CSS的。例如img元素的内容会被src属性指定的图像替换掉，而替换元素通常具有固定的尺寸。...
2020-05-28 21:04:29
238
原创 CSS Float
浮动设计的初衷并不是用来布局的，而仅仅是为了实现图片文字环绕效果，即图片做浮动，文字环绕图片。简单来说就是块级元素无视float元素，让行内元素如流水一样围绕着float元素以实现浮动布局。CSS标准文档流在正常情况下，默认布局是页面从左向右、从上向下、遇块换行的方式。float属性可以打破标准文档流默认的布局从而实现特殊的布局。浮动会让块级元素脱离文档流，漂浮在文档流之上，紧贴着父元素的左右边...
2020-05-28 15:32:24
202
原创 CSS flow-root
CSS属性flow-root是CSS Display Module Level3中的一个属性，了解flow-root显示属性前需掌握BFC概念，掌握BFC前又需要先理解Box和Formatting Context的概念。盒子（Box）所有的HTML元素都可以看作是盒子，在CSS中Box Model盒子模型用来设计和布局。盒子模型本质上是一个盒子并封装了周围的HTML元素，盒子由内到外依次包括内...
2020-05-28 03:30:39
1338
原创 Egg Error
关键词：热更 自动重启 实时生效更新失效若使用WebStorm等JetBrain系列的IDE，则需在【设置】>【系统设置】中关闭“Use "safe write"”选项。使用WebStorm IDE打开文件显示“ESLint: TypeError: this.cliEngine is not a constructor”Egg.js 本地开始时，如何在修改代码后自动刷新浏览器，应...
2020-05-27 13:27:32
1182
原创 CSS Tailwind
一般的UI中CSS框架都是内建各种预设的组件，比如按钮、卡片、警告框等，当需要通过定制化设计时，组件的高度耦合性则带来很大的弊端。Tailwind并不提供预先设计好的内建组件，而是提供了更为基础的工具类（utility classes），可直接在HTML源码上构建完全定制化的设计。Tailwind顺风是一个CSS框架的工具集，Tailwind的理念是抽取共用体（Utilities First）...
2020-05-27 00:14:48
1333
原创 CSS3 Column
CSS3中Column用于设置多列布局（multi-column），也就是分栏的效果，主要用于竖列排版，它是传统HTML页面中块级布局模式的扩展，典型案例如报纸中新闻排版的效果。多列布局属性关键词：列数、列宽、间隔、边框、跨列、高度、断行属性描述columns复合属性，设置最大列数和单列最小宽度。column-count设置最大列数column-width...
2020-05-27 00:14:26
431
原创 SVG
什么是SVG呢？SVG（Scalable Vector Graphics）是一种可伸缩矢量图形SVG基于可扩展标记语言XMLSVG是用于描述二维矢量图形的图形格式SVG是由W3C制定的一个开放标准SVG提供涵盖嵌套转换、裁剪路径、Alpha通道、滤镜效果等功能，还就具备传统图像没有的矢量功能，在任何高清设备上都很高清。由于SVG采用XML语法，图形中的文本内容可直接被浏览器访问，有利...
2020-05-27 00:14:12
120
原创 MySQL SQL
复制表INSERT INTO SELECT语句使用从源表（source_table）复制数据并插入到已存在的目标表（target_table）中目标表必须存在，MySQL不会自动创建。完整复制整表INSERT INTO target_table SELECT * FROM source_table;指定字段复制INSERT INTO target_table(field1, fi...
2020-05-26 20:37:30
194
原创 Egg Cors
Egg.js跨域访问需使用egg-cors插件，典型的应用场景是前后端分离的项目中，前端与后台在不同的域下，此时若前端通过AJAX访问后端接口，此时就首先解决跨域问题。安装egg-cors插件$ npm i -S egg-cors开启egg-cors插件$ vim config/plugin.jsmodule.exports = { cors:{enable:true, pack...
2020-05-26 09:21:11
531
原创 ByteDance MicroApp Login
对比微信小程序登录流程微信小程序登录流程字节跳动小程序登录登录流程客户端客户端使用tt.login()方法获取登录临时凭证code值，code值有效期3分钟。客户端获取code之后需通过调用服务端接口来向小程序后端发起登录凭证校验以获取用户信息。tt.login({force:boolean, success:function, fail:function, c...
2020-05-23 21:57:18
1117
原创 Egg CURL
为解决Web应用调用后端基于HTTP通信协议的服务，Egg框架基于Node.js的URL处理模块urllib内置实现了一个HttpClient（HTTP服务的客户端），以实现Web应用便捷地完成HTTP请求的调用。urlliburllib提供了一系列用于操作HTTP URL的功能，比如数字身份认证、重定向、Cookie、网络超时等。$ npm i -S urllibHttpClient...
2020-05-23 21:53:22
2169
原创 Egg egg-bin
本地开发调试Egg应用程序时需使用egg-bin模块egg-bin是一个为便捷开发者在本地开发、调试、测试Egg应用程序的命令行开发工具，它集成了本地调试、单元测试、代码覆盖率等功能。egg-bin是基于common-bin开发的，common-bin是一个封装的CLI开发工具（抽象命令工具），封装了诸如co、yargs模块并提供对async/generator特性的支持，内置helper、s...
2020-05-23 14:54:09
1570
1
原创 Egg Config
配置管理常见方案平台管理配置 启动时指定应用构建时将当前环境配置放入包中，启动时指定配置。此种方案缺点在于无法一次构建多次部署，另外本地开发环境使用配置麻烦。平台管理配置 环境变量传入应用启动时将当前环境配置通过环境变量传入，虽然比较优雅，但缺点是框架对运维要求较高，需部署平台支持，同时开发环境也有痛点。代码管理配置 配置即代码代码中添加多个环境配置，应用启动时传入当前环境参数。缺点...
2020-05-22 16:39:30
2289
原创 Egg
项目初始化使用GIT创建项目，本地克隆项目并进入。$ git clone http://xxxx.com/api$ cd api使用脚手架快速初始化，使用npm init egg快速选择适合对应业务模型的脚手架。$ npm init egg -type=simple若GIT项目中已存在README.md文件则会出现说明，可以先删掉。$ npm i启动项目$ npm star...
2020-05-22 15:52:21
123
原创 CSS Grid Game
网格布局可使用智能回流元素（Intelligently Reflow Elements），比如典型游戏界面五大区块：标题、统计、主面板、得分、控制区。区域描述title标题区，标题区和主面板对齐。stats统计区，统计区显示在标题区之下。score得分区，得分区和统计区在列方向对齐。board主面板区，主面板在统计区和标题区右侧。ctrls控制...
2020-05-21 22:59:55
255
原创 CSS Grid Brick
Brick网格分析：4x5栅格，12个区块区块分布<div class="layout"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div cla...
2020-05-20 22:35:30
107
原创 CSS Grid Brickwall
Brickwall砖墙布局典型的案例是照片墙，砖墙布局过去往往会使用绝对定位来实现，但这样做难以维护且每个块的位置都会影响到另一个，最为致命的是无法自适应宽度。照片墙使用Grid网格布局实现Brickwall砖墙布局砖墙布局<style>.brickwall { display: grid; grid-template-columns:...
2020-05-20 21:58:20
139
原创 CSS Grid Slack
Slack是聊天群组 + 工具集成 + 文件整合 + 统一搜索的工具和服务，将各种碎片化的企业沟通和协作集中到一起。典型的Slack的布局形式Slack布局使用Grid栅格来构建布局Grid栅格区块列行尺寸teamLine1~Line2Line1~Line4100px x 100vhchannelLine2~Line3Line...
2020-05-20 21:57:59
145
原创 CSS Grid Auto
关键词：隐式轨道 / 隐式网格 / 自动布局算法隐式网格隐式网格是指当网格项目确认在显式网格之外时所创建的网格，简单来说，当没有足够空间或显式网格轨道来分配网格项目时，此时剩下网格会自动创建隐式网格。当设置网格容器的网格模板grid-template属性并指定固定数量轨道时创建出来的就是典型的显式网格，而在实际的HTML中存在网格项目多余既定数量，此时这些多余的网格是之前未声明定义的，因此网...
2020-05-20 17:18:33
287
原创 CSS Grid Calendar
calendar<div class="calendar"> <header><h1>2020年05月</h1></header> <ul class="week"> <li><abbr title="星期一">一</abbr></li> &...
2020-05-20 02:30:27
283
原创 CSS Grid Card
骨架结构<style>body{display:flex; flex-direction:row; justify-content:center; align-items:center;}.wrapper{width:90%; max-width:1240px; margin:0 auto; background-color:#eee;}.grid-container{disp...
2020-05-19 22:00:22
419
原创 CSS Grid Masonry
瀑布流布局（Masonry Layouts）最早出现在Pinterest网站所采用的布局，所以又称为Pinterest布局。瀑布流布局的核心是基于一个网格的布局，每行包含项目列表的高度是随机的，会随着项目内容动态大小高度自适应。同时每个项目列表呈堆栈形式排列。其中最为关键之处在于，堆栈彼此之间没有多余的间距差存在。典型的瀑布流布局使用Grid网格布局实现自适应瀑布流布局的关键点在...
2020-05-19 03:33:11
566
原创 WebP
WebP是由Google谷歌开发的一种加快图片加载速度的图片格式，可节省大量服务器宽带资源和数据空间，在压缩比率上比JPEG格式更为优越，同时提供了有损压缩和无损压缩。在质量相同情况下，WebP格式图片的体积要比JPEG小40%WebPWebP图片格式浏览器支持情况浏览器支持情况浏览器判断是否支持WebP格式图片判断请求头的Accept字段中是否包含image/...
2020-05-19 01:20:47
309
原创 CSS Grid Anmation
使用CSS3的Grid网格布局实现Loading加载页的动画效果，制作的思路是使用Grid网格布局制作3x3的九宫格，旋转后形成菱形，在添加动画效果。Loading绘制九宫格<style>/*wrapper*/.wrapper{margin:0; height:100vh; background-color:#000;}.flex-container{displ...
2020-05-19 01:07:48
152
原创 CSS box-sizing
CSS框属性的基本规范中指出：文档的每个元素都被构造成文档布局内的一个矩形框，矩形框的每一层的大小都可以使用特定CSS属性进行调制。盒模型块元素的盒子模型结构content表示内容框是盒子中内容显示的区域，width和height属性用与设置内容框的宽度和高度。padding表示CSS框的内边框，位于内容框外边缘与边界的内边缘之间border表示CSS框的边界，它是一...
2020-05-18 15:51:41
155
原创 CSS Grid
flex布局：基于轴线的 一维布局grid布局：基于网格的布局网格结构容器：grid网格布局的节点区域网格线：用来分隔容器的线，可分为水平网格线和垂直网格线，将网格切分为行和列。行：水平分割线分割成行，n行需要n+1条水平分割线。列：垂直分割线将容器分隔成列，n列需n+1条垂直分割线。单元格：行和列交叉形成单元格项目：容器内部不采用网格定位的子元素，只能是顶级元素。...
2020-05-12 17:17:10
149
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人