2023
相信大家比较心细的可以发现，我上一篇文章的背景与设计出具的是不同的，设计要求切换时背景图片要和文章展示的图片是一致的，那我们怎么实现呢，请看一下swiper的介绍。 实现思路无非两种监听点击切换和滑动切换，当这两种动作被触发时，改变背景图片。 而另一种就是本片所示的方法，我们直接监听索引值变化本身，方法如下图。在swiper的方法中有这样一个方法，slidechane，当索引改变就会触...
今天,设计师给了这样一张图，要求点击上边的白字实现切换，本身是很简单的一个东西，刚开始我想的是sildetoloop方法来实现跳转，具体思路如下： 点击上边的五个div的时候，取到所属的index，然后根据index来跳转所对应的siwper的第几个，跳转很成功，但是发现了以一个小问题，当使用如上跳转方法时会导致tool循环失效如下图所示。这个问题没有解决陷入了困难。 这边猜测可能是因...
设计出了一个这样的需求，需要有一个数字拥有正常的颜色，但当鼠标放上去的时候要变成渐变色，大家都知道，css是没有颜色渐变这个属性的，只有背景颜色的渐变，这里有两种实现方法。 1.让设计把字给你抠出来 这里扣图片对于浏览器的兼容性非常好，会兼容基本上所有浏览器，图片可以任意大小，但要求底色与div盒子中底色一致，这样视觉上不会有问题，而我们可以直接改变图片所属div的背景颜色，就能实现通...
大家看如上图片是设计稿的需求，乍一看是没毛病的，但是，你仔细看 是的，切换按钮是游离在整体宽度之外的，由于我懒，所以这里使用了一个layBody来框柱内容的宽度，然后大家看一下swiper的切换。 是的，swiper的切换按钮是在swiper内部的，这里swiper使用了绝对定位来使切换按钮位于两侧，于是我们可以修改一下left和right。 结果发生了这样...
上一章已经简单介绍了一下常用的css预处理器Less。本章我们着重讲解一下变量有关知识。变量命名规范：1.必须有 @ 为前缀2.不能包含特殊字符3.不能以数字开头4.大小写敏感变量的基本使用如图所示：除此之外，变量还可以作为插值使用，变量可以用于选择器名、属性名、URL、@import语句。再来介绍一下变量的延迟加载特性：当一个变量被声明多次，会取最后一次的值，并从当前作用域往外寻找变量。如以下语...
在学习less之前，我们需要对css有简单的了解，CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。CSS 需要书写大量看似没有逻辑的代码，冗余度是比较高的。不方便维护及扩展，不利于复用。也没有很好的计算能力。而Less是一门向后兼容的 CSS 扩展语言，也称为 CSS 预处理器。在 CSS 的语法基础上，引入了变量，Mixin，运算以及函数等功能，简化了 CSS 的编写，并...
如果你在扫描网站的安全性时发现 "X-XSS-Protection" ,"Content-Security-Policy","X-Content-Type-Options"头缺失或不安全，那么这可能是一个安全风险,攻击者可能会利用 XSS 漏洞来注入恶意代码，如果用户访问了被攻击的页面，恶意代码可能会在用户的浏览器上执行。"X-XSS-Protection"、"Content-Security-P...
1. 如何使你的文本变暗，以提高可读性 当涉及到长篇内容时，你可能会倾向于使用灰色的中间色调，这可能是好的，直到你开始使用较轻的字体重量，在各种尺寸的屏幕上影响可读性。 不要让视力下降的用户伸手去按后退键，通过将文字变暗来迅速解决这个问题，让每个人都能更容易接受。对于重量较轻的字体，只需将其变暗几个档次，就可以大大改善其可读性。 2. 什么即时反馈对表格互动至关重要 当涉及...
在说如何合理计算间距之前先说一下为什么要统一间距，首先在设计一套app或者系统之前会有一套设计规范，而设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、图标、按钮常态点击态等进行统一的梳理和规范。同理，间距作为设计规范中最小的单元，稍小的偏差或不规律的间距都会影响到整体界面的排版和布局，可见间距的统一有多么重要。界面的设计要给人简洁整齐，条理清晰感，就是界面元素的排版和间距设计。这里...
一般设计师绘制矢量图都会使用Adobe Illustrator（以下简称AI）矢量绘图软件，图标放大也不会越模糊，但有时也需要AI源文件转Adobe Photoshop（以下简称PSD）源文件，接下来分享一下快速转换源文件的方法。首先打开一个AI源文件，点击软件界面右侧图层，点击三杠图标后会在下方弹出的选项中选择“释放到图层（顺序）”，所有图层都选择释放，如果想要在PSD源文件中也有图层的话，把所...
