- 博客(22)
- 资源 (1)
- 收藏
- 关注
原创 关于前端的性能优化
1.减少http请求:1)合并文件。把多个CSS文件、js文件合并到一起。或则直接把CSS、js放到HTML页面最上面,不用单独写一个文件。***个人觉得用CSS能实现的效果,就不用js了(毕竟js的性能没有CSS3的性能高)2)运用精灵图(现在已近很少用了吧???)3)内联图像2.少用重定向3.Ajax异步加载4.延迟载入组件(post-load componen
2016-03-31 22:27:51 329
原创 JavaScript基础内容复习1
1.JavaScript的历程:1)ECMAJavaScript不是一门语言,而是一个标准。2)Google退出Ajax,改变了人们对JavaScript的认识。3)Node.js,运行于服务器端。2.JavaScript脚本是可以放在body里面的。3.Webstorm中代码注释的快捷键:Ctrl+/4.查看JavaScript错误的方法:右击——》审查元素——》控制台(
2016-03-30 22:43:12 546
原创 Angular JS 开发Web应用程序
1.SPA 应用程序:单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。如:网页云音乐(http://music.163.com/)2.Angular JS的一些属性特征:1)MVC2)模块化3)自动化双向数据绑定4)指令系统(非侵入式API) (没明白是什么鬼????)3.如果想要使用NPM的
2016-03-23 20:44:12 1247
原创 能够用手指滑动的焦点轮播图——swipe.js
1.swipe.js 专门用来制作手指滑动的焦点轮播图使用步骤:下载swipe.js文件——》新建HTML5页面——》添加视口约束——》添加两个div,第一个的id名称可以任意,第二个固定为:“swipe-wrap”——》插入放置轮播图的div,而不是ul(因为swipe.js库只支持div)——》添加CSS样式——》引用JQuery 和swipe.js库——》。。。示例代
2016-03-23 17:58:32 8733
原创 JQuery Mobile(书籍分类检索)
1.什么时候使用JQuery mobile 呢?所有功能性比较强的网站,比如订酒店(如:携程)、租车、订票等这样需要有本地APP 界面的网站。就需要使用JQuery mobile如图: 2.JQueryMobile官网下载——》解压后拷贝images文件件、jquery.mobile-1.4.5.min.js、jquery.mobile-1.4.5.min.css
2016-03-22 23:27:00 1303
原创 响应式手机网站——视口约束&媒体查询
1.http://mediaqueri.es/ 响应式网站2.用谷歌浏览器模仿各种移动设备。3.设备检测: 1)device.js库 (图片截自传智视频)2)页面跳转:window.location=URL;4.检测屏幕更改页面的CSS样式:(有点像hao360换肤
2016-03-21 21:38:23 2897
原创 .before和.after+3D旋转案例(字体翻转的效果)
1.行内的盒子——考虑定位2.3D旋转:rotaeX()rotateY()rotaeZ()设置旋转中心点:transform-originskew(x,y) 倾斜示例代码:html>lang="en"> charset="UTF-8"> 伪元素练习 type="text/css"> *{margin: 0;p
2016-03-20 22:41:50 3518
原创 CSS3:图标字体
1.图标字体:就是用字体代替图片1)如:淘宝https://www.taobao.com/(1)默认:(font-size:12px;)(2)审查代码,看到font-size默认为12px(3)用滚轮调整字体大小后,会有以下结果:2)而新浪网:http://www.sina.com.cn/ 的图标就不是用这种方式解决的,而是用图片:
2016-03-19 23:02:49 1166
原创 CSS3复习——小三角、旋转、过渡
1.CSS3的兼容性问题:IE9及以上都支持。2.盒子模型1)当所有的border都是一样的颜色的时候:运行效果:2)如果所有的盒子的颜色都不一样:运行效果:3)假设盒子的宽、高均为0,则:运行效果:4)小三角的写法:html>lang="en"> charset="UTF-8"> 小三角
2016-03-18 17:52:06 2750
原创 一些JS特效
1.http://www.17sucai.com/pins/demoshow/35292.http://www.reverenddanger.com/3.网页特效库http://www.5iweb.com.cn/4.http://www.5iweb.com.cn/resource/5iweb2015113001/index.html
2016-03-17 17:34:28 678
原创 JQuery
1.JavaScript和JQuery实现功能的方法对比以下要实现点击“隐藏”按钮,隐藏盒子的效果: 点击按钮后: 示例代码:html>lang="en"> charset="UTF-8"> 实现点击“隐藏”按钮之后,盒子隐藏 div{ width:200px;
2016-03-16 23:00:18 496
原创 JavaScript
1. CSS hack:针对不同的浏览器写的不同的CSS代码,就叫CSS hack。2.结构层——HTML——语义描述 样式层——CSS——美化渲染 行为层——JavaScript——交互(响应事件)3.JavaScript脚本随着HTML页面的请求,会保存到本地。是运行在客户端的脚本语言,当然现在还有可以编写在服务器端的js。另外,JavaScript代码是可以通过浏览器
2016-03-16 15:48:57 382
原创 Canvas相关的一些问题——画圆
1.在Canvas中绘制圆形的时候可能会出现一些问题,例如下面的代码,想实现一个圆和一个半圆的效果运行代码后,会有如下效果:你会发现两张图都是圆,如果把第二个图的角度改为60度,依然是如上面所示的效果。如何解决这个问题呢?可以考虑使用弧度的方式来表示,如下代码:运行效果:但是,当你把360度改为270度,第二个圆改为90度,如下:
2016-03-15 17:34:58 2069
原创 HTML5+JavaScript制作坦克大战游戏——学习笔记三
注:以下笔记内容来自学习《传智播客》韩顺平老师公开课后,自己整理练习以及一些需要注意的事项。1.接《HTML5+JavaScript制作坦克大战游戏——学习笔记二》解决了以下问题:1)可以同时发送多颗子弹2)在第一颗子弹消亡之前发送第二颗子弹,第一颗子弹不会消失示例代码:(TankBattle.html)html>lang="en"> charset="UT
2016-03-15 15:44:31 2282
原创 HTML5+JavaScript制作坦克大战游戏——学习笔记二
1.在JavaScript通过对象冒充来实现集成。示例代码:html>lang="en"> charset="UTF-8"> 对象冒充练习type="text/javascript"> function Animal(name,age){ this.name=name; this.age=age; thi
2016-03-14 17:04:45 3095
原创 HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
注:学习视频来自传智播客公开课1.离线存储2.语音识别3.图像识别4.HTML5游戏5.CSS3的强大之处:动画和各种选择器6.Stoke:画线 fill:填充7.Canvas相关的代码:html>lang="en"> charset="UTF-8"> 画图 id="cav" width="500px" height="500p
2016-03-11 18:11:49 3417
原创 HTML5+CSS3移动端响应式网页制作
1.响应式可以简单理解为:能够适应所有的设备屏幕2.H5相较于XHTML增强了语义化。3.Box-sizing:border-box;(内减模式)4.固比的布局,固定的模块要用绝对定位的方式将其固定住。5.阴影属性:box-shadow:水平阴影的位置,垂直阴影的位置,模糊羽化,阴影的尺寸,阴影的颜色,内外阴影;默认是外阴影
2016-03-03 21:36:40 4332
原创 LESS
1.LESS是应用比较广泛的预处理器,就想JQuery是js的一个框架,可以把Less理解为相当于是CSS的一个小框架,一个库。2.Less 是基于JavaScript的,在bootstrap中LESS用的比较多。3.Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能。对于希望使用
2016-03-02 22:18:51 427
原创 CSS绘制各种形状
1.伪类:a:hover a:link div:nth-child(n) 伪元素:before after first-letter2.使用before和after必须要有content这个属性3.before和after默认是行内元素,行内元素是没有宽高的。4.加了浮动或者绝对定位的元素,默认把行内元素转换为行内块元素。5.
2016-03-02 21:46:58 2096
原创 CSS3:有雪花的导航栏实例
1.CSS3中带有渐变色背景色处理:(根据不同的)参考链接:http://www.cnblogs.com/luckly-hf/archive/2011/11/14/2248149.html2.
2016-03-01 21:19:49 1206
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人