note
note copied to clipboard
liuyib
🌼 前端技能树加点之路
## 前言 在很多电商网站中，一般都会有能够展开多级子菜单的菜单列表。例如：  一般来说，用户会径直移动鼠标去选择商品，而不是先将鼠标平移到子菜单，然后再选择商品，如图：  当用户径直移动鼠标去选择商品时，对于交互体验好的菜单列表来说，会**通过预测用户的行为**，判断出用户是想选择商品，而不是切换菜单项。 ## 解决问题 下面我们要实现的效果是：**当用户选择商品时，即使经过其他菜单项，也不会切换菜单。而当用户想要切换菜单项时，可以进行无延迟切换**。效果如下：  ## 代码实现 HTML: 查看内容 ``` html 精选> 云计算> 安全> 大数据> 人工智能> 企业应用> 物联网> 开发运维> 云服务器 ECS 云数据库 RDS MySQL...
效果如下：  看见这个效果，第一感觉是不可能纯 CSS 实现，需要用 JS 计算滚动距离什么的，但知道原理之后感觉特别有意思。 > 学 CSS 就像逛海澜之家一样，每次都有新体验 : ) 其实这个效果用 **线性渐变** 就可以实现。 核心代码： ``` css body { background-image: linear-gradient(to right top, #fc0 50%, #eee 50%); background-repeat:...
**1、问题原因** 进行 CORS 跨域时，在有的浏览器中有时会出现：**一次动作，两次请求**。 这个问题是在进行前后端分离开发时，**由于跨域引起的**。 在以前，跨域可以使用 **代理、JSONP** 等方式，在现代浏览器中，我们有更好的选择：**CORS**。 使用 CORS 跨域，只需要在服务端设置 `Access-Control-Allow-Origin` 响应头，即可像访问同源接口一样访问跨域接口。 在使用 CORS 跨域时，后台采用 **token 检验机制**，前台发送请求必须将 **token** 放到 **Request Headers** 中，那么就需要传输自定义 **Headers** 信息，这时候在发送 ajax 请求时，有时一次动作会触发两次请求。**一次是 OPTIONS 请求，一次是真正的请求**。 下面是这个问题的答案：...
`Chrome` 中的 `input` 如果没有禁用 `autocomplete` 属性的话，就会自动填充内容以及黄色背景。如下图：  有时候这个黄色背景的颜色并不是我们想要的。需要去除或者更换颜色。 这个小小的问题看似简单，但想要完美解决是没那么容易的。 --- ## 1、box-shadow 覆盖 一行很简单的代码： ```css box-shadow: 0 0 0 1000px #fff inset; ``` 效果如下：  这样虽然很简单的去除了自动填充时的黄色背景，但是如果 `input` 框需要半透明背景时，这种方法就不行了。 可以去这里自行体验下：[http://www.w3school.com.cn/tiy/t.asp?f=html5_input_autocomplete](http://www.w3school.com.cn/tiy/t.asp?f=html5_input_autocomplete) ##...
先看下效果图：  虽然纯 CSS 实现，但效果还是很棒呢！ 下面来看一下具体实现。 首先准备一些 `li` 标签，然后使用伪类做出下划线效果：  代码如下： ```html 不可思议的 导航栏 纯CSS实现 下划线 跟随光标 ``` ```css li { float: left; position: relative; padding: 10px; list-style: none; cursor:...