自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端向朔

学习分享 | 热爱生活 | 奋斗青年

原创 iPhone又出新机了,UI设计师该用什么尺寸呢?

iPhone这次一下出了三款新机,iPhone Xs、iPhone XR、iPhone Xs Max,那么问题来了,这三款手机与之前的有什么不同,设计师的UI尺寸会发生什么变化,移动端页面的UI到底应该以多少为好?接下来我们将一一探讨。

2018-09-22 19:08:19 2252 0

原创 帧动画的多种实现方式与性能对比

概述 前面我分享了《Web动画形式》,各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动画,定格动画,逐帧动画等,这里我们统一用帧动画来表述,接下来我们就来看看帧动画有哪些打开方式吧。 (高兴的小伙子) 应用场景 帧动画一般用来实现稍微复杂一点的动画效果,同时希望动画更...

2018-07-11 10:42:47 7120 4

原创 移动Web开发实战专栏总结(PPT分享)

以下为我将专栏《移动Web开发实战》重新从不同的角度进行整体的梳理之后,在团队分享的PPT。在这里分享给大家。 写PPT之前,先将要分享的内容用脑图梳理出来,有了框架填内容就比较快了。 1、禁止ios和android用户选中文字 2、禁止ios长按时触发系统的菜单,禁...

2018-06-25 16:46:04 2188 3

原创 重读Vue文档

基础教程 全局只有一个的 new Vue() 里面的 data 可以采用属性的写法,但是在其他组件里面,这里就不能直接这样写了,需要写成函数,并且把数据 return 出来,这样是因为定义的某个组件有可能会多次创建,如果还是采用属性的写法,会造成多个组件之间,数据是同一个引用,造成混乱和错误。 ...

2020-04-19 11:42:52 95 0

原创 《JavaScript 语言精髓》读书笔记

文章目录语法数字字符串语句对象 语法 数字 JavaScript 只有一个数字类型。它在内部被表示为 64 位的浮点数,没有分离出整数类型,所以 1 和 1.0 的值相同,这避免了短整型的溢出问题。 NaN 是一个数值,它表示一个不能产生正常结果的运算结果。NaN 不等于任何值,包括它自己。我们...

2020-03-23 23:17:54 117 0

原创 1024 平凡的一天

1024 平凡的一天 // 三年后的我 .hair { display: none; } // 你从未看见我,但我一直在 .girl{ visibility: hidden; }

2019-10-24 11:35:09 169 0

原创 元素圆角与内部滚动条的矛盾

文章目录概述元素圆角与滚动条方案一方案二方案实现自定义滚动条扩展遗留问题 概述 我们在写 web 页面的时候,除了页面原生的滚动条,比如 HTML 的滚动条,BODY 的滚动条之外,还有一种比较常见的滚动条,那就是元素内部滚动条,我们在利用元素内部滚动条的时候会遇到什么问题呢,我们如何自定义滚动条...

2019-09-23 11:24:56 250 0

原创 【CSS】怎样修改chrome记住密码后自动填充表单的黄色背景?

问题跟踪:https://github.com/haizlin/fe-interview/issues/95 倒是一直没注意过这个问题,搜了下思否已经有提问和回答,基本也能解决问题,包括上面的两个回答,同时CSDN的账号登录也是用上面内阴影的方法解决的。 https://segmentfault....

2019-05-14 10:08:00 381 0

原创 【CSS】rgba()和opacity这两个的透明效果有什么区别

1.opacity 是属性,rgba()是函数,计算之后是个属性值; 2.opacity 作用于元素和元素的内容,内容会继承元素的透明度,取值0-1; 3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值,透明度由其中的 alpha 值生效,取值0-1...

2019-05-14 09:24:39 832 0

原创 【CSS】属性content有什么作用呢?有哪些场景可以用到?

认识 :before 和 :after 默认 display: inline; 必须设置 content 属性,否则一切都是无用功, content 属性也只能应用在 :before 和 :after 伪元素上; 默认user-select: none,就是 :before 和 :after 的内...

2019-05-08 10:26:01 1206 0

原创 【HTML】元素的 alt 和 title 有什么区别?

概述 这道题大概还可以加个限定词,我们暂且把 <title> 标签排除在本次讨论之外。 元素的 alt 和 title 属性 有什么区别? ALT 属性 最常见用在 <img> 标签上,那我们先来看下 <img> 标签的 alt 属性。 alt 属性是...

2019-05-02 12:01:36 3216 0

原创 多端统一技术方案选型

文章目录概述需求目的考虑因素项目因素团队因素技术因素技术选型候选技术初步筛选详细对比多端支持流行活跃度开发工具组件库/工具库/Demo实践反馈支持宝小程序百度小程序结果评审做出决定参考文章 概述 本文是记录我们在寻找多端统一技术方案选型的一个过程,也是我自己的一个思路。主要用来记录这个过程,结果并...

2019-04-17 09:17:14 659 0

原创 春节随想

节后快速进入状态

2019-02-13 15:27:21 152 1

原创 《CSS Secrets》读书笔记(5)

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人,如果你是新手,阅读起来可能有...

2019-01-21 11:24:26 164 0

原创 还不会CSS水平垂直居中?这里有12种方案

今天读书的时候,愕然发现自己居然没有总结过水平垂直居中的方法,在印象中,这个知识点确实是很神奇的存在:极其常见的需求,从理论上来看,它似乎极其简单,在实践中,它往往难如登天,当涉及尺寸不固定的元素时尤其如此。接下来我们就来总结一下该如何实现这...

2019-01-18 17:39:28 431 0

原创 《CSS Secrets》读书笔记(4)

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人,如果你是新手,阅读起来可能有...

2019-01-16 14:59:38 142 0

原创 我正在参加2018博客之星评选,需要您的支持,非常感谢

我正在参加CSDN 2018博客之星评选,希望您能投我一票,我在No.125。 下边这个是我哦! 感谢您宝贵的一票,投票地址: https://bss.csdn.net/m/topic/blog_star2018 ...

2019-01-08 17:54:45 323 5

原创 《CSS Secrets》读书笔记(3)

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人,如果你是新手,阅读起来可能有...

2019-01-07 11:10:44 3493 2

原创 2018学习总结

今年是拔高和成长的一年。重构技术的拔高和前端知识的补充成长。 今年申请成为了CSDN博客专家,对写博客产生了一种特殊的感情。 今年一整年都没有“刷”和“发”朋友圈,对微信朋友圈失去了兴趣,我尝试打开看了几次,最后都觉得无聊关掉了。

2018-12-29 20:10:53 440 0

原创 Vue / Nuxt 项目如何使用 swiper / lazyload

本文为框架/工具/插件使用记录。 主要介绍在 Vue 2.X 项目和 Nuxt.js 项目中如何使用 vue-awesome-swiper 和 vue-lazyload。

2018-12-24 14:47:32 3878 1

原创 《CSS Secrets》读书笔记(2)

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人,如果你是新手,阅读起来可能有...

2018-12-18 11:36:05 260 0

原创 Nuxt项目如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

接上篇《Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith》 如果Vue项目考虑实现SSR服务端渲染的话,Nuxt是很好的选择,Nuxt帮我们做了很多工作,让我们实现SSR就像配置一样简单。 还是同样的问题,如果需要在Nuxt项目开...

2018-12-13 21:40:11 1542 0

原创 Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

背景 前段时间,我由 重构/UI开发 转岗前端开发,之前直接在重构自己的目录下输出静态CSS样式和HTML,现在变成直接在Vue-Cli 3.0 脚手架构建的项目下进行开发,这就需要在现有前端开发流程中整合重构流程。 我们之前重构是通过 gulp、postcss 等工具实现自动化处理及组件化开发,...

2018-12-13 20:18:13 2280 0

原创 《CSS Secrets》读书笔记(1)

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。

2018-12-07 09:41:16 378 0

原创 Git项目文件/版本管理

首先我们先统一一个概念,便于我们在后面的表述。 我们Git版本管理有三个区:工作区、暂存区、版本区(库) 接下来我们会介绍对文件和项目的操作,其实就是增删改查(CRUD)。因为之前已经分享过分支和标签的操作,所以,针对分支和标签的CRUD操作可以查看之前的文章。 Git分支操作集合 Git标签管理...

2018-12-02 01:06:46 1138 1

原创 Git标签管理集合

标签管理背景 在进行版本管理的过程中,我们是会经常提交记录的,在发布的过程中,我们也是将最新的代码发送出去,但是如果版本需要回退的时候,我们一下子就很难弄清楚,某个功能是哪个版本的了,这个时候我们就需要标签来对我们的代码进行关键节点的标记。最好每发布一次线上代码就添加一次版本号标签。 版本号的定义...

2018-11-25 19:03:02 134 0

原创 手机端抓包http/https-Fiddler安装与设置代理

注:本教程适合Windows系统用户。 通过fiddler代理,我们可以抓包手机的网络请求,也可以通过电脑设置host,实现手机访问测试内网。 准备 1.安装fiddler,官网下载,下一步安装 2.手机和电脑在同一局域网下(连同一个wifi或者手机连电脑开的热点) 3.查看自己电脑IP,不知道的...

2018-11-16 10:53:32 2781 1

原创 Git分支操作集合

本文记录git分支相关操作 基础分支操作 1.查看本地分支 git branch 2.查看远程分支 git branch -r,查看远程和本地所有分支 git branch -a 3.创建本地分支 git branch [name] 4.切换分支 git checkout [name] 5.创建并...

2018-11-15 18:36:42 241 0

原创 如何将本地文件推送到Git远程仓库

准备 1.首先你要安装Git 2.其次你要有一个远程仓库,现在大家用的比较多的比如:https://github.com/ , https://about.gitlab.com/ 3.最后你要准备好你要管理的项目文件 加入Git版本管理 其实要讲的就是github仓库创建时给出的提示或建议,我们实...

2018-11-15 10:44:00 3498 1

原创 如何使用Git克隆远程仓库

GitHub Git安装 Git命令 图形化界面SourceTree 1.如何克隆仓库 git clone https://github.com/xiangshuo1992/preload.git 仓库地址可以是https地址,也可以是SSH地址,如图,如果你的GitHub还没有配置SSH Ke...

2018-11-12 10:53:42 2556 0

转载 ES6 Set和Map数据结构(可转为数组)

一:Set 基本用法 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。(不包括空对象) Set 本身是一个构造函数,用来生成 Set 数据结构。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x =&a...

2018-11-07 21:58:02 2085 0

原创 GitHub如何配置SSH Key

https://github.com/xiangshuo1992/preload.git git@github.com:xiangshuo1992/preload.git 这两个地址展示的是同一个项目,但是这两个地址之间有什么联系呢? 前者是https url 直接有效网址打开,但是用户每次通过...

2018-10-29 09:35:07 43366 11

原创 Web动画形式

背景 对于Web开发者来说,不管什么细分方向,比如数据可视化、网站系统、电商网站等等,都会涉及到一个难题“动画”。 因为动画关系到Web开发的两个比较重要的点,一是视觉效果,二是用户体验,通过酷炫动画效果可以给视觉加不少分,同样,恰到好处的微动效也会给用户体验带来不错的惊喜,基于此,我们的We...

2018-06-10 15:27:24 1649 2

原创 单屏(全屏)适配解决方案(jQuery插件)

背景 在平时的web开发过程中,经常会要实现单屏或者叫全屏的效果,同时要满足设备适配要求,虽然一些常见的插件能实现一定的效果,但是如果需要灵活运用的话还是会受到很多限制,在不断的实践过程中,我们梳理了一套全屏适配解决方案,能兼容IE8+,下面我们来详细了解。 案例分析 案例一: 可以看...

2018-05-17 13:27:56 2822 0

原创 Preload图片预加载(jQuery插件)

背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题。 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者闪屏; 或者页面素材比较多、比较大,需要一定的加载时间,特别有时候的活动页面,我们一般会把首屏做...

2018-04-30 00:21:58 4537 0

原创 Canvas绘制时钟(面向对象版)

概述 更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 在学习了老师的课程之后,自己实现了一遍,同时写了一个面向对象的版本。 Canvas时钟效果-函数编程 Canvas时钟效果-面向对象版 ...

2018-04-20 20:02:07 319 0

原创 Canvas星空效果(JS面向对象)

概述 更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论: 1.HTML5 canvas的基础API,如 context.beginPath(); 2.获取屏幕...

2018-04-17 17:58:00 4879 0

原创 微信小程序-(cover-view/cover-image)

概述 在微信小程序经常会用到一些原生组件,比如map、video、canvas、camera,这些原生组件想让其他元素覆盖在其上,必须使用cover-view或者cover-image组件。最近在开发的小程序也是用到了camera这个组件,有几个坑在这里可以说下。 cover-view ...

2018-03-28 15:33:43 22879 0

原创 微信小程序-自定义button、checkbox组件

问题描述 微信小程序开发过程中,经常会存在需要自定义一些组件的情况,接下来我们介绍这次开发小程序我遇到的自定义button和checkbox。 自定义button 除了简单的用view或者其他标签模拟,加上背景图片完全放飞自由,还有特定需要button按钮,比如需要用微信自带的分享转发功...

2018-03-28 11:46:53 6017 0

原创 微信小程序-预研总结(PPT分享)

该PPT适合产品、运营、设计、重构、开发同学了解探讨。 备注: 第一:目前我们的团队,从产品、设计、重构、开发都没有很好的小程序项目经验。 第二:接下来的产品规划中,有多个产品比如WeGame APP以及运营活动都准备采用小程序的方式来做 第三:目前我们在《真三国无双》的游戏运...

2018-03-27 19:18:04 6333 2

提示
确定要删除当前文章?
取消 删除