是时候采用SVG Sprite来做背景图了

是时候采用SVG Sprite来做背景图了
SVG Sprite 传统的做法 使用AI或者合并SVG图像,然后用background-postion; 打开AI,新建一个30 * 60(px)的画布,设置好网格和参考线. 用AI打开svg文件,然后复制路径到画布上调整大小 其他就和css-sprite没有差异了 .icon-bg{ display: inline-block; width: 30px; height: 30px; background: url(./res/svg-sprite-background.svg); background-size:100% 100%; verti...

Webpack 入门教程中的一个坑

Webpack 入门教程中的一个坑
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。 接下来我们简单为大家介绍 Webpack 的安装与使用。 安装 Webpack 在安装 Webpack 前,你本地环境需要支持 node.js。 由于 npm 安装速度慢...

10分钟构建一个html5响应式开发框架

10分钟构建一个html5响应式开发框架
前置环境:nodejs  git  保证可以访问github.com 1.以管理员身份运行cmd.exe,安装yo mkdir webapp cd webapp npm install generator-webapp npm install yo -g 2.安装webapp D:\webapp2>yo webapp _-----_ ╭──────────────────────────╮ | | │ 'Allo 'allo! Out of the │ |--(o)--| │ box I include HTML5 │ `---------´ ...

前端工具bower wiredep

前端工具bower wiredep
Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。 详细信息请参考 bower官网 。 几个例子: 1.当前项目需要引入jquery bower install jquery 只需上面简单一条命令就可以将jquery库已经其依赖的库下载下来。直接就可以在项目中引用相关的文件就可以了。 2.使用bower.json { "name": "bower demo", "version": "2.9.0",...

JavaScript异步编程

JavaScript异步编程
JavaScript的单线程特性与异步编程实现方式: 回调函数,发布订阅模式,Promise对象三种,关于Promise介绍的比较简略,决定再详细总结一下,既是对上一篇文章的补充,也能以更深刻的方式分享自己关于异步编程的理解。 前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一。如果你对异步编程没有太...

requirejs压缩工具r.js的build.js配置详解

requirejs压缩工具r.js的build.js配置详解
至于requirejs大家都是很熟悉的了,它的打包工具r.js是非常好用,也非常强大的,但是建于它的配置参数比较多,这里列出一份所有参数的中文详解,方便理解和记忆。 appDir: “some/path/” (选填)app的顶级目录。如果指定该参数,说明您的所有文件都在这个目录下面(包括baseUrl和dir都以这个为根目录)。如果不指定,则以baseUrl参数为准 baseUrl: ”./” ...

requirejs压缩工具r.js 使用介绍

requirejs压缩工具r.js 使用介绍
为了应对日益复杂,大规模的JavaScript开发。我们化整为零,化繁为简。将复杂的逻辑划分一个个小单元,各个击破。这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元。如果上线时都是这些小文件,那将对性能造成一定影响。   RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包。 r.js的压缩工...

jquery代码优化要领

jquery代码优化要领
一、注意定义jQuery变量的时候添加var关键字 这个不仅仅是JQ,在JS中都是必须的 二、如果有多个变量可以使用一个var eg:var index=0,$main=$(".main"); 三、定义jQuery变量是添加$符号 eg:var $main=$(".main");利于代码的阅读性 四、DOM操作请务必记住缓存(cache) DOM操作是非常耗费资源和性能的,一般大部分人喜欢直接这样: $(".main").html("结束"); $(".main").show()...

大牛深度解析大数据可视化、可视分析案例

大牛深度解析大数据可视化、可视分析案例
大数据可视化是个热门话题,在信息安全领域,也由于很多企业希望将大数据转化为信息可视化呈现的各种形式,以便获得更深的洞察力、更好的决策力以及更强的自动化处理能力,数据可视化已经成为网络安全技术的一个重要趋势。 1什么是网络安全可视化?攻击从哪里开始?目的是哪里?哪些地方遭受的攻击最频繁通过大数据?网络安全可视化图,我们可以在几秒钟内回答这些问题,这就是可视化带给我们的效率。大数...

大屏数据可视化设计

大屏数据可视化设计
大屏数据可视化设计方法论很少,正好自己参与过部门多个大屏项目,所以总结了大屏可视化设计的方法。希望通过这篇文章能帮助大家整理思考过程,提高工作效率,同时很好的达到目标,找到兴趣。 下图为参与过的项目大屏主要部分。 该图为Gif动态图,点击放大可见动态 图中数据由于安全保密性,具体文案都作了处理 先给大家讲下大屏自身的特点: 1.面积巨大——用户站远才能看全内容(...
Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: