web
文章平均质量分 71
sunshine940326
本人性格开朗,积极向上,有较强的组织沟通能力,喜欢迎接新的挑战。学习能力很强,能够快速胜任不同领域的工作。容易接受新知识及理念,善于总结经验教训,能在最短的时间内熟悉新的技能知识,并运用到实际工作当中。务实、脚踏实地的工作,有很好的团队精神。
展开
-
浅谈CSS在前端优化中一些值得注意的关键点
当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能、网络性能、开发效率。在Web前端开发中,性能是一个非常重要的需要考虑的点。本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础。1. 开发原则1.1 编写符合当代浏览器性能的代码 如果想提高前端性能,就必须理解浏览器的工作原理,哪怕是个大概,这样才能知道性能瓶颈在哪里以及如何优化。转载 2016-09-20 11:49:38 · 907 阅读 · 0 评论 -
PC端自适应布局
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局:天猫 内容区采用媒体查询+定宽,在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏。注意热门市场这里,虽然每一个方块的宽度是随着断点变化的,但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定转载 2017-02-15 14:03:33 · 52260 阅读 · 0 评论 -
初学者如何写移动端响应式布局
一、百分比布局刚入前端坑的时候就是使用百分比布局,觉得百分比布局可以解决移动端的响应式布局问题,但是图样图森破,最常见的情况莫过于设计师说:“你没有按照我的设计稿来做呀”然后就是设计师在我旁边,我们一起开始调整位置….之后我学会了,基本上都是按照设计稿的位置来的(将设计稿缩放成chrom响应式中那么大,然后两个重叠开始比对位置= =),然后设计师再也没有说过位置不对了…但是身为一个程序员,这样做好丢原创 2017-01-06 16:38:31 · 13325 阅读 · 0 评论 -
图片预加载三大方法
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS、J原创 2016-12-09 11:14:06 · 13120 阅读 · 0 评论 -
section和div的区别
在做移动web的时候,参考的案例用的是section而不是div,就好奇,section是什么鬼?section是属于听说过但是一直都没有用过的一个元素,所以百度查了一下section和div的区别,收获如下: 作者:贺师俊 链接:http://www.zhihu.com/question/20227599/answer/14582155 来源:知乎 著作权归作者所有,转载请联原创 2016-09-21 11:30:16 · 67008 阅读 · 1 评论 -
前端开发规范:命名规范、html规范、css规范、js规范
本文首发于我的个人网站:http://cherryblog.site/ (背景更换了不知道大家有没有发现呢,嘻嘻) 一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了。 我是有一点强迫症的人,上周我们后端给我了一个CanUsename的接口(该接口的目的是判断输入的目的地是原创 2017-05-30 15:13:41 · 12663 阅读 · 2 评论 -
一个少女心满满的例子带你入门canvas
本文首发于我的个人博客:http://cherryblog.site/ github项目地址:https://github.com/sunshine940326/canvasStar 项目演示地址:https://sunshine940326.github.io/canvasStar/canvas 基本知识什么是 canvasgetContextcanvas 元素绘制图像co原创 2017-08-02 11:07:40 · 6005 阅读 · 3 评论 -
CSS布局方式
传统盒模型布局方式我们的传统布局方式就是通过盒模型,使用 display 属性(文档流布局) + position 属性(定位布局) + float属性(浮动布局)。这个大家都比较熟悉,没有掌握的同学再去恶补一下基础文档流布局这是最基本的布局方式,就是按照文档的顺序一个一个显示出来,块元素独占一行,行内元素共享一行,这个相信大家都比较熟悉了,就不再赘述了浮动布局浮动方式布局就是使用 float 属性原创 2017-08-15 19:47:01 · 748 阅读 · 0 评论 -
【读书笔记】锋利的 jQuery
本文首发于我的个人网站: http://cherryblog.site/ 本文作者: Cherry 本文链接: http://cherryblog.site/sharp-jquery.html 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!!前一段在当当和京东上趁着打折买了十几本编程的书,励志要全部看完!在原创 2017-09-05 17:48:43 · 996 阅读 · 0 评论 -
【JS】深拷贝 vs 浅拷贝
本文思维导图如下: 本文首发于我的个人网站: http://cherryblog.site/ 本文作者: Cherry 本文链接: http://cherryblog.site/deepcopy.html 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!!前言最近在读 zepto 的源码,深有感触,感觉随原创 2017-09-05 17:50:39 · 789 阅读 · 0 评论 -
html5canvas:教你实现知乎登录动态粒子背景
本文首发于我的个人博客:http://cherryblog.site/ github项目地址:https://github.com/sunshine940326/canvas-nest 首先上效果图: 实现起来也是很简单的, 按照我的步骤一步一步来就可以了~html代码首先要制作我们的页面,用到的是html5的新标签canvas;其实canvas就是我们需要用java原创 2017-05-25 22:36:46 · 11126 阅读 · 7 评论 -
jquery页内锚点平滑跳转实现代码
html中设置锚点定位的几种常见方法在html中设置锚点定位我知道的有几种方法,使用id定位、使用name定位、使用js定位,这些方法大家可以参考下1、使用id定位: <a href="#1F" name="1F">锚点1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>111111原创 2017-02-16 18:19:34 · 3868 阅读 · 0 评论 -
使用rem来开发你的移动端网站
what is rem ?css3中的计量元素大小的单位,类似px、pt、em。一种相对根元素font-size的计算方式。1rem = ’s font-size px (你懂就好)使用场景:每个元素的宽高、文字大小、行距、补白等一切可以使用长度单位的地方。使用范例: html{font-size:37.5px;}/*根元素的基础font-size被设置为37.5px,则1rem=37.原创 2016-09-21 10:02:13 · 1564 阅读 · 0 评论 -
svg的用法
SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图,但SVG有很多的用法你可能还不知道。观看演示SVG有什么优势?文件体积小,能够被大量的压缩图片可无限放大而不失真(矢量图的基本特征转载 2016-09-21 18:40:29 · 3635 阅读 · 0 评论 -
使用gitpage和hexo开发你自己的博客更新
进入程序员这个坑之后就开始自己在网上扒资料,然而资料太多,情况太复杂,主要是看见别人的博客,感觉好高大上,并且感觉在茫茫的互联网有自己的小天地感觉也是极好的。不是为了给别人看,而是为了 记录自己的成长,记录自己的每一个脚印。Gitpage+hexo想要实现拥有一个独立的私有博客,我们需要两个东西,一个是可供浏览器访问的静态网页存储空间,这个我们选择gitPage,一个是一个静态网页生成工具,Octo原创 2016-09-22 10:16:01 · 2449 阅读 · 1 评论 -
理解伪元素 :Before 和 :After
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。 你一定听说过这个词,尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章 事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter转载 2016-09-22 10:25:57 · 343 阅读 · 0 评论 -
css伪元素(二)
首先要明白一种思想:结构和样式分离。 结构和样式分离,就意味着:没有样式表,HTML文档也是一个完整的文档; 没有样式表,也能正常阅读用HTML表达的所有内容。 明白这种思想就能很好理解样式表中使用—— :before 和 :after中的content: “”; ——就算没有——:before 和 :after中的content: “”;- —–HTML文档也不会受到影响,HTML文档转载 2016-09-22 10:58:52 · 336 阅读 · 0 评论 -
jQuery animate()的坑
jQuery有一个动画队列,用以维护对于此节点的动画操作,你的代码的意思是:每次focus的时候,都给节点元素绑定一个blur事件处理函数,而之前的方法并没有消失掉,还在队列里,所以多次focus之后,队列里的事件处理函数就有很多了,因为执行的函数多了,所以你的代码运行速度就慢了。 在jQuery中,通过animate()可以实现元素的动画显示,但在显示的过程中,必须要考虑各种客观因素和限制性条件原创 2016-10-20 13:59:31 · 1005 阅读 · 0 评论 -
让新手能快速掌握的移动端自适应布局
移动端布局,相信很多人都有自己的一套兼容的方式。这里我也聊聊自己的经验。 一、百分比布局 我最开始的是用百分比布局的,这样的做法的话是比较费时间的,有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间,而且对于设计稿的还原也不好。所以这里>也不怎么推荐。二、固定的设备宽度在做移动开发的时候很多人都会加上viewport的配置, 那么固定设备宽度的布局就是根据这个来设置的,将viewport里转载 2016-11-28 19:18:02 · 818 阅读 · 0 评论 -
前端优化
加载优化加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点· 减少HTTP请求 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个 a) 合并CSS、JavaScript b) 合并小图片,使用雪碧图· 缓存 使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都转载 2016-11-28 15:52:48 · 259 阅读 · 0 评论 -
sass预处理初入门
关于 中文编译 出错的问题,需要指定字符集。@charset "utf-8";//必须设置了这个才能编译有中文的注释$fontSize: 12px;body{ font-size:$fontSize;}/* 测试注释 */ $side : left; .rounded { border-#{$side}-radius: 5px; }注释的问题 ,sass有两种注释方原创 2017-01-05 19:26:42 · 557 阅读 · 0 评论 -
【JS】类型检测
前言js 中的类型检测也是很重要的一部分,所以说这篇文章我们就来讲一下怎么对 JavaScript 中的基本数据类型进行检测。其实这也是在读 Zepto 源码中学习到的,所以阅读源码对我们的提升还是很有帮助的。本文基于参考了前辈们的文章之后个人理解此文写的有不当的地方,请各位大佬指正。其实常规方法主要有四种 1. typeof 2. instanceof 3. Object.prototype原创 2017-09-12 14:26:35 · 694 阅读 · 0 评论