Web前端
文章平均质量分 87
落花新月
这个作者很懒,什么都没留下…
展开
-
响应式设计:固定比例(弹性盒子)
1.固定的百分比 (聚划算的手机站点)2.决绝两边盒子宽度固定,中间盒子宽度随浏览器的大小而变化的问题(固比固的方法)示例代码:html>lang="en"> charset="UTF-8"> 固比固的方法 /* 清空所有的margin和padding */ *{原创 2015-12-30 16:27:00 · 7478 阅读 · 1 评论 -
Ionic开发跨终端应用——基础入门
1.原创 2016-03-23 21:32:56 · 611 阅读 · 0 评论 -
HTML5+JavaScript制作坦克大战游戏——学习笔记三
注:以下笔记内容来自学习《传智播客》韩顺平老师公开课后,自己整理练习以及一些需要注意的事项。1.接《HTML5+JavaScript制作坦克大战游戏——学习笔记二》解决了以下问题:1)可以同时发送多颗子弹2)在第一颗子弹消亡之前发送第二颗子弹,第一颗子弹不会消失示例代码:(TankBattle.html)html>lang="en"> charset="UT原创 2016-03-15 15:44:31 · 2250 阅读 · 0 评论 -
Bootstrap复习二——栅格系统(form表单示例)
1.关于低版本的IE浏览器兼容性问题的解决: //注意:这部分不是注释上面的代码注释后显示是这样的:-->-->-->-->注意红色部分的内容2.栅格系统:1)Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。2)行(row)”必须包原创 2016-01-18 23:00:18 · 7798 阅读 · 0 评论 -
前端开发——Animation动画
Animation动画是不用触发,就可以动起来的html>lang="en"> charset="UTF-8"> Animation动画的练习 type="text/css"> div{ width: 100px; height: 100px; background:red;原创 2016-04-06 20:24:13 · 1561 阅读 · 0 评论 -
Bootstrap复习四——CSS组件2
1.输入框组:通过在文本输入框 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予.input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。入框组只支持文本输入框 这里请避免使用 元素,因为 WebKit 浏览器不能完全绘制它的样式。示例代码:class="pag原创 2016-02-21 22:16:51 · 490 阅读 · 0 评论 -
前端开发——滚滚屏(没有纵向滚动条)
1.前端流程:1)需求分析2)原型图(低保真)——产品经理/设计师/策划绘制 3)做效果图4)代码实现2.优秀网站欣赏:1)百度钱包 一分钱专享 : https://1.baidu.com/2)微信T管家 http://www.weixint.com/3)QQ PC版 http://im.qq.com/pcqq/3.若要用H原创 2016-04-05 22:55:15 · 7824 阅读 · 0 评论 -
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 · 3379 阅读 · 0 评论 -
JavaScript基础内容复习2
1.类型转换:Number();parseInt();parseFloat();toString();String(); //强转Boolean();2.隐式转换用+号* 号-号/ 号原创 2016-04-01 10:12:32 · 343 阅读 · 0 评论 -
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 · 3071 阅读 · 0 评论 -
div+CSS网页制作
1.CSS初始化:目的就是清除浏览器的默认样式2.字体相关:3.写样式的时候,尽量用class,少用id。因为id的权重太高了,在后面写js的时候,不好提取。4.外边距合并问题:(内盒子有外边距,外盒子没有)可以通过给外面的盒子给overflow:hidden来解决。5.浮动:要么都浮动,要不都不浮动6.logo优化:用h1标签,为了提高原创 2016-01-04 21:46:25 · 3918 阅读 · 1 评论 -
CSS3:垂直居中&圆角矩形
1.如果垂直居中vertical-align:middle;不起作用的话,可以考虑让显示的内容以表格的形式显示。代码如下:#content{ width: 300px; height: 300px; border: #08050a solid 1px; margin: auto; /*居中对齐*/ display: table;} #qingwe原创 2015-12-28 11:55:18 · 2426 阅读 · 0 评论 -
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 · 512 阅读 · 0 评论 -
关于前端的性能优化
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 · 315 阅读 · 0 评论 -
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 · 1155 阅读 · 0 评论 -
CSS3:制作阴影
1. (图片取自W3C school)示例代码:#shad{ width: 200px; height: 200px; border: #5f5f5f solid 1px; border-radius: 10px; box-shadow:原创 2015-12-28 14:39:46 · 421 阅读 · 0 评论 -
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 · 1228 阅读 · 0 评论 -
Node.Js简介与安装
1.Node.js的原理正是它使用了Google的V8虚拟机 (Google的Chrome浏览器使用的JavaScript执行环境),来解释和执行JavaScript代码。2.Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScrip原创 2015-12-11 14:43:27 · 496 阅读 · 0 评论 -
文件上传那些事儿
最近M端项目中涉及到图片上传功能,现把项目中遇到的一些问题及解决办法分享如下,与各位共同探讨:一、相关需求:1. 客户端上限10M2. 服务器端上限2M3. 文件过滤4. 显示上传进度5. 异步上传6. 多文件上传二、需求分析:1. 实现2,可使用canvas在前端实现压缩(base64);2. 实1、3,可采用file.size及/imag转载 2016-10-25 16:59:12 · 876 阅读 · 0 评论 -
WebViewJavascriptBridge详细使用
WebViewJavascriptBridge详细使用时间 2016-03-09 11:34:32 标哥的技术博客原文 http://www.henishuo.com/webviewjavascriptbridge-detail-use/ 主题 JavaScript 前言WebViewJava转载 2016-06-21 18:41:31 · 1826 阅读 · 0 评论 -
JQuery操作DOM
特别说明:慕课网学习整理 1. attr()控制元素属性 attr()方法设置元素属性 点我就变 我改变后的地址是: $("#a1").attr("href" , "www.imooc.com"); var $url = $(原创 2016-06-21 18:38:49 · 392 阅读 · 0 评论 -
小提示
效果:class="test"> class="info"> class="tips"> 测试测试测试 class="s_dw"> type="text/css"> .test { position:原创 2016-06-07 13:44:28 · 405 阅读 · 0 评论 -
Angular 方法
1. angular.bootstrapUse this function to manually start up angular application.Angular will detect if it has been loaded into the browser more than once and only allow the first loaded script to b原创 2016-06-01 18:48:23 · 934 阅读 · 0 评论 -
Less相关
以下三个链接就够啦:首页:http://www.bootcss.com/p/lesscss/语言特性: http://less.bootcss.com/features/函数: http://less.bootcss.com/functions/原创 2016-05-27 16:02:19 · 552 阅读 · 0 评论 -
AngularJS中的路由、模块化以及依赖注入
1.实际的项目案例1)一般来说一个应用有一个主文件index.html, 用来加载js文件等。并且放一个根的视图ng-view2)所有的js文件都放在js文件夹下面3)使用ngRouter进行视图之间的路由(根据URL进行切换,URL中的#是为了防止浏览器向后台提交请求的,相当于内部的锚点)4)控制器是用来控制视图的5)AngularJS中一切都是从模块(module)开始的。原创 2016-05-15 23:58:30 · 759 阅读 · 0 评论 -
Angular入门2
1.MVC框架(最终目的:模块化、复用)controller(控制器,把公共的东西抽取成一个service)1)把操作DOM的操作封装到指令directive里面去2)控制器controller之间的互相调用会导致非常强的耦合,所以交互一般通过scope或者数据模型(model)上面的事件来操作。2.模块化 module3.指令系统 (自定义标签,ng-xxx原创 2016-05-15 23:14:05 · 641 阅读 · 0 评论 -
Angular JS入门
1.Angular JS是一个独立的脚本库。2.Angular应用解析:1)模板(HTML+CSS)2)应用程序逻辑和行为:JavaScript定义的控制器3)模型数据Data:Angular作用域对象,可以是JavaScript对象、数组或者基本类型。3.学习Angular要搭建的环境:1)安装node2)安装git工具(克隆clone)4.ng-原创 2016-05-15 20:59:28 · 816 阅读 · 0 评论 -
Configuration of GitHub in webstorm
1.Github configuration:1)download github:https://git-scm.com/download ——>install it2) open file——>settings——>Version Control——>Github——>input the login name and password ——>click "test" button原创 2016-04-18 19:51:43 · 416 阅读 · 0 评论 -
关于居中
1.水平居中:行内元素:1)文本以及图片等行内元素的居中:父元素 text-align:center; 如下:html>lang="en"> charset="UTF-8"> 水平居中 div{margin-top: 20px; } .txt,.imgAlign{border:1px solid pink;}原创 2016-05-02 02:37:58 · 458 阅读 · 0 评论 -
响应式手机网站——视口约束&媒体查询
1.http://mediaqueri.es/ 响应式网站2.用谷歌浏览器模仿各种移动设备。3.设备检测: 1)device.js库 (图片截自传智视频)2)页面跳转:window.location=URL;4.检测屏幕更改页面的CSS样式:(有点像hao360换肤原创 2016-03-21 21:38:23 · 2854 阅读 · 0 评论 -
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 · 1277 阅读 · 0 评论 -
能够用手指滑动的焦点轮播图——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 · 8698 阅读 · 0 评论 -
梅兰商场
1.CSS初始化(CSS reset)2.CSS代码压缩(也就是去掉空格,折行显示),会提高性能。3.原创 2016-04-14 00:47:52 · 3316 阅读 · 0 评论 -
CSS3特效:2D转换&小案例
一、2D转换之移动1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。2. translate(x,y) //定义2D转换3.示例:html>lang="en"> charset="UTF-8"> Special Effect div{原创 2015-12-28 20:30:14 · 2048 阅读 · 0 评论 -
CSS3复习——小三角、旋转、过渡
1.CSS3的兼容性问题:IE9及以上都支持。2.盒子模型1)当所有的border都是一样的颜色的时候:运行效果:2)如果所有的盒子的颜色都不一样:运行效果:3)假设盒子的宽、高均为0,则:运行效果:4)小三角的写法:html>lang="en"> charset="UTF-8"> 小三角原创 2016-03-18 17:52:06 · 2709 阅读 · 0 评论 -
Input标签新增的属性&Range调背景色
1.HTML5中input标签新增加的属性:(不同的浏览器显示的效果会不一样)1)email2)date3)url4)color5)number6)range7)optgroup8)datalist示例代码如下: 邮箱:type="email"> 日期:type="date"> 链接:type="url"> 颜色:type原创 2015-12-23 11:57:05 · 6984 阅读 · 0 评论 -
HTML5新增加的标签&表单新增属性
1.以前的盒子都有标签,现在都用语义化的标签,例如:头标签导航栏标签侧栏标签文章内容标签页脚标签章节、页眉、栏目代码如下:头部导航 左侧栏 文章页脚添加样式:header,nav,section,footer{ width: 1300px; height: 50px; border: solid原创 2015-12-22 22:54:01 · 4381 阅读 · 0 评论 -
HTML5基础标签与SEO
1.Hn标签,一般一个页面里面只用一个H1标签,作为主要的信息标题,这样便于SEO。2.P标签,段落标签。3.语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.事实上SEO最有效的一种办法,就是对网页的HTML结构进行重构,实质上就是语义化。4.横线 (在Webstorm中:hr+Tab)换行原创 2015-12-21 18:07:31 · 10880 阅读 · 0 评论 -
HTML-浮动与清除浮动
1.浮动:float:left;right;none2.浮动的模块是不占用位置的,如下:如果给上面的div1和div2加上左浮动,则div3就会上移,出现如下所示效果:为了让div1和div2占有它原来的位置,让div3显示在它们下面,则要清除浮动。关于浮动的清除有以下几种:1)clear2)添加额外的标签3)伪元素3.开发工具:WebSto原创 2015-12-10 16:41:50 · 19377 阅读 · 0 评论 -
前端开发-HTML5基础
1.DNS:domain name system(域名系统)2.原创 2015-12-18 19:59:37 · 522 阅读 · 0 评论