学习笔记[入门]
Hey_Sarah
管你是不是笨鸟,飞吧!
展开
-
Vue.js入门
Vue.js是一个基于MVVM的双向数据绑定的JavaScript库。它具有以下特点:Vue.js 不支持 IE8 及其以下 IE 版本。与其他重量级框架不同,它是一套构建用户界面的渐进式框架,采用的是自底向上增量开发的设计。它专注于视图层,核心是MVVM中的VM,也即ViewModel,保证视图和数据的一致性。它使用了基于HTML的模板语法,允许开发者声明式地将 DOM 绑定原创 2017-05-22 17:44:31 · 577 阅读 · 0 评论 -
20150812 SVG实现Tooltip气泡效果+LESS+BOWER
使用Chrome调试样式(CSS和LESS)添加工作目录、建立文件映射(Map to)、编辑CSS文件或者使用样式面板修改样式、保存样式F12+Sources+右键+Add folder to workspace+选择+允许+文件+右键+Map to network resource.F12+Sources+文件+右键+Map to file system resource原创 2015-08-17 19:41:18 · 1181 阅读 · 0 评论 -
20150809 CSS圆角进化论
三个阶段:背景图 CSS2.0+标签模拟圆角 CSS3.0圆角属性①背景图宽度固定,高度自适应 切图,切两边上下或者左右 4个标签,div包裹(圆角上+内容+圆角下)宽度高度均自适应 切图,切4个角 5个标签div包裹(圆角左上+圆角右上+内容+圆角左下+圆角右下)圆角绝对定位,内容及包裹相对定位②CSS2.0+标签模拟圆角原理:应用像素画中绘制弧线的方法进行模拟阶原创 2015-08-17 19:34:32 · 493 阅读 · 0 评论 -
20150808 CSS3 3D特效
transitionCSS3.0的动画功能:transition、animation关键帧。transtion: 兼容:-webkit-transition -moz-transition -o-transition 属性transition-property:color;时间transition-duration:1s;模式transition-timing-funct原创 2015-08-17 19:33:47 · 321 阅读 · 0 评论 -
20150814 JavaScript深入浅出下
对象对象包含一系列属性,这些属性是无序的。每个属性都有一个字符串key和对应的value。key是字符串,即使不是也会toString对象结构:属性标签(writable/enumerable/configurable/value/get/set) [[proto]]原型-》原型链。。。[[class]] [[extensible]]delete只能删除对象上的属性,不能删除原型链上原创 2015-08-17 19:45:51 · 303 阅读 · 0 评论 -
20150810 CSS3实现照片墙+图片阴影+按钮特效
CSS3绚丽照片墙使用技术:旋转、缩放、阴影、动画制作步骤:照片位置+照片旋转角度+照片阴影及缓慢旋转、缓慢放大特效关键点:box-shadow加阴影左右、上下、模糊尺寸、颜色 position绝对定位 z-index上下层显示顺序 transform变形:配合rotate旋转、scale缩放、skew扭曲等一起使用 transition动画时间CSS3实现“图原创 2015-08-17 19:36:53 · 862 阅读 · 0 评论 -
20150813 JavaScript深入浅出(上)
数据类型 弱类型 隐式转换逻辑原始类型number/string/boolean/null/undefined对象类型object:function date array等隐式转换:①+/-+“字符串拼接”“运算符+”-“运算符-”巧用+/- 变字符串+“” 变数字-0②==/===类型相同时,==和===没有区别,类型不同时,==会尝试进行类型转换。==原创 2015-08-17 19:43:19 · 351 阅读 · 0 评论 -
20150807 表单美化
单选按钮:可hover及select文字说明,此时单选框及说明都显示不同效果,结构占位标签放图片,background-position控制图片的显示位置。js控制实现交互效果,show复选按钮:可hover及select文字说明,hover也显示一个效果。结构测试1测试2模拟这一块,但是默认样式不显示,显示背景图片。文本框:html5及CSS3部分原创 2015-08-17 19:33:11 · 299 阅读 · 0 评论 -
20150806 弹出层效果
遮罩层:background:#000;opacity:0.75;filter:alpha(opacity=75);height:1000px;width:100%;position:absolute;top:0;left:0;z-index:1000;弹出层:position:fixed;left:30%;top:30%;z-index:1001;细节省略。JS需要注意的:docum原创 2015-08-17 19:31:31 · 297 阅读 · 0 评论 -
20150811 canvas实现星星闪烁特效
1、轮播序列帧2、canvas API :drawImage() globalAlpha Sava Restore3、如何添加鼠标事件循环调用gameloop方法总结:requestAnimFrame(function(){});根据电脑性能确定循环间隔,动态变化的值setTimeout(function(){},time);setInterval(function原创 2015-08-17 19:39:24 · 1542 阅读 · 0 评论 -
20150815 Node.js基础
学习资源 https://nodejs.org/ https://www.npmjs.com/ https://github.com/ stackoverflow.com技术问答社区版本:偶数位为稳定版、奇数为非稳定版变量污染、方法重写等,JavaScript缺少模块管理机制。命名空间、定义规范commonjs规范:模块、包、二进制等。模块(定义、标识、规范)模原创 2015-08-17 19:47:43 · 286 阅读 · 0 评论 -
Django入门
Django是基于Python的一个免费Web开源框架,它采用了MVC的软件设计模式。和其他Web框架相比,它具有以下优点:强大的数据库功能:用python继承,几行代码就可以拥有一个丰富、动态的数据库操作接口(API)。简单易用的后台功能:几行简单的代码就可以让网站拥有一个强大的后台(Django Admin 管理工具),轻松管理网站内容。易扩展的模板系统:模板系统将代码和样式分原创 2017-05-22 10:29:26 · 431 阅读 · 0 评论 -
20170419 AngularJs 官方phonecat实例学习笔记
在对AngularJS进行简单了解的基础上学习Phonecat实例,可以分为环境搭建与运行、关键知识点解析、总结三个部分。1. 环境搭建与运行2. 关键知识点解析3. 总结原创 2017-04-19 11:05:12 · 552 阅读 · 0 评论 -
20160708 Bootstrap源码学习
Bootstrap的源码可以通过直接下载Bootstrap.css来学习,也可以通过less工具将上一篇中使用Npm工具安装的Bootstrap.less转换为Bootstrap.css来学习。第一种方法的具体步骤为:1、打开链接 http://v3.bootcss.com/getting-started/2、选择下载 用于生产环境的Bootstrap。3、通过查看bootstra原创 2016-07-08 11:16:02 · 345 阅读 · 0 评论 -
20160707 Bootstrap下载与安装(配图)
1.在Node.js官网下载Node.js2.安装Node.js 3.使用npm工具安装Bootstrap原创 2016-07-07 20:39:18 · 2939 阅读 · 2 评论 -
20150817 移动端开发框架入门
移动端框架和传统框架的区别:主要区别:1、移动端框架内部优化、处理以适应不同的分辨率等等。2、移动端开发框架为完成任务而不是提供解决方案如适配问题。3、移动端多使用简单、易用的框架如zepto.js jquerymobile.js 。4、移动端触发事件更多是触摸,而不是鼠标、键盘。5、针对于移动端的API HTML5技术使用zepto框架轻量jQueryMobile高度原创 2015-08-17 19:50:58 · 765 阅读 · 0 评论 -
20150816 Bootstrap入门
Bootstrap简单、灵活的勇于搭建WEB页面的HTML/CSS/JavaScript的工具集基于html5+css3,是简洁、前大的前端开发框架,让web开发更迅速、更简单下载:http://getbootstrap.com/Bootstrap2放弃...Bootstrap3放弃IE7/Firefox3.x, IE8支持,但不完全呈现效果Bootstrap中的JS插原创 2015-08-17 19:48:57 · 366 阅读 · 0 评论 -
React入门
React是一个主要用于构建用户界面的JavaScript库,相比传统型的前端开发,React开辟了一个相当另类的途径,实现了前端界面的高效率高性能开发。可以从以下几点来对它进行初步的了解:React 起源于Facebook对市场上所有JavaScript MVC框架的不满[2013年5月开源]。React 本身并不是一个MVC框架,顶多算是其中的V(View)。React 官方推荐使用J原创 2017-05-25 17:53:34 · 328 阅读 · 1 评论 -
20150805 (网页定位导航+瀑布流布局+信息排列)JS+JQuery+CSS3效果实现笔记
网页定位导航特效IE6不支持FIXED属性,添加以下设置可支持IE6/*ie6 hack*/ * html, * html body { background-image: url(about:blank); background-attachment: fixed; }* html #menu {原创 2015-08-06 22:47:04 · 954 阅读 · 0 评论 -
20150804 Ajax基础
Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。而传统的网页在更新时需要重新载入。创建XMLHttpRequest对象实例化对象var request=new XMLHttpRequest();如何兼容IE5或者IE6var request;if(window.XMLHttpRequest){request=new XML原创 2015-08-04 23:52:41 · 304 阅读 · 0 评论 -
20150803 YAHOO军规:如何提高网站速度
1、尽可能减少HTTP请求数HTTP请求是什么?每一个内容的获取,就是一个http请求如何优化请求?文字,图片合并,js合并,css合并2、使用CDN(内容分发网络)CDN是什么?在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容。3、添加Expire/Cache-Control头Expire 检查本地资源过期时间Cache-原创 2015-08-03 23:29:39 · 291 阅读 · 0 评论 -
20150803 SEO搜索引擎优化
搜索引擎工作原理搜索引擎数据库->搜索结果(排序)简介分类:白帽SEO、黑冒SEO白帽:内容SEO:网站标题、关键字、描述;网站内容优化;Robot.txt文件;网站地图;增加外链引用前端工程师与SEO:网站结构布局优化、网页代码优化网站结构布局优化扁平化的结构:1、控制首页链接数量;2、扁平化的目录层次;3、导航SEO优化面包屑导航:1、让用户了解原创 2015-08-03 23:25:03 · 420 阅读 · 0 评论 -
20150727 Javascript进阶学习笔记(上)
JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)变量名字可以任意取,只不过取名字要遵循一些规则:1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。2.变量名区分大小写,如:A与a是两个不同变量。3.不允许使用JavaScript关键字原创 2015-07-31 16:45:47 · 321 阅读 · 0 评论 -
20150728 JavaScript进阶学习笔记(下)
对象JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。对象的属性:反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等;对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;JavaScript 提供多个内建对象,比如 String、Date、Array 等等,使用对象前原创 2015-07-31 16:47:47 · 388 阅读 · 0 评论 -
20150726 CSS Sprite雪碧图应用
CSS Sprite雪碧图应用使用规则:1、静态图片,不随用户信息的变化而变化2、小图片,图片容量比较小3、加载量比较大4、大图不建议拼成雪碧图目的:有效的减少http请求数量,加速内容显示(每请求一次,就会和服务器链接一次,建立链接是需要额外时间的)原理:css background-position 坐标系控制一个层可显示的区原创 2015-07-31 16:38:23 · 466 阅读 · 0 评论 -
20150723 CSS3学习笔记(中)
opacity设置 div 元素的不透明级别:属性选择器新增E[att^=""]开头 E[att$=""]结尾 E[att*=""]结构性伪类选择器-root:root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是。“:root”选择器等同于元素eg: :root { backgrou原创 2015-07-31 16:15:34 · 406 阅读 · 0 评论 -
20150729 DOM事件探秘
事件流 描述的是从页面中接受事件的顺序。IE事件冒泡流 NETSCAPE 事件捕获流事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。HTML事件的缺点:HTML和JS代码紧密耦合在一起,JS代码和HTML都需要进行修改DOM0级事件处理原创 2015-07-31 16:51:07 · 247 阅读 · 0 评论 -
20150726 Web前端开发基础html+css
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。3. JavaScript是用来实现网页上的特效效果。如:鼠原创 2015-07-31 16:33:12 · 659 阅读 · 0 评论 -
20150722 CSS3学习总结(上)
1.兼容:在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。chrome safari:-webkitfirefox:-mozIE:-msopera:-oeg:transform-style: -webkit-trans原创 2015-07-31 16:12:20 · 340 阅读 · 0 评论 -
20150721 全屏切换效果(含核心代码)
通过css使div全屏、实现jquery简单组件开发、重写鼠标滚动事件、切屏动画1、全屏(css/DOM结构)竖:height:100%横:外width:400%内25% float:left滚动条消失:overflow:hiddenhtml, body { height: 100%; overflow: hidden;}#container, .section {原创 2015-07-31 16:01:47 · 454 阅读 · 0 评论 -
20150727 JavaScript入门学习笔记
JavaScript优点一、为什么JavaScript非常值得学习?1. 所有主流浏览器都支持JavaScript。2. 目前,全世界大部分网页都使用JavaScript。3. 它可以让网页呈现各种动态效果。4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。二、易学性1.学习环境无外不在,只要有文本编辑器,就原创 2015-07-31 16:43:23 · 353 阅读 · 0 评论 -
20150731 JQuery基础学习笔记(上)
环境搭建搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行。下载jQuery文件库在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.9.0版。引入jQuery文件库下载完jQuery框架文件后,并不需要任何的安装原创 2015-07-31 23:30:51 · 320 阅读 · 0 评论 -
20150802 jQuery表单验证ValiddationPlugin
客户端验证:现代网站填写表单时,几乎一定会采用的方式优点:1、可以减少服务器压力 2、缩短用户等待时间和提升用户体验jquery表单验证插件https://plugins.jquery.com/tag/validate/jQuery Validation插件是最常用的插件之一http://jqueryvalidation.org/1、让客户端表单验证变得非常容易,并且原创 2015-08-03 13:07:52 · 384 阅读 · 0 评论 -
20150801 jQuery基础学习笔记(下)
jQuery动画特效调用show()和hide()方法显示和隐藏元素show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数call原创 2015-08-02 20:48:15 · 487 阅读 · 0 评论 -
20150726 固定层效果实现
只有元素在设置相对定位,或者绝对定位后,属性z-index才有效,它的作用是设置元素所在的z轴层级。z-index值越大,元素层级越大。absolute与fixed相同点1、完全脱离标准文档流2、未设置偏移量时,都定位在父元素的左上角(偏移量——元素设置定位后就具有便宜属性和堆叠属性z-index)absolute与fixed不同点设置偏移量时,偏移参照基准原创 2015-07-31 16:41:45 · 531 阅读 · 0 评论 -
20150726 网页布局基础
标准及基础CSS 规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。W3C标准:由万维网联盟制定的一系列标准,包括:结构化标准语言(html.xml)表现标准语言(css)行为标准语言(DOM和ECMAScript)倡导结构、样式、行为分离标准文档流:特点(从上到下、从左到右,输出文档内容;由块级元素和行级元素组成)盒子3D模型:border/content+padd原创 2015-07-31 16:38:20 · 380 阅读 · 0 评论 -
20150725 前端开发工具DreamWeaver及Sublime方法技巧总结
前端开发工具技巧—DW实时视图==webkit==谷歌浏览器F12快捷键预览F5刷新首选项设置:代码源格式、代码颜色背景色等,标记是否显示(不可见元素),无恢复默认值选项。折叠:只折叠一行考虑是否有标签未闭合根据所选折叠和扩展选择父标签(一级一级找 排错)+选取当前代码段(只对js脚本起作用)+行号+高亮显示无效代码(F5刷新 排错)智能提示js 加粗、不同颜色标记不同原创 2015-07-31 16:31:09 · 679 阅读 · 0 评论 -
20150724 CSS3学习笔记(下)
布局样式相关多列布局——Columns为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现。接下来咱们一起学习原创 2015-07-31 16:29:27 · 644 阅读 · 0 评论 -
20150730 JS动画效果实现
运动框架实现思路1、速度速度不变,匀速动....透明度opacity 基于IE==filter:alpha(opacity:30);基于Chrome==opacity:0.3;2、缓冲运动速度越来越慢...var speed=(iTarget-oDiv.offsetLeft)/20;speed=speed>0?Math.ceil(speed):Math.fl原创 2015-07-31 16:53:31 · 325 阅读 · 0 评论 -
20150720 高德地图组件快速入门
坐标拾取工具:http://lbs.ampap.com/console/show/picker组件产品:http://lbs.amap.com/smart/Key申请:http://lbs.amap.com/console/Native APP WEB APPhtml5(定位)组件实现的功能:位置标注、路线导航、周边搜索(地图调用领域使用最多的三点)使用前准备:申请原创 2015-07-31 15:52:31 · 757 阅读 · 0 评论