发表于 | 更新于

mixins.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
@mixin text-line-clamp($line: 2) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

@mixin glyphicon($mark) {
  content: '#{$mark}';
  font-family: 'Glyphicons Halflings';
}

@mixin image-zoom() {
  transition: all 0.4s ease-out;
  &:hover {
    transform: scale(1.15);
  }
}

@mixin object-fit() {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

// Safari image border-radius
@mixin mask-image() {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

@mixin readmore($color: $pink) {
  color: $color;
  text-transform: uppercase;
  text-decoration: none;
  &::after {
    @include glyphicon('\e072');
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    transition: padding .25s;
    transform: scale(.8);
    -webkit-transform: scale(.8);
  }

  &:hover::after,
  &:focus::after,
  &:active::after {
    padding-left: 8px;
  }
}

@mixin position($pos:absolute,$top:0,$con:'',$w:100%,$h:100%){
  position: $pos;
  top: $top;
  content: $con;
  display: inline-block;
  width: $w;
  height: $h;
}

@mixin change-color($normal: $primary-shade, $highlight: $primary-dark) {
  color: $normal;

  &:hover,
  &:active {
    color: $highlight;
  }
}

@mixin moveup() {
  transform: translateY(-10px);
}

@mixin add-shadow($x:4px, $y:6px, $width:8px, $color: rgba(0, 0, 0, .3)) {
  box-shadow: $x $y $width $color;
}


@mixin content-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02rem;
}

@mixin page-title {
  font-size: 32px;
  font-weight: 900;
  line-height: 40px;

  @media (max-width: 1200px) {
    font-size: 30px;
    line-height: 1.4;
    letter-spacing: -0.33px;
  }
}


@mixin flex($hov: space-between, $col: center) {
  display: flex;
  justify-content: $hov;
  align-items: $col;
}

@mixin bgImg($w: 100%, $h: 100%, $img: "", $size: 100%) {
  display: inline-block;
  width: $w;
  height: $h;
  background: url($img) no-repeat center;
  background-size: $size;
}

@mixin bg-width-full($bg) {
  background: $bg;
  position: relative;
  &::before,
  &::after {
    @include position($w: 20%);
    left: -20%;
    background: $bg;
  }
  &::after {
    right: -20%;
    left: auto;
  }
}

@mixin button($w: 189px, $h: 53px, $fcolor: #000, $bg: $ui-yellow,$h-bg: $dark-yellow,
$fz: 16px) {
  display: inline-block;
  width: $w;
  height: $h;
  line-height: $h;
  color: $fcolor;
  text-transform: uppercase;
  text-decoration: none;
  background: $bg;
  border-color: $bg;
  font-size: $fz;
  font-weight: bold;
  &:hover {
    background: $h-bg;
    border-color: $h-bg;
  }
}

@mixin down-arrow($color: $white, $deg: 45deg) {
  border-right: 2px solid $color;
  border-bottom: 2px solid $color;
  transform: rotate($deg);
}

@mixin hook-icon($color: $white, $deg: -45deg) {
  border-left: 2px solid $color;
  border-bottom: 2px solid $color;
  transform: rotate($deg);
}

@mixin circular($w, $h, $bg) {
  display: inline-block;
  width: $w;
  height: $h;
  border-radius: 50%;
  background-color: $bg;
}

@mixin input-text(
  $p: 10px,
  $h: 56px,
  $w: 100%,
  $br: 16px,
  $bg: $input-bg,
  $fs: 15px,
  $color: $dusk
) {
  box-sizing: border-box;
  padding: $p;
  border: none;
  border-radius: $br;
  background: none;
  background-color: $bg;
  width: $w;
  height: $h;
  outline: none;
  font-size: $fs;
  color: $color;
}

@mixin select-arrow() {
  background: $input-bg url(../images/select-arrow.png) no-repeat
    calc(100% - 16px) center;
  background-size: 18px auto;
}

@mixin disabled-button {
  background: #f5f5f5;
  border: 2px solid $disabled;
  color: $disabled;
  cursor: auto;
}

发表于 | 更新于

撤下上1次push提交,不留历史记录(记得备份)

1
2
3
1. git log 
2. git reset --hard a517075c66cec4f44c336//回退到a517075c66cec4f44c336版本, 这一步之前一定要保存好文件，之后就什么都没有了
3. git push origin feature/CITC-99 -f //强制push <> -f,不强推会冲突，推不上，必须强推

git reset –hard ID之后,本地文件清空找回方法(如果之前每次提交之前都有git stash的话，按以下步骤可以找回)

1
2
3
4
5
6
7
1. git fsck --lost-found
2. 找到“悬空 commit　ID”，忽略“悬空 blob”，
3. git show 7480ed4bba，从上到下，一个个ID找下去，直到找到文件为止
4. 找到后，git merge 7480ed4bba, 退出
5. git stash，再次备份文件，把文件重命名，使git reset --hard后不被丢失
6. 再次git reset --hard 6bd3af08e008ff　恢复到撤消之前的代码，无影无踪；
7. 手动把备份的文件恢复

发表于 | 更新于

e-mail格式

1
2
3
4
5
6
function emailTest(obj) {
    var myreg = /^([a-zA-Z0-9\-\.]+)@([a-zA-Z0-9\-\.]+)\.([a-zA-Z]{2,5})$/;
    if (!myreg.test(obj)) {
    return false;
    }
}

val is empty

1
2
3
function isValEmpty(obj) {
    return obj.length == 0 ? false : true
}

form-textarea

1
2
3
4
function stripHTML(text) {
    var regex = /(<([^>]+)>)/ig;
    return text.replace(regex, "");
}

form-checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function checkboxVerification(checkbox) {
    var $checkboxWrapper =  checkbox.parents('.form-type-checkbox');
    if(checkbox.is(':checked')) {
    $checkboxWrapper.removeClass('empty-error');
    $checkboxWrapper.find('.empty-error-message').remove();
    } else {
    if(isRequired) {
        isRequired = false;
    }
    if(!$checkboxWrapper.hasClass('empty-error')){
        $checkboxWrapper.addClass('empty-error');
        $checkboxWrapper.append("<p class='empty-error-message'>" +  checkbox.attr('data-webform-required-error') + "</p>");
    }
    }
}

form-email

1
2
3
4
5
6
7
8
9
10
function emailVerification (email) {
    if(emailTest(email.val()) == false) {
    email.parent().addClass('empty-error');
    if(isRequired) {
        isRequired = false;
    }
    } else {
    email.parent().removeClass('empty-error');
    }
}
阅读全文 »

发表于 | 更新于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

1
2
3
4
npm install 或：npm install -g hexo  //全局安装hexo
hexo server  //启动服务器
//打开浏览器, 在地址栏输入http://localhost:4000（如果打不开，提示：localhost 意外终止了连接，
//电脑端口被占用了，hexo server -p 5000，换成5000端口，果断可以访问 http://localhost:5000）

More info: Server

部署网站需要的配置

1
2
3
4
5
添加在_config.yml最后面:
deploy:
  type:
git repo: https://xmh.com/my/my.io.git/  //远程文件
branch: master  //远程分支

安装部署使用到的git插件.

1
npm install hexo-deployer-git --save

新建一篇文章

1
2
3
hexo new "My New Post"
hexo new post CSS-ie6
hexo new page CSS3-Grid.md

编辑模板

1
2
路径:hexo\source\_posts
模板:例CSS-ie6.md

More info: Writing

发表草稿

1
hexo publish [layout] <filename>

生成静态文件

1
hexo g

More info: Generating

部署网站

1
2
3
4
hexo d
//如果在部署出现错误信息如果下: ERROR Deployer not found: git
//需要安装git插件: npm install hexo-deployer-git --save
//进行自动部署网站, 注意部署前需要重新生成网站hexo g, 每一次修改后都需要重新生成网站

More info: Deployment

清除缓存文件

1
hexo clean

发表于 | 更新于

检测 touch 设备

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 var isPC, hClick='click';
 if ('ontouchstart' in window) {
   $('body').addClass('is-touch');
   isPC = false;
   hClick = 'touchstart';
 } else {
   $('body').addClass('no-touch');
   isPC = true;
 }


$('.nav-tabs').once('.active').each(function () {		
	if (!isPC) {
		$('.navbar-toggle').on(hClick, function() {
			......
		})
	}
})

发表于 | 更新于

share HTML 加copy

1
2
3
4
5
6
7
8
9
10
<div class="addtoany_list">
  <div class="share-button"><em></em><span>分享至</span></div>
  <div class="social-share"  data-initialized="true">
   <a class="social-share-icon icon-weibo" href="#">&nbsp;</a>
   <a class="social-share-icon icon-wechat" href="#">&nbsp;</a>
   <a class="social-share-icon icon-copy" href="javascript:">&nbsp;</a>
   <div class="copy-success">复制成功</div>
   <div class="copy-error">请手动"复制"</div>           
  </div>
</div>
阅读全文 »

发表于 | 更新于

CSS Columns 是一种定义了多栏布局的模块，它能够表现出将内容在列之间怎么流动的以及间隙和分割线怎么使用。浏览器兼容性: IE10,IE10+

More info: CSS Columns 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. columns /* 3 30px */
. column-count /* 最理想的分栏数目 */
. column-width /* 每栏的最小宽度 */
. column-rule /* 使用方法同border */
. column-rule-width
. column-rule-style
. column-rule-color
. column-gap /* 栏目之间的水平间隙 */
. column-fill /* 定义栏目的高度是否统一 */
. column-span /* all, none */


column-count: 浏览器缩放保持设定数量的列
column-width: 浏览器缩放不能容纳足够的列，列的数量会 -1，直至单列

同时声明这两个属性时，column-count是最大列数，并且column-width是这些列的最小宽度。
columns: 120px;         /* column-width: 120px; column-count: auto */
columns: auto 120px;    /* column-width: 120px; column-count: auto */
columns: 2;             /* column-width: auto; column-count: 2 */
columns: 2 auto;        /* column-width: auto; column-count: 2 */
columns: auto;          /* column-width: auto; column-count: auto */
columns: auto auto;       /* column-width: auto; column-count: auto */

阅读全文 »

发表于 | 更新于

promise

promise: 承诺，许诺
作用： 解决异步问题 (例如:用户登录->获取用户信息)
传统方式，大部分用回调函数，事件

阅读全文 »

发表于 | 更新于

1、HTML 结构

我们需要的第一件事是一点 HTML 。 一个网格容器（将变成一个网格元素）和网格项（header, menu, content, footer）。

浏览器兼容性查询 

1
2
3
4
5
6
<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>


阅读全文 »

发表于 | 更新于

微信 H5 的开发过程中遇到的一些坑

1. 页面滚动不顺畅,在ios版的微信里会出现问题，解决办法给要滚动区域的元素加上这个属性：

1
-webkit-overflow-scrolling: touch;

2. ios版会把页面中的一串数字识别成电话然后触摸会调用系统不打电话，解决办法加上meta

1
< meta content="telephone=no,email=no" name="format-detection" />
阅读全文 »