前端开发难免遇到很多地方需要图片来展示,以往我们都会使用img.background.font文件实现图片,本人使用bootstrap,但由于前端比较火的bootstrap的font库太少不能满足我们的需求,很多时候我们会使用阿里提供http://www.iconfont.cn/search来寻找图片和自定义iconfont文件 正文 1.登陆http://www.iconfont.cn/search选择图片到购物车 2.生成iconfont代码 点击购物车下载代码[/size] 3.使用 引入…

http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具的优势 HttpWatch 和 Firebug绝大多数前端开发人员都比较熟悉,但是HttpWatch虽然可以抓到每个 HTTP 请求的全部数据,但无法修改返回的数据:尽管Firebug可以修改 HTML和CSS,但是在调试CGI接口时无法干预HTTP请求的参数值和CGI返回的数据.而 Fiddler…

自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http://www.iconfont.cn/:2.制作svg格式的图标,并上传至阿里图标库iconfont. 具体操作: step1:  从阿里iconfont下载图标本地包 step2: 从本地文件里摘出iconfont.css,iconfont.ttf, iconfont.js三个文件,放入到自己的项目…

这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 Sublime Text 2 Build 2221,而 Sublime Text 3 为测试阶段,建议下载正式版  注册机SublimeTextKeygen下载 打开注册机,先点中间 “Patch key” 打开 “sublime_text.exe” 文件确认,再随意修改下 “Name” 然后 “G…

最近找到一款非常好用的开发利器,VSCode.一直认为微软做的东西都很一般,这个软件让我刮目相看了. 之前使用webstorm卡的不行,换了这个非常好用. 用着还不错,这里记录下一些使用的心得. VS Code的官网: https://code.visualstudio.com/ VS Code的官方基础教程: https://code.visualstudio.com/docs 常用快捷键 Ctrl + /:快速注释或取消注释: Ctrl + o:打开当前文件所在目录: Ctrl + p:打开…

各位从事前端开发的童鞋们,大家每天coding && coding,然后F5 && F5,今天推荐一个静态文件在浏览器中自动更新的扩展 livereload,不同手动刷新也能实时预览新代码构建的页面. 软件准备:1.新版的sublime text(sublime text 2 无法下载livereload插件) 下载地址 https://www.sublimetext.com/3 新版本安装配置说明 https://www.douban.com/note/474507021…

转自:http://www.jianshu.com/p/ff7798aa4548 Brackets是Adobe开发的web编辑器,是一款免费开源.多平台支持的软件,并在于GitHub上维护.Brackets支持增加插件以提供额外的功能扩展,下面的文章将介绍一些我常用的插件以及我使用期间的心路历程. Brackets网站的介绍图片 这就是Brackets的介绍图片,可以看出,他们对“快速编辑”这一功能是非常推荐的.快速编辑就是当你的鼠标点到某元素的ID或者Class时,Ctrl+E 迅速为您查找该…

1.前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了.于是乎博主打算另辟蹊径,找找基于微信开发的移动端UI组件,最后找到了微信官方开发的一套前端组件:WeUI. 2.WeUI基本介绍 2.1 WeUI概述 WeUI.微信公众号开发的瑞士军刀.W…

是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器, 最懂得web设计. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. 专注可视化工具…

这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim等我曾用过的,高端开发工具还是用这个顺手.智能. 1.切身感受到的好处: 1)灵活的默认快捷键.起初他的默认快捷键和常用的不太一样,感觉不适应(当然在setting->keymap中可以切换你常用编辑器的快捷键,如eclipse.vim.Mac OS等),但是用惯了发现设计的合理性,如撤销和前进,常…

在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写的效率而诞生的,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发. 你可能听说过一款强大的功能相似的工具:Zen Coding,那个比较老了,而现在的 Emmet 则是 Zen Coding 的升级版,由 Zen Codin…

前端开发人员收到测试发来的 bug 后,通常比较头疼复现的问题. 即使测试人员录了视频,照着一步步操作也不一定能复现,例如bug是与当时的数据相关的. 为了解决这个问题,Firefox 推出了一个重磅新功能:web reply. 看名字就知道它的功能是"页面回放",这个回放可不是像录屏一样,而是完全真实的回放: JavaScript.DOM.CSS 的行为都完全像录制时一样重播. 而且在重放时,你可以随意检查页面上的各种元素.查看 console 日志.断点调试. 想象一下,测试把页面…

前言:年前的两个星期,学习了下微信公众号的开发.后端基本能够基于盛派的第三方sdk能搞定大部分事宜.剩下的就是前端了,关于手机端的浏览器的兼容性,一直是博主的一块心病,因为博主一直专注于bootstrap的相关组件学习,知道bootstrap做响应式没有任何问题,所以曾经尝试过直接用bootstrap来布局,对于一些简单的栅格布局,bootstrap没有任何问题,可是一旦涉及前端组件这一块的时候,总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了.于是乎博主打算另辟蹊径,找找…

http://blog.csdn.net/conquer0715/article/details/51181391 概述 在HTML5盛行的互联网时代,涌现诸多的前端html/css/js框架,基于其 适用范围.licence.发展前景等因素,本人对比总结出其中的两个佼佼者,分别是侧重页面美化展现的 Bootstrap 和侧重页面逻辑控制的 AngularJS ,基于 Bootstrap + AngularJS 创建HTML5应用,定不会让你失望,甚至让你兴奋至极! PS:唯一的遗憾是对不支持H…

　安装了phpstorm之后，想配置svn，结果在file->settings->Version Contorl->subversion->with conmand line client配置成 D:\Program Files\TortoiseSVN\bin\tortoisePro.exe(一般的svn程序文件) 　　已经安装的路径地址之后，一直提示 “Can’t use Subversion command line client: ‘D:\Program Files\Tort…

介绍 工欲善其事必先利其器,开发工具方面选择一个自己用的顺手的,这里就用VSCode 安装参考 https://www.runoob.com/w3cnote/vscode-tutorial.html 下载太慢参考 https://blog.csdn.net/ZoeCXY/article/details/124391379 使用 文件目录 没啥解释的,右键快速打开explorer 插件 也没啥解释的,Vetur,ESLint git 还是没啥解释的,clone,branch,switch,pull…

1.Ctrl+N ,新建文件,新建文件后需要先进行保存(Ctrl+S)并设置文件扩展名: 2.! +Tab,快速创建H5框架,文件扩展名必须为html: 3.Ctrl+Shift+P ,调出命令列表,我们可以从列表中找出经常使用的快捷键. 4.Shift+Alt+F , 格式化代码 5.Ctrl+K+C,注释代码…

接着昨天的继续... ... 4.嵌套: HTML部分 <table> <tr> <th colspan="3">测试列表标题</th> </tr> <tr> <td>测试文字</td> <td>测试文字</td> <td>测试文字</td> </tr> <tr> <td>测试文字</td> &l…

摘录less官网的解释: LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语言.环境中使用,包括浏览器端.桌面客户端.服务端. 以上是less官方解释,说下本菜的理解:less类似css的jquery,一个为css封装的库. less最终还是被编译成css被读取. 1.less定义变量: /*声明变量*/ @var_width:120px; /*使…

Bootstrap 的文件结构 读者可以直接从 GitHub 下载到 Bootstrap 源码,本地解压后可以看到这样的目录结构:docs.img.jquery-ui- bootstrap.js 和 less.其中最为重要的是“docs”下的 CSS 样式文件,“less”中的编译文件和“js”下的 jQuery 插件. Bootstrap 的安装 关于如何应用提取出来的文件大致有两步:第一是如何安装 Bootstrap 的基本样式,第二是如何调用 Bootstrap 的 jQuery 插件,我…

[微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程   在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth.微信浏览器内打开,照样能看你源码~ 使用fiddler来抓包 需要先做一些简单的准备工作: 一台带有无线网卡的PC或者笔记本电脑,然后将电脑和手机连接到同一个Wi-Fi网络中,并且保证二者是在同一个ip网段内的: 在电脑上安装 Fiddler; 打开Fiddler在菜单栏中点击 Tools - Fiddler Opt…

大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实现,不过可供使用的技术方案还不少,这些都归功于新的Web技术的应用. 常见的小图标应用方案 1. 最简单的还是图片,图片 这个方案是使用最广的方案,简单有效.jQuery UI使用的就是这样的方案.jQuery UI是把所有需要用到的小图标放置在一张大的sprite图片中,类似如下的图片: 用法也很…

在iOS的开发中,各种图标的使用是不可避免的,如果把全部图标做成图片放在项目中,那么随着项目的逐渐庞大起来,图片所占的地方就会越来越大,安装包也就随之变大了,如果图标需要根据不同的场景改变使用不同的颜色,那么,如果做成图片就需要多张不同颜色的图片,对于能更换皮肤的APP来说,安装包也就会更大,为了让APP的安装包瘦身,iconfont就产生了.关于iconfont的介绍与制作方式就暂时不进行介绍了. 第一步:获取iconfont文件. 公司会有UI做图,让他们提供文件就好了,如果自己学习测试或者…

概述 最近,有客户向我们请求开发一个前端下拉控件,需求是显示了一个列表,其中包含可由用户单独选择的项目控件,该控件将在下拉列表中显示多选TreeView(树形图). 如今WijmoJS已经实现了该控件--DropDownTree,本文将主要介绍如何创建自定义DropDownTree控件以及其源代码. DropDownTree 控件源代码 HTML <div class="container"> <h1> DropDownTree Control </h1&…

Awesome Mac  这个仓库主要是收集非常好用的Mac应用程序.软件以及工具,主要面向开发者和设计师.有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章<工具武装的前端开发工程师>,于是建了这么一个仓库,持续更新作为补充,搜集更多好用的软件工具.请Star.Pull Request或者使劲搓它 issues 给我推荐优秀好用的Mac应用,很显然我是一个资深Mac用户,我需要它们帮助我快乐.高效的工作,同时也分享给你.格式参照awesome的清单. https://github…

2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心推荐的文章能够帮助到您. jQuery 插件和教程 精心挑选:精美的 jQuery 加载动画和进度条插件 精心挑选:10款基于 jQuery 的图片360度旋转插件 精心挑选:几款实用的 jQ…

一.规范目的 1.1  概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档. 二.文件规范 2.1  文件命名规则 文件名称统一用小写的英文字母.数字和下划线的组合,其中不得包含汉字.空格和特殊字符:命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中…

Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧,官方网址:https://nodejs.org/ NodeJS 既可以为我们提供一个服务器端的 Web 环境,又可以提供一个命令行的工具,既然做 Web 前端开发,那就是我们必然选择的工具了. 为了解决包管理的问题,NodeJS…

<Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您. HTML5 & CSS3 太赞了!超炫的页面切换动画效果[附源码下载] 时尚设计!三种奇特的网格加载效果[附源码下载] 3D Grid Effect – 使…

<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您. HTML5 & CSS3 在网站制作中随时可用的10个 HTML5 代码片段 值得拥有!精心推荐几款超实用的 CSS 开发工具 优秀工具推荐:超实用的 C…