通过做案例复习了                                                                                                                                    经典布局技术

  浮动布局                                                                                                              绝对定建：

  搜索

（input+button组合样式）

菜单

关键CSS技巧

高级选择器

伪元

（::before/::after实现图标）

如何引用外部资源，通过<link rel=”stylesheet” href=”css/...”>这个标签。

头部模块及底部模块可用新增的标签<header><footer>

头部模块里面的logo部分可以用标题标签加上<a>标签，实现点击logo回到首页的功能。

楼层区域的设置：使用<div>标签包含一个大的楼层，里面包括标题和内容的主体部分，并且通过设置连接来切换与不同楼层。

使用float来实现元素的水平排列。定位position，可以控制好元素在页面中的位置。 a 如果包含有宽度的盒子，则需要转换为块级盒子。                                                                    移动端中meta视口标签，<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale（初始缩放比，大于0的数字，maximum-scale最大缩放比，大于零的数字，minimum-scale最小缩放比，大于零的数字，user-scale是否可以缩放，yes或no）                                                                                              二倍图中物理像素点的概念。

initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">      4.10总结                                                                                                                                    在多倍图中，通过标准的viewport设置，可以使用倍图来提高图片的质量，解决模糊为标题                                                                                                                                              img {

    /* 原始图片100*100px */

    width: 50px;

    height: 50px;

                                                                                                                            background-size: 背景图片宽度 背景图片高度;）                                                                          注意cover和contain这两个属性并且可以通过流式布局来设置盒子的宽度和盖度                  4.10总结                                                                                                                                    在多倍图中，通过标准的viewport设置，可以使用倍图来提高图片的质量，解决模糊为标题                                                                                                                                              img {

    /* 原始图片100*100px */

    width: 50px;

    height: 50px;

}                                                              通过background-size可以规定背景图片的尺寸                                                                        （background-size: 背景图片宽度 背景图片高度;）                                                                          注意cover和contain这两个属性并且可以通过流式布局来设置盒子的宽度和盖度                2D转换旋转:transform:rotate(度数)  （单位deg 度数为正，代表顺时针，度数为负，代表逆时针，）                                                                                                                                      一种新的制作三角形的方法：利用rotate,制作一个盒子加上transform:rotate(45deg)                      转换中心点transform-origin:(x y);中间用空格隔开                                                                                                      进行缩放：transform:scale(x,y);优势：默认为中心点缩放，不会影响其他的盒子                                  综合写法transform:translate() rotate() sacle ()...（位移放在最前面）                                          @keyframe 动画名称                                                                                                                    常用属性：animation-name:动画名称；                                                                                  animation-duration:持续时间；