前端小问题1——（最近好久没有发博客。。。待续）

小问题集锦

20%的功能满足80%的需求。爱、喜悦、和平。

1、怎样该网站title加小图标

<link rel="Shortcut Icon" href="icon地址" type="image/x-icon">

　　

2、图片缩放问题

<div class="bg"><img src="images/section1.jpg" alt=""></div>

　　

错误图

错误css

.section .bg { }
.section .bg img { display: block;  100%; height: 100%;}

　　

正确图

正确css

.section .bg { position: absolute; left: 0; top: 0;  100%; height: 100%;}
.section .bg img { display: block;  100%; height: 100%;}

　　

3、pc站自适应移动端

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

　　

4、定位

如何定位中间

<style>
    .go{position:absolute;left:50%;margin-left:负的宽度的一半;}
</style>

　　

5、css3过渡(transition)

<style>
    transition: all 1s;
    -moz-transition: all 1s;            /* Firefox 4 */
    -webkit-transition: all 1s;     /* Safari 和 Chrome */
    -o-transition: all 1s;          /* Opera */
<style>

　　

6、css3动画(animation)

7、抖动

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.min.js"></script>
<script>
$(function(){
    //抖动
    $('#download_btn').jrumble({
    x: 5,
    y: 5,
    rotation: 2
    });
    $('#download_btn').hover(function(){
    $(this).trigger('startRumble');
    }, function(){
    $(this).trigger('stopRumble');
    });
});
</script>

　　

官网 http://jackrugile.com/jrumble/

8、浏览器兼容问题

1、png8产生毛边，png24、gif在ie6下无透明效果
解决方案：
(1)美工处理，使png8无毛边（未测试）
(2)js判断，检测浏览器版本。ie6提示升级 (3)js处理，通过js动态选择图片