果果爱吉他-优快云博客

原创 2016总结与2017规划

相较于2016的目标来讲吧：第一点，移动端与响应式，没有搞得达到想象中的地步，但是写个专题页还有活动页等也不算太大的难事了，小进步X1;第二点：学好js和三大框架，很失败，自我感觉js没有怎么学，还是原地踏步，好气；第三点：去南方，去了，没有去杭州西安海南三亚等等，去了个江西，湿润湿润的空气，和冰冷的夜晚是给我最大的印象；第四点：工资，╮(╯▽╰)╭痛点，就不说了，原地踏步。

2017-01-01 17:00:18 296

原创 sublime使用快捷键

ctrl+p 负责快速找到文本，@可以导航到单词ctrl+shift+p 命令模式，支持模糊查询，可迅速更改语法模式等ctrl+shift+d 复制单行产生多行游标的几种办法 ctrl+d//选中相同的单词，配合ctrl+k跳过，进而产生多行游标 alt+f3//多选-->多行游标 ctrl+a->ctrl+shift+l sh

2016-09-09 09:28:42 371

转载 Transition height from 0 to auto

CSS3的transition可以作用于大部分属性值为数值之类的属性，包括width、height、font-size、color、opacity等。但是将transition应用于 height:auto;时，浏览器会识别height值为0，因此无法直接从 height: 0; 过渡到 height: auto; 。一种简单的方法是，将过渡应用于max-height属性，通

2016-09-08 13:01:57 1917

原创编写网站导航有感

编写网站导航有感(纯CSS) 父元素块响应式的导航列表line-height:20px;//撑开原理完成高度设置padding:0 10px;//同样的撑开原理完成宽度设置text-align:center;//比例美观子元素块响应式的高度动画.father:hover .child{ max-height:100px;}.child{ max-height:0

2016-09-08 12:48:17 296

转载 CSS3 transform对普通元素的N多渲染影响

一、一入transform深似海一个普普通通的元素，如果应用了CSS3 transform变换，即便这个transform属性值不会改变其任何表面的变化（如scale(1),translate(0,0)），但是，实际上，对这些元素还是造成了写深远的影响。所谓表面无恙，内心奔溃的真实写照。以下就是自己列举的几个比较有代表性的表现示例，欢迎补充！二、transform提

2016-09-07 13:21:19 402

原创关于内联元素间距问题的解决办法

内联元素是当做字体来处理的，字体之间是有间隔的，所以内联元素之间也是有间隔的，字体设为0，可以消除间隔，但是重新设置内联元素的字体大小

2016-09-06 17:22:08 1473

转载 querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？

作者：简生链接：https://www.zhihu.com/question/24702250/answer/28695133来源：知乎著作权归作者所有，转载请联系作者获得授权。1. W3C 标准querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。

2016-09-05 14:37:38 350

转载学习书籍

WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。一. 入门级：就是有一定的基础(比如最常见的HTML标签及其属性、事件、方

2016-09-04 10:11:07 277

转载 css常用的简写

颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2property:

2016-07-05 15:43:40 468

转载认识HTML5的WebSocket

在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Socket.IO。一、什么是W

2016-01-31 10:17:28 305

原创使用highchart.js

使用highchar.js 注意内容script要写在body前，不然显示不了。html部分<div id="container_column" style="min-width: 310px; height:220px; margin: 20px auto 5px"></div><div id="container_line" style="min-width: 310px; height

2016-01-28 12:27:46 916

原创 jquery遍历给每个子元素绑定事件

代码如下：$(function(){ $('.evals>li').each(function(index){ $(this).on('click',function(){ $('.text').val($('.evals>li').eq(index).html()); }) })})each()以每一个匹配的元素作为上下文来执行一个函数。配合$

2016-01-20 15:11:12 24867 1

原创关于移动端的一点理解

关于移动端最近写了将近三个微信推广方面的项目，收获颇丰。在这里简单叙述一下对这三个单位的理解。 header由于微信是纯手机端页面，故而没有考虑pc端的响应。写微信页面，首先要引入一串响应式必备**meta**代码如下：单位接下来就是布局问题了，响应式布局不能用固定的单位来写，然后查了很多资料，移动端对于H5和css3的支持还是比较

2016-01-20 15:01:47 604

转载本文中，我们为大家收集了有关前端设计的9个非常有用的响应式框架。在过去的几年中响应式框架已经出现，如今它已经变得越来越普遍。因此，我们收集这些响应式框架来为您服务，希望当您在设计前端时这些框架能帮助到

本文中，我们为大家收集了有关前端设计的9个非常有用的响应式框架。在过去的几年中响应式框架已经出现，如今它已经变得越来越普遍。因此，我们收集这些响应式框架来为您服务，希望当您在设计前端时这些框架能帮助到您。

2016-01-12 13:58:19 558

转载关于z-index 那些你不知道的事

CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。CSS为盒模型的布局提供了三种不同的定位方案：常规文档流浮动绝对定位其中最后一种定位方案将一个元素从常规流中移除，完全依赖开发者来确定元素显示的位置。通过赋予t

2016-01-12 10:38:32 551

转载 HTML5标签元素下的下划线动画

最近我看到一些博客网站又这么一个效果: 当鼠标放到博客头部的标题时,这个链接的下划线就会以动画的方式从无到有,我觉得挺有意思的,好像京东的首页就有这个效果,大家可以看看.创建这个效果非常的简单,不需要加入额外的DOM元素到页面中,但是低版本的浏览器可能不支持CSS动画(常规下可能只显示一条下划线)首先第一件事就是需要将a标签的text-decoration去掉,设置

2016-01-12 10:03:27 2170

原创关于微信端分享页面的设置问题

一、//js接口var shareme;var urls = window.location.href;if(isWeiXin()){ var weifileref=document.createElement('script')//创建标签 weifileref.setAttribute("type","text/javascript")//定义属性type的

2016-01-11 17:25:59 5129

转载移动端网页判断手指触摸滑动的方向

如今的应用也是越来越人性化，比如继续向上滑动或者向下滑动，加载更多内容，这些便捷的操作我们在网页中也可以实现，首先第一步就是判断用户手指触摸滑动的方向。判断用户手指滑动的方向，一种比较通用的解决方法就是，记录用户手指刚接触屏幕的位置，然后减去用户手指离开屏幕的位置，然后判断这个值的正负。$("body").on("touchstart", function(e) { e.pre

2016-01-08 17:33:48 3172

转载 JS移动客户端--触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend:

2016-01-08 10:35:03 387

转载七个你可能不了解的CSS单位

我们很容易无法摆脱的使用我们所熟悉的CSS技术，当新的问题出现，这样会使我们处于不利的地位。随着Web继续的发展，对新的解决方案的需求也会继续增大。因此，作为网页设计师和前端开发人员，我们别无选择，只有去了解我们的工具集并且熟悉它。这意味着我们还要了解一些特殊的工具-那些不经常使用的，但是当需要它们的时候，它们恰恰是最正确的工具。今天，我将要向你介绍一些你以前可能不知道的CSS工具。这

2016-01-07 12:29:25 387

转载几个jquery小技巧

1. 禁止右键点击$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; });});2. 隐藏搜索文本框文字Hide when clicked in the search field, the value.(example

2016-01-05 14:24:16 329

原创获取css外部样式的方法及兼容代码

获取css全部样式的2种方法： 1.getComputedStyle(obj,false).color // 除IE之外的浏览器 2.obj.currentStyle.color // IE示例代码 function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyl

2016-01-04 16:14:22 591 1

原创 2015总结与新年计划

自7月份来到北京，在达内学习了近三个月的时间，在线视频学习了很多网页编写的规范和编程习惯，了解了在学校期间不曾了解的一些内容。也由此，正式开启了我的北漂生涯，一个小前端。 3个月跟老师敲代码，到自己编写算法，自己写出一个个程序，到投递一个个简历，面试一家家公司，在达内安排的双选会之前便早早的进入企业。很多朋友问我为什么不像他们一样包装简历，甚至购买假的毕业证。对于第一份工作，我是秉承着一

2016-01-04 15:32:19 382 2

果果的小窝