2020年9月16日
缓缓回到顶部效果的实现
摘要： $(function () { //首先将#btn隐藏 $(".backtop").hide(); //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失 $(window).scroll(function () { if ($(window).scrollTop() >= 50) { 阅读全文
posted @ 2020-09-16 16:45 wqll 阅读(149) 评论(0) 推荐(0) 编辑
bootstrap4实现点击标签展示对应的内容
摘要： 不多说，直接贴代码 导航 <ul class="nav nav-tabs container pr-0 pt-4 pb-4" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href 阅读全文
posted @ 2020-09-16 16:41 wqll 阅读(839) 评论(0) 推荐(0) 编辑
2020年8月10日
禁止页面内容滚动（ 禁用 ctrl - | ctrl + | ctrl +滚轮 事件 ）
摘要： 亲测有效 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>浏览器网页内容的百分比缩放（按ctrl - | ctrl + | ctrl +滚 阅读全文
posted @ 2020-08-10 09:59 wqll 阅读(879) 评论(0) 推荐(0) 编辑
2020年7月30日
UI中的暗黑模式
摘要： 尽量不使用100%的纯黑色 建议主题界面颜色：#121212； 考虑把颜色饱和度降低； 做两个调色板-用于暗黑模式和明亮模式 记住深色模式下的可访问性； 避免使用阴影； 海拔高度构建层级结构；（背景层应该是最暗的，放置在其顶部的元素应该稍亮一些。如此，界面能够更合理的被用户感知。） 阅读全文
posted @ 2020-07-30 09:24 wqll 阅读(295) 评论(0) 推荐(0) 编辑
2020年7月28日
如何通过空状态留住用户
摘要： 一、空状态的分类 系统层：本地请求异常；如：无网络、服务器异常等； 信息层：请求成功，数据异常；如：内容已删除、已下架等； 空白层：请求成功，无数据；最常见的空页面或空状态； 初体验：初次注册登录的用户很多功能都没有熟悉； 根据不同的产品，我们可以为用户提供不同的引导 创作平台 -- 引导用户创造内 阅读全文
posted @ 2020-07-28 09:50 wqll 阅读(113) 评论(0) 推荐(0) 编辑
2020年7月1日
交互设计常用原则和定律
摘要： 一、尼尔森十大可用性原则 1. 状态可见原则：系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。 即在用户操作界面功能给予实时反馈。 例如：页面加载状态提示、 阅读全文
posted @ 2020-07-01 10:19 wqll 阅读(563) 评论(0) 推荐(0) 编辑
2020年6月2日
优化设计的四个原则
摘要： 1. 对比 通常设计的页面，要么模块要素相同，要么明显不同。具有反差性通常以4种不同的方式表现出来。 1.1 颜色：在浅色上面使用深色，反之亦然。 1.2 大小：仅将大小完全相同或大小不同的元素彼此相邻放置。 1.3 权重：与“大小”相同，仅将权重完全相同明显不同的元素彼此相邻排版。（粗的深的不要一 阅读全文
posted @ 2020-06-02 09:33 wqll 阅读(1021) 评论(0) 推荐(0) 编辑
页面当中遇到的兼容问题以及解决方案
摘要： 1. 页面出现滚动条 ———— ::-webkit-scrollbar {display: none;} 2. 处理火狐浏览器form表单回显时出现蓝色或者黄色的背景色，三种方法如下： 这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后 阅读全文
posted @ 2020-06-02 08:55 wqll 阅读(197) 评论(0) 推荐(0) 编辑
2020年5月9日
nuxt做移动端适配
摘要： 第一步：flexible.js放在nuxt项目static工程下： 执行：npm install postcss-pxtorem 正常安装 第二步：安装完毕后在 nuxt.config.js 中做如下配置 在页面中引入flexible.js文件 rootValue:37.5是以iphone6 375 阅读全文
posted @ 2020-05-09 13:17 wqll 阅读(3892) 评论(0) 推荐(0) 编辑
2020年5月8日
搭建一个基于nuxt.js的项目
摘要： 第一步：安装vue-cli; 第二步：vue init nuxt-community/starter-template nuxtdemo (nuxtdemo为项目名)； 需要进一步输入以下信息 Project name --输入项目名Project description --项目描述，直接回车即可 阅读全文
posted @ 2020-05-08 09:19 wqll 阅读(851) 评论(0) 推荐(0) 编辑