前端开发，细节小点。

*多列布局的实现
1列：直接流的形式（上、中、下）
2列：使用浮动float：left/right 的形式
3列：使用定位：中间div使用margin值设置。
.left{width:200px;height:500px;background:#ccc;position:absolute; top:0；left:0;}
.middle{width:200px;height:500px;background:#999; margin:0 310px 0 210px  }
.left{width:300px;height:500px;background:#666;position:absolute; right:0；top:0;}

*蒙层效果添加：
opacity:0.5；// 普通浏览器兼容
filter:alpha(apacity=50); // IE浏览器兼容

*nextSibling:
返回某个元素之后紧跟的元素（处于同一树层级）
previousSibling:
返回某节点之前紧跟的节点（处于同一树层级）

*经过1级菜单，2级菜单显示：
ul li:hover ul {display:block;}

====================================

Opacity设置透明度，取值为0-100。
. filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认
. -moz-opacity：对mozilla firefox火狐浏览器实现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50%
. opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5;表示设置50%半透明

position: 属性的默认值 static

1.setTimeout(表达式，延迟时间)
在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅仅执行一次。

2.setInterval(表达式，交互时间)
在执行时，它从载入后，每隔指定的时间就执行一次表达式。是循环的。

========5张图片，不断轮播效果的实现。=============

js取属性数字的值：
list.style.left = parseInt(list.style.left) - 600 + 'px';
function animate(offset) {
    list.style.left = parseInt(list.style.left) + offset + 'px';
}

function showButtons() {
    for(var i=0; i<buttons.length; i++) {
        if(buttons[i].className  == 'on') { // 设置滚动点的样式
            buttons[i].className= '';
            break; // 结束循环,不再遍历节点。
        }
    }
    buttons[index -1].className = 'on';
}
   
// 按钮点击效果
for(var i=0; i<buttons.length; i++) {
    buttons[i].onclick = function(){
        if(this.className == 'on'){ // 已经是当前这个图片显示
            return;
        }
        var myIndex = parseInt(this.getAttribute('index'));
        var offset = -600*(myIndex - index);
        animate(offset); // 实现切换效果
        index = myIndex;
        showButtons();
    }
}

====================================
vscode，常用插件：
CSS Peek：html与css关联
Prettier：代码格式化
Icon Fonts：图标集，如Font Awesome/Glyphicons
Auto Rename Tag：自动修改标签（改开始标签，结束标签自动修改）
HTML Boilerplate：html模板
Color info：颜色提示
Auto close Tag：自动闭合标签
HTML CSS Support：html中css class的智能提示。

--------------------------------------------------------------

package.json
scriptes节点添加："lint": "eslint --fix --ext .js,.vue src"
cd，切换到项目目录，执行：npm run lint 通过lint格式化代码。
执行npm run dev 编译代码

--------------------------------------------------------------

function delay(word) {
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve('hello:' +word)
        }, 2000)
    })
}
// async+await 一起使用,实现异步处理
async function start() {
    const word1 = await delay('孙悟空')
    console.log(word1)
    const word2 = await delay('猪八戒')
    console.log(word2)
    const word3 = await delay('沙参')
    console.log(word3)
}
start();

// kua-router介绍
koa-logger.js
const app = new Koa()
const router = new Router()

router.get('/', (ctx, next)=>{
    ctx.body = '孙悟空'
    next()
})
router.get('/zhubajie', (ctx, next)=>{
    ctx.body = '猪八戒'
    next()
})
app.use(koaLog)
app.use(router.routes())
    .use(router.allowedMethods());

----------------------------------------------------------