使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站，文中共列举了20种图片显示效果。
一、表单（Form） 源码文件： _form.scss mixins/_form.scss 1、按层次结构分：form-group -> form-control/input-group/form-static-control -> 各类标签 2、Form-group/form-control/input-group/form-static-control之类的容器，分为两种显示方式：block、inline-block。而实现input-group水平用的是table-cell。 .input-gr
图片同比例缩放是经常用到的，刚开始设置了什么max-width、object-fit都不行，最后才知道uni.app里自带的mode属性可以解决这个问题，真是方便了很多。 aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 widthFix：宽度不变，高度自动变化，保持原图宽高比不变
导航分析（nav)： 源码文件： _navs.scss：导航模块 Mixins/_nav-divider.scss：分隔线 Mixins/_nav-vertical-align.scss：垂直对齐 1、只是用css进行了样式修饰，对Js没有任何依赖 2、导航模块可以包含下拉模块 3、实现了水平、垂直、水平平均分配（table-cell实现，4.0移除）、tabs、胶囊等样式 4、Nav-divider：有一个像素的高度实现分隔线 5、Nav-stacked：垂直对齐实现 6、提供了tab-content类，
作为程序猿的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。
BEM（Block-Element-Modifier）是一种 CSS 模块化方法，旨在简化 CSS 编写并提高代码的可读性和可维护性，它将 HTML 元素划分为三个部分: 块（block）、元素（element） 和 修饰符（modifier）。
现代前端行业的发展，如果你在css的时候，还没有利用一些预编译工具，是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要，因为基础有boostrap，组件库有：easyui，elementui，iview，ionic等等。但我个人练习自己如何写好一个css框架，对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。 一、与美术交流获取得这些信息 1. 按钮状态：普通状态、鼠标悬停、选中状态、禁用状态 2. 按
本文主要面对前端初级新手，是我从事前端项目外包这一年多时间里积累的经验，提供一系列的工具和资料来帮助新手更高效的从事前端开发。但是由于本人水平有限，所以只能写一些初级的方法和工具。没有添加诸如 grunt 这类的更高级的工具，因为我对这块目前还没有很多实战经验。
快来免费体验ChatGpt plus版本的，我们出的钱 体验地址: https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home
开篇语 最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕，ipad等。下面就分享一些技巧,让你不依赖任何框架高效地搭建自己的项目。 一、样式按组件或板块分文件写再合成 ①设置各种变量 采用scss或者less来写css代码有很多好处。这里就不详细说。 我们拿到设计图的第一步，就是要分析各个页面之间有哪些模块、哪些样式、哪些颜色是一样的。一般情况下，为了各个页面的风格统一，各个页面上的主颜色应该都是一致的，而且好些页面都会用到一些相同的组件，
本文主要介绍了移动端重构实战系列0——sandal和sheral，包括它们的介绍、关系、功能、使用方式以及它们的UI组件库。同时，还探讨了如何合理控制UI组件库的冗余，以达到适应各种场景的目的。
我们拿到设计图的第一步，就是要分析各个页面之间有哪些模块、哪些样式、哪些颜色是一样的。一般情况下，为了各个页面的风格统一，各个页面上的主颜色应该都是一致的，而且好些页面都会用到一些相同的组件，例如slider。所以，我们首先可以定义一个常量文件，里面就专门存放颜色、高度、宽度等变量。定义一个公共样式文件，例如写一些各个页面都有可能用到的清楚浮动等样式。
”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公账号，其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 sandal是什么 简单来说，sandal是基于sass的一个移动端css的基础库，提供了一些基础的重置，常用的mixin，如flex布局，等分，水平垂直居中，常用图标等，基于它你可以非常方便快速地扩展出你需要的UI组件，其整体结构设计如下图： _funct
”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 sandal是什么 简单来说，sandal是基于sass的一个移动端css的基础库，提供了一些基础的重置，常用的mixin，如flex布局，等分，水平垂直居中，常用图标等，基于它你可以非常方便快速地扩展出你需要的UI组件，其整体结构设计如下图： _funct
”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“
随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程.
新建src\components\baseline\notification\index.ts
/@/utils/other.ts, main.ts中引入import other from ‘/@/utils/other’; 添加了ele前缀，防止图标冲突，el前缀已经被使用，可以使用el-xxx。但是不建议以el svg前缀,因为会与element plus内置组件冲突
上一节我们学习了，webpack如何打包样式文件以及如何自动添加前缀。本节我们继续学习如何打包@import引入的样式文件，css模块化以及如何打包字体文件。
原文：The State of CSS Reflections 译者：nzbin 友情提示：由于演示 demo 的兼容性，推荐火狐浏览。该文章篇幅较长，内容庞杂，有一定难度。而我本人学识有限，加之时间仓促，所翻译内容可能有不恰当及晦涩之处。欢迎大家拍砖指正。 我最近在 codePen 上看到了这个 加载程序，一个纯 CSS 制作的带有渐变反射的 3D 旋转竖条。它的制作方法是：为每个竖条创建一个元素，然后通过复制每一个元素来制作反射倒影，最后在反射倒影上添加渐变背景来制作渐隐的效果。听上去有点复杂，而且创建
注意点 - 可以使用相对路径 - 导入的文件可以.scss后缀名 - 可以引入线上的scss文件 - 支持括入引入的写法 - 在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如，_navbar.scss 不能与 navbar.scss 并存。 - 支持引入带下划线和不带下划线的文件;比如(navbar和_navbar) - 若是文件命名**带下划线**则不编译该文件,但却可以正常把样式导入其他文件用(如index.scss引入_navbar,只产生index.css) - 若是文件命名*不带下划线**,两者皆会编译,产生CSS文件((如index.scss引入navbar,会产生index.css和navbar.css`)) - 支持在CSS 规则 和 @media 规引入样式
零、前言 最近一直在总结Android，前端这块感觉忘得也差不多了 Flex布局以前也听过，但没有详细学习过，趁机会用React玩转一下， 遇到一个新的知识怎么学，一大堆的参数让人发懵，我最喜欢
众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。
从教女友写代码中学到的，教人写代码在一定程度上是硬件问题 本文由 伯乐在线 - 奇风余谷 翻译自 Shu Uesugi。译文链接见文末“阅读原文”。 从今年四月一直到七月，我在教我女友写代码。我最大的收获是认识到了教人写代码在一定程度上是个硬件问题。虽然 codecademy、可汗学院、Scratch和其他机构为了教学优化了代码编辑器，但代码编辑器总是卡在它们的软件外壳上。我建议，除了提供优秀的软件和教学材料之外，我们还需要给新手辅助以出色的硬件。让我来解释一下。 背景 我在卡内基梅隆学的计算机科学。在那里
下面我将写一系列的关于移动端的博文,如果每次都需要在博文前面引用这样一段reset.scss和mixin.scss,那将是一件相当恶心的事情,所以,我将这一段独立出来,发表一篇总的引用博文.以后的博文,只需要引用一个链接就可以了.算是当成一个@mixin,可以随时@include的一段博文片段吧.
打开 Visual Studio Code，File --> add Folder to Workspace，导入我们的项目。
我们利用useContext来实现这个小demo。在实现之前，复习一下相关比较重要的知识点。
这是webpack实战系列笔记的第4篇记录，简单描述一个思想：模块化思想——一切皆模块。本系列前几篇：
图片不显示这个问题在safari上会出现，不管是PC还是手机端，而其他浏览器是可以正常预览
1.transition 语法：transition: property duration timing-function delay; transition-property 设置过渡效果的css 属性名称 语法： transition-property: none | all | property none 没有属性会获得过度效果 all 所有属性都将获得过度效果。 property 定义应用过
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题 解决的问题 嵌套规则：通过花括号的方式解决复杂的css父子样式嵌套问题。 变量规则：通过变量将公告样式抽离，减少冗余css代码。 提交逻辑 ：可以像高级语言一样编写逻辑性的css代码
上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件
在上一篇教程[1]中，我们用熟悉的 React 和 Hooks 搞定了“奥特曼俱乐部”的雏形。在这一篇文章中，我们将用 Taro 自带的路由功能实现多页面跳转，并用 Taro UI 组件库升级之前略显简陋的界面。这一篇完成后的 DEMO 如下：
最近在搭建一个静态页面偏多的网站, 用vue或React有点大材小用,使用纯html / css / js 又不好用, 于是就用npm手动搭建一个简单的本地开发环境, 本地环境要实现几个基本功能
css 样式重置实质上就是对不同浏览器的样式使用一个统一的标准，他的目的在于减少 css 的样式代码。css reset 也有比较常见的“库”，比如，normalize.css 或者是 meyerweb.css。在早期的一些简单的项目开发，css reset 直接可以了引用这样的文件，因为这是一些比较标准的写法。
有想了解@vitejs/app指令的小伙伴可以看一下这篇文章npm init @vitejs/app 到底干了什么
一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题，但是主题定制需求永远都存在，所以组件库一般都会允许使用者自定义主题，我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的，新体系下还做到了动态换肤，因为皮肤本质上是一种静态资源（CSS文件和字体文件），所以只需要约定一种方式来每次动态请求加载不同的文件就可以了，为了方便这一需求，还配套开发了一个Vessel脚手架的插件，只需要以配置文件的方式列出你需要修改的变量和值，一个命令就可以帮你生成对应的皮肤。
摘要总结：本文主要介绍了如何通过Vue Router为Vue.js项目添加路由功能，包括路由的基本设置、动态路由以及路由的嵌套路由。首先介绍了如何初始化项目并安装Vue Router，然后讲解了如何设置路由以及处理路由匹配。最后通过一个简单的实例，展示了如何通过Vue Router实现路由功能。
使用el-table显示数据时，有一个字段的数据太长，使表格样式很乱，然后，给列加了个固定宽度，之后行的高度又变得很高，也不好看。
Jekyll是一个用Ruby编写的静态站点生成器，支持博客并与Github页面整合。因为Github只负责托管，这种设置使数据分析共享和可视化变得简单。Jekyll提供了各种主题和插件，因此用户无需担心Web开发。
scss的安装、全局设置及一些常规用法 css变量的一些用法 element-plus自定义主题的两种实现方法 暗黑模式的视线
上午发了一下less版的reset。但是现在领导要求全部转scss了。于是我尝试自己转换一下。 但是过程中出错频繁。非常让我头疼。 在less中，可以混入任何class。但是在scss中，需要用@mixin 申明 和 @include 调入。 当然，这样是有优点的，就是在less中，可能会把不需要的混入css给编译出来（在这个样式没有使用变量的情况下，因为他无法分辨这是普通样式还是混入样式。），而scss就没有这个问题了。只是书写有点略微复杂。主要是我记不住include这个单词，mixin倒是记住了，迷信嘛~ 本来以为很顺畅的就能转换了，毕竟这是一段非常简短的代码。但结果出错了，我还查找了半天。结果发现问题出现在我把@mixin写在了最后。而把它写到前面去就好了。
使用go开发就是现在很多企业以及个人用户的选择，那么使用合适的框架就显得尤为重要，今天我们就研究使用gin-vue-admin后台管理，看看怎么样。
在进行vue项目时，我们需要对编译器进一步配置来支持vue文件以及相关模板语法的高亮显示等。本文列出关于webstorm和vscode两种常用编译器的模板语法配置。
mpvue 跟 wepy 真的很难抉择，我目前没有兼容多平台的需求，所以直觉告诉我还是用 wepy 吧~
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
最近在做项目的时候，看到有两个功能一样，但是交互，样式不一样的需求，为了图方便维护，就封装了组件，发现一个看似简单的组件，如果要封装得通用些，要考虑的东西其实也不少。
@import Sass 支持所有css 的@规则，以及一些Sass 专属的规则，也被称为“指令（directive）”.这些规则在Sass 中具有不同的 功效，详细解释如下。 @import Sass 扩展了CSS 的@import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一 的 CSS 文件。 另外，被导入的文件中所定义的变量或
领取专属 10元无门槛券
手把手带您无忧上云
