记录一些平时遇到的坑,加深印象
###2015/8/22
###keyword: img li height
今天在修复首页之前的一个小bug的时候,发现 li
的高度要比 img
的高度高一点(代码结构如下)
<ul>
<li>
<img src="...">
</li>
</ul>
导致我连续竖排的图片总有一定缝隙。后来谷歌到是因为 img
是行内元素,会有一个与文字的baseline对应的下边沿的距离。
设置 img{ vertical-align:top; }
就可以解决了。
###2015/9/14
###keyword: upload file pure css
之前在写<input type="file" />
的样式的时候,用的是图片,但是觉得不是很好看,所以今天改成用纯CSS实现了,方法如下:
###html code
<div class="file-input">
<span>upload</span>
<input type="file" class="upload-btn">
</div>
###css code
.file-input {
position: relative;
overflow: hidden;
margin: 10px;
cursor: pointer;
}
,upload-btn {
position: absolute;
top: 0;
right: 0; /*防止遮住大div*/
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
###2015/10/6
###keyword: requreJS AMD define require
以前用requireJS
的时候都是用的require(['a', 'b'], funciont(a,b){})
的方式使用,但是当依赖的列表过长的时候就会比较麻烦,所以随用随取可能会是更好的方式。记录一下几种用法
最常见的第一种就是上面提到的,随用随取的方式是:
define(funciont(require){
var a = require('a')
})
还有一种是
define(['require', 'a'], funciont(require){
var a = require('a')
})