10.28-11.3 WEB（二）

上周作业复习WEB(一)，整理资料
居中写三遍，JS原生轮播图背着能写出。
1、手风琴 这个是点了才动你可以写hover，hover之后滑动但是移出就还原，点击才像视频里这样，不还原，你可以用div背景色，或者自己找图这里面是有动画效果的，不是直接就变了。
2、css单位，px、em、rem、vmin、vmax
3、媒体查询
4、帧动画
5、3d盒子
6、还有个正方体，我找找这个有扩展，换图
7、百叶窗
8、再写一个JQ轮播图

上一章：细说CSS的position

媒体查询 @media——响应式页面

定义和使用
用@media查询，可以针对不同的媒体类型定义不同的样式，针对不同的屏幕尺寸设置不同的样式，当重置浏览器大小的过程中，页面也会根据浏览器的宽高重新渲染页面。

语法两种方式：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}