CSS初始化以及移动端适配
css初始化前言项目均离不开css样式的初始化
自适应页面初始化123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 ...
ES6求交集,并集,差集
ES6求交集,并集,差集1234567891011121314let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);// 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4}// 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {2, 3}// 差集let difference = new Set([...a].filter(x => !b.has(x)));// Set {1}
Git的使用
本篇文章记录了开发中遇到的常用的git方法方便查阅将本地文件夹添加到git仓库
git init;
git add .
git commit -m “初始化”
git remote add origin https://github.com/githubusername/demo.git
git pull –rebase origin master
git push -u origin master
清空git缓存1git rm -r --cached .
product分支master(dev)分支
查看当前分支
1git branch
退出当前分支并创建新分支
1git checkout -b product
这时拉取就变成了
12git pull origin mastergit pull origin product
其他命令
1234git add .git commit -m "some"git push origin productgit push origin master
git强制覆盖本地123git fetch --a ...
Less在浏览器端的使用
Less在浏览器端的使用下载less.js1234567<script src="https://cdn.bootcss.com/less.js/3.9.0/less.js"></script><script src="https://cdn.bootcss.com/less.js/3.9.0/less.min.js"></script><script src="https://cdn.bootcss.com/less.js/3.8.1/less.js"></script><script src="https://cdn.bootcss.com/less.js/3.8.1/less.min.js"></script>//...
更多版本详见bootcdn-Less
引入样式和less.js在引入less.js前先要把你的样式文件引入 :引入你的 .less 样式文件的时候要设置 rel 属性值为 “styles ...
Less详解
Less详解Less相关连接Less英文官网Less中文文档Less源码
Less简介less是一门预处理语言,扩展了css语言,增加了变量、Mixin、函数等特性,使css更易维护和扩展。less完全兼容css语法,可以完全使用css语法。
变量在less中可以使用@符号来定义变量。比较常见的是一些颜色值、宽高之类的属性,他们往往会在一个项目中重复出现,若直接定义,会使后期项目的维护与升级变得十分困难。我们可以通过定义变量将这些属性的值集中到一个地方进行维护。
例如:
1234567891011@top-height: 50px;@letf-width: 100px;@bg-color-primary: #2d2d2d; .left-container { position: absolute; z-index: 1; top: @top-height; left: @left-width; background-color: @bg-color-primary;}
将编译成:
1234567.left-container ...
CSS3实现元素的旋转动画
CSS3实现元素的旋转动画给元素class添加fa-spin即可.
12345678910111213141516171819202122232425.fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear;}@-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }}@keyframes fa-spin { 0% { -webkit-transform: rotate(0deg) ...
滚动条样式
给滚动条设置样式简介当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。
首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。
滚动条的css样式主要有三部分组成:
::-webkit-scrollbar 定义了滚动条整体的样式;
::-webkit-scrollbar-thumb 滑块部分;
::-webkit-scrollbar-thumb 轨道部分;
下面以overflow-y:auto;为例(overflow-x:auto同)
具体实现html代码:
123<div class="test test-1"> <div class="scrollbar"></div></div>
css代码:
123456789101112131415161718192021222324252627.test& ...
兼容toggle事件
引入代码,让高版本的jquery兼容toggle事件在高版本jquery中已经不再支持toggle事件(>v1.9)我们可以这样:
1234567891011121314$.fn.toggle = function( fn, fn2 ) { var args = arguments,guid = fn.guid || $.guid++,i=0, toggle = function( event ) { var lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i; $._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); event.preventDefault(); return args[ lastToggle ].apply( this, arguments ) || false; }; toggle.guid ...
Ajax
ajax标准用法$.ajax123456789101112$.ajax({ type: "POST", url: "/", dataType: "json", data: {}, success: function(data) { }, error: function(XMLHttpRequest, textStatus, errorThrown) { }})
详细写法:
12345678910111213141516171819$.ajax({ url:"/", //请求的url地址 dataType:"json", //返回格式为json async:true,//请求是否异步,默认为异步,这也是ajax重要特性 data:{"id":"value"}, ...
Ejs模板引擎
Ejs模板引擎Ejs模板引擎简介
Ejs模板引擎官网:
和大多数web后端语言一样,express同样为node提供了一套模板语法,它基于node,使用方便.
拥有以下特性:
快速编译与绘制输出
简洁的模板标签:<% %>
自定义分割符(例如:用 替换 <% %>)
引入模板片段
同时支持服务器端和浏览器 JS 环境
JavaScript 中间结果静态缓存
模板静态缓存
兼容 Express 视图系统
Ejs安装12345678sudo cnpm install -g express-generator #需要全局安装express-generatorexpress --view=ejs #按照ejs引擎初始化文件树结构,记得以前版本是express -enpm install #安装依赖SET DEBUG=check-quotation-tool:* & npm start #运行,调试模式
实例123<% if (user) { %> <h2><%= ...