发表于   |   分类于   |     |   阅读次数

问题待解决

搜索框Tab相关。

位置：D:\Sublime Text file\demo\搜索框
描述：鼠标点击”宝贝”所在元素时，会出现bug,
当点击元素后，选中的样式未能呈现。

阅读全文 »

发表于   |   分类于   |     |   阅读次数

什么是CSS hack？

由于不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11，Firefox，Safari，Opera，Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。
因此，为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。

CSS hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法：

1
2
3
4
5
6
7
.container{
      _color: red;/*IE6识别*/
      *color: red;/*IE6,IE7识别*/
      color: red\9;/*IE6-IE10识别*/
      color: red\0;/*IE8-IE10识别*/
      color: red\9\0;/*IE9,IE10识别*/
  }

选择器前缀法（即选择器hack）：

针对一些页面不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

1
2
3
4
*html{}/*只对IE6生效*/
*+html{}/*只对IE7生效*/

@media screen\9{...}  //IE6-7生效

IE条件注释法（即HTML条件注释hack）：

（注：IE10+已经不再支持条件注释）这类hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

如何应对浏览器兼容？

把浏览器分两类，一类是历史遗留浏览器，一类是现代浏览器。
按照W3C标准流程和规范，优先为高端浏览器设计，同时考虑低端浏览器的退化方案。
策略：

  1. 渐进增强（progressive enhancement）：
    针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  2. 优雅降级（graceful degradation）：
    一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
    优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

reset.css和normalize.css

reset.css是通过重新定义标签样式，把浏览器的默认样式覆盖掉，以便保持个浏览器渲染的一致性。相对暴力
normalize.css是reset.css的替代方案，保留有用的浏览器默认样式，重置掉该重置的样式，同时进行一些bug的修复。相对平和

IE8不支持HTML5也不支持CSS3 Media

需要加载两个JS文件，来保证我们的代码实现兼容效果：

1
2
3
4
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

IE6不支持透明图片

解法方案：
通过JS代码让IE6支持

  1. 下载JS支持文件：下载地址
    阅读全文 »

发表于   |   分类于   |     |   阅读次数

Web前端开发

script标签<script type="text/template">疑问

在HTML中嵌入模板HTML，往往是类似这样的写法：

1
2
3
<script type="text/template">
    <img src="mm1.jpg">
</script>

实际上，并不存在type=”text/template”这样的标准写法.<script>本身的特定，让内部的HTML标签是按照字符串处理的，因此，天生内容不显示。

阅读全文 »

发表于   |   分类于   |     |   阅读次数

函数和作用域

函数

函数是一块JavaScript代码，被定义一次，但可执行和调用多次。
JS中的函数也是对象，所以JS函数可以像其它对象那样操作和传递，所以我们也常叫JS中的函数为函数对象。

函数调用方式：

在JavaScript中一共有四种调用模式：

  • 对象方法调用模式：o.method();
  • 函数调用模式: foo();
  • 构造器调用模式 : new Foo();
  • apply/call/bind调用模式: func.call(0);
    阅读全文 »

发表于   |   分类于   |     |   阅读次数

requestAnimationFrame是什么？

HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:

  • CSS3的animattion+keyframes;
  • css3的transition;
  • 通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;
  • 使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。
  • window.requestAnimationFrame()方法。
    阅读全文 »

发表于   |   分类于 ，   |     |   阅读次数

Phtoshop切图

界面设置

PS首选项设置：
编辑>首选项>单位与标尺： 将单位（标尺/文字）改成像素。
面板：
在“窗口”菜单下开启：工具/字符/选项/信息（F8）/图层/历史记录
调整面板后，需要保存工作区：窗口>工作区>新建工作区

阅读全文 »

发表于   |   分类于   |     |   阅读次数

案例1：七巧板

将一系列坐标点及颜色存储在数组中，使用Canvas来绘制图像。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas七巧板</title>
</head>
<body>
    <canvas id="canvas" style="border:1px solid #ddd;margin:50px auto" >
        当前浏览器不支持Canvas
    </canvas>

    <script>
        var TG =[
                {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
                {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
                {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
                {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
                {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
                {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
                {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
            ];  
        window.onload=function(){
            var canvas=document.getElementById("canvas");
            canvas.width=800;
            canvas.height=800;
            var context=canvas.getContext("2d");
            for (var i = 0; i < TG.length; i++) {
                draw(TG[i],context);
            }
            function draw(piece,ctx){
                ctx.beginPath();
                ctx.moveTo(piece.p[0].x,piece.p[0].y);
                for (var i = 0; i < piece.p.length; i++) {
                    ctx.lineTo(piece.p[i].x,piece.p[i].y);
                    ctx.fillStyle=piece.color;
                    ctx.fill();
                }
            }
        }
    </script>
</body>
</html>

阅读全文 »