最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊,分页的样式.来张截图: 你在首页的底部也可以看到这样一个分页栏:是不是看上去还不错?下面就来看看这是如何实现的吧~ 第一种方法:利用border 第一种方法是借助border属性 hack 出三角形,然后通过一个矩形拼接两个三角形最终制造出一个平行四边形.为什么使用border可以产生三角形呢?先来看看一张图片: 看了图中的三个小图形的变化过程,你应该已经清楚了一半.其实 hack 出三角形只需要两个条件,第一,元素本身的长宽为0:其次

ubuntu 18 下配置 WebStorm 编译 scss 标签(空格分隔): IDE 安装Ruby: sudo apt-get install ruby ruby -v ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu] 安装sass: npm install -g sass WebStorm设置: File - Settings - Tools - File Watchers - Add(+)

下载webstorm 下载node.js编译器npm   Webstorm的安装很简单.但如果没有Java For Mac 环境打开Webstorm时会有提示,点击提示会跳转下载链接,下载安装就好. 安装tsc编译命令   node.js 安装pkg包一路点next后进入终端,键入npm验证是否成功.   npm 安装成功后继续安装tsc编译器,键入:npm install -g typescript (如果有权限问题就加上sudo即:sudo npm install -g typescript

旧版的chrome有个support for sass,但是新版chrome没有这个功能了.看到网上提供的方法比较多,也很乱,旧版新版的都有.而且不能指定自己所需要的路径. 所以就做了下改版. sass和less都有提供一个map文件,这个文件是用来干嘛的呢? .map文件是一个json格式的文件,可以直接调试less/sass源文件. ======================================================== 先是less配置(sass配置基本与less一

Webstorm 配置less编译的Arguments参数: $FileName$ $FileParentDir$\ccy\ccy1\ccy2\$FileNameWithoutExtension$.css --source-map 路径的根目录为本文件所在的上一层父文件 如下图所示: Webstorm 配置scss编译的Arguments参数(配置的路径必须要先存在!): --no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNam

Accessors are only available when targeting ECMAscript 5 and higher. 解决办法: File Watchers 在tsc.cmd命令上加参数--target ES5 如果代码里报错 可以在这里设置ES5规则

有一次 ,我改了公共组件里的好多组件 ,然后我肯定是哪里改的不对 ,出语法错误了 ,但是我的 webstorm 编译并没有报错,然后我就手动一点点 改 ,去看 ,最后还是没有找到 ,我就把文件夹给删了,重新 放进来一个master 分支上的 ,这样就导致之前是谁提的代码 ,git 左边那个记录全部是我了 ,其实最开始我担心会出现这个问题,我不知道会不会这样,我重新放进来之后特意查看了一下,那时候没出现这个问题 ,不是全都是我 ,我也是后来好久之后才发现这个文件夹下面全都变成了我,这我就很懵逼了

一.环境搭建 Cordova 环境配置之前,应先下载安装 Node.js ,中文官网:http://nodejs.cn/. 以管理员身份运行 cmd 命令行工具: 1.查看 Node.js 是否已安装成功,命令为:node -v 2.查看 npm 是否已安装,命令为:npm -v 3.Cordova 安装,命令为:npm install -g cordova,C:\Users\Administrator\AppData\Roaming\npm会生成对应的.cmd文件 如果慢,可以修改镜像,再进行

一.软件安装 1.nodejs 2.npm 3.Cordova 如果慢,可以修改镜像,再进行安装. npm config set registry http://registry.cnpmjs.org npm info underscore npm install -g cordova 安装成功后做版本查看测试 4.ionic 版本查看 5.Java JAVA_HOME=C:\Program Files\Java\jdk1.8.0_101 6.ant 7.Andorid环境安装 path环境变量

WebStorm 编译 es6 与 scss 的教程: http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/https://www.jetbrains.com/webstorm/help/transpiling-sass-less-and-scss-to-css.html *****************************************  File Watcher  **

使用webstorm编译: 1.新建一个工程(最基本的工程) 2.在webstorm的控制台,使用命令行     cnpm install webpack  -g  全局安装 3.安装完后,可以使用   webpack -h  查看webpack是否安装完成 4.之后,cnpm install webpack --save-dev   将webpack 安装到项目的依赖项 5.最后,安装  loader  ,cnpm install --save-dev  css-loader 和cnpm in

最近在进行百度前端技术学院的任务,知道自己基础薄弱,可没想到弱到这种地步,同时在安装各种软件的同时遇到了各种坑,查阅了各种资料,一个个解决的时候也发现自己凌乱了.学习总结,在脑海中形成自己的学习系统才是最重要的.用了各种博客的后台,发现mardown很好用,可是作品部落的不验证不能上传图片,还是改成博客园的吧,这样以后查阅起来也方便.因为很多资料都是在博客园找的,让自己受益很多.也希望自己的mark的东西可以在帮助自己的同时,也帮助别人.废话不说了,进入正题. 安装sass,compass sa

重装了 webstorm ,从10升级到了2016 一升不要紧,打开老项目,开启webpakc-dev-server,然后改代码,发现浏览器不会自动刷新了!!! 这可急死我了,各种卸载webpack.webpack-dev-server,安装各种版本,调试.各种查资料查文档,都讲的是参数配置(webpack-dev-server启动就会自刷新,参数都是其它用途). 然后结果都是 no work!!! 难道以后我的工作以后就在 不断的  手动编译中度过吗???????,不甘心!!! 废话不多说了,

1.  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128/p/4226058.html. 2.  安装SASS,运行cmd命令,输入: gem install sass 安装成功后打开目录C:\Ruby21-x64\bin,可见sass.bat.scss.bat文件. 3.  打开WebStorm,点File-->Settings,找到File Watc

1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps”  及“Enable CSS source maps”. 2.打开WebStorm,点File-->Settings,找到File Watchers,点右侧的“+”,选择LESS,更改对应项的设置如下: Program:C:\Users\wind\AppData\Roaming\npm\lessc.cmd   (les

webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 scss安装:http://www.w3cplus.com/sassguide/install.html 打开webstorm: 点击左上角的File→Settings→File Watchers 在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss -----------------------------------------------------

webstorm自带less,不过要编译的话需要nodejs环境. 首先去node的主页下载对应版本的nodejs然后安装,下载地址:http://nodejs.org/ 安装完之后打开命令提示符(win+r),分别输入node -v以及npm -v如果返回版本号说明你安装成功了. 接下来就可以安装less了,命令提示符npm进入npm管理器,然后npm install less开始下载less,默认安装目录在用户名\node_modules这里面. 到这里less安装完毕了,接下来配置webs

1. 打开Nodejs官网http://www.nodejs.org/,点“DOWNLOADS”,点64-bit下载“node-v0.10.33-x64.msi”. 2. 下载好后,双击“node-v0.10.33-x64.msi”,按照默认选项安装Nodejs,默认安装路径为:C:\Program Files\nodejs. 3. “开始”-->cmd,打开cmd程序,输入“node -v”,出现” v0.10.33”; 输入“npm -v”,出现” 1.4.28”,说明Nodejs和npm都

WebStorm是一个非常棒的Web前端开发编辑器,被程序猿们成为“最智能的JavaScript IDE”.对HTML5.Bootstrap框架.Node.js等都有完美支持.目前最新版本为WebStorm 8.0.x.下面就介绍一下如何在WebStorm 8.0安装LESS编译环境. 1.首先安装WebStorm 8.0 在官方下载并安装WebStorm 8.0.x,具体步骤就不说了,没什么特别之处. 2.安装NodeJs NodeJs官方版本有32位和64位,可以根据实际需要进行选择安装.

css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN 在chrome中我们通过sourcemap可以直接调试less源文件文件,这是一个非常强大的功能. 下面由我为大家道来 1.在chrome中开启dev工具,开启容许CSS source maps设置 2.webstorm中只要创建了less扩展名的文件

关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很多教程上都有,就不详细说了. 一般来说,我们期望scss目录和css目录是单独分开的,在scss目录中建立index.scss的文件.会弹出如上提示,点击yes,如果不小心点了no的话-- 一样可以进入这个页面. 如果这样的默认路径,编译好的css文件是会直接生成在scss文件下. 但是我们可以将A