-
CSS伪类中的content
在伪类中的content属性可能的值attr(X) 将 X 属性值以字符串形式返回。如果没有则返回一个空字符串 string 文本内容 open-quote 左引号 close-quote 右引号 no-open-quote no-close-quote 不会生产任何内容，但是会改变（增加或降低）引号层级。 url 指定一个外部资源（比如图片） initial 它将属性设置为其默认值 inherit 继承自其父元素 none 不设置伪元素::before或::after的...
2023-12-06 -
ES6的代理对象Proxy
Proxy用于修改某些对象操作的默认行为，可以理解成在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，可以对外界的访问进行过滤和改写Proxy(target,handlers)：创建代理对象target 要拦截的目标对象 handlers 处理器对象，用来定制拦截行为Proxy支持的拦截操作一共13种以下函数中propKey为键名，receiver为代理对象本身，可以省略该参数get(target, propKey, receiver)：拦截对象属性的读取set(target, propKey, value, receiver)：拦截对象属性的设置，返回一...
2023-09-16 -
tailwindcss介绍及安装
在前端开发中，我们经常用到现成的ui框架，如Bootstrap，如果要创建一个按钮，只需要将class设置为btn即可，极大的提高了我们的开发效率但是这也限制了定制化，使用这些框架的前端界面相似度极高另外就是从css代码来讲，由于定义的类中属性较多，颗粒度较大，如在btn类中设置了圆角，同时也在其他类中设置圆角，那么这些设置圆角的代码就是重复代码，如果把设置圆角的代码独立出来定义一个类名，就可以降低css代码量，提高代码的重用Taiwind CSS就是这样一款开源的 CSS 样式库，它将开发过程中会用到的几乎全部的css样式以一种极小的颗粒度定义成一套固定的css类名称，由于颗粒度极小，...
2023-09-13 -
svelte中的动画
动画是交互设计中重要的视觉元素，页面如果缺少了动画，会显得俨乎其然而变得生硬无趣，少了许多生机页面上的动画并非越是花俏夺目就越好，主要都是一些偏线性的过渡效果，在操作与操作之间缓和过渡，避免生硬svelte为我们内置了常见动画的简单实现运动（motion）：元素的某个属性不同值的补间 过渡（transition）：元素离开和进入运动效果运动效果由svelte/motion模块支持，该模块导出两个函数tweened和spring这两个函数都是创建一个writable（可写）的store其中tweened函数主要用于补间动画，spring主要用于弹性动画tweened补间动画import {...
2023-09-13 -
svelte中的状态管理
props可以由父组件传递给子组件，但是一个应用程序是由很多组件通过复杂的组合而成的，并不单单仅存在父子关系的组件两个非父子组件之间想要传递数据时，就需要用到svelte内置的状态管理store，类似于vue中的Vuex当期望脱离组件的层级（父-子）关系且能够在任意位置都能访问某个状态（变量）时，状态管理是非常有用的状态分为可写状态(writable)和只读状态(readable)两种类型，需要从"svelte/store"中引入已经为我们创建好的工厂函数一般我们会将创建的状态数据单独放置于一个js文件中，以便所有需要此数据的组件引用可写状态(writable)创建可写状态：writab...
2023-09-03