响应式03第三天

1、复习：Html5progressmin=” 0”max=”100”value=”lowhighCSS3选择器基础选择器属性选择器liclass$=”b” 子代选择器+向后选第一个兄弟向后选所有的兄弟liclass=”a”livalue=”上移”liclasslidata-liclass*=”o”伪类选择器:-child:last-childnth-child(n)nth-child(odd):not(.one):emptyCSS 属性Border-radius:水平/垂直; Border:30px;Box-shadow:水平方向内外侧；垂直方向模糊距离（羽化）阴影尺寸颜色背景：颜色背景多张背景

2、rgba(255,0,0,0.5);不影响里边的元素background:url(),url(),url(),背景的大小设置Background-size:用像素Contain100px 100px;百分比Cover会将整个盒子给铺满，可能显示不全；背景缩放中心点：background-ition:50% 50%;内减模式：出现 padding 和 border 之后，不影响实际宽度Box-sizing:boder-box;1.1 文字阴影注意：文字阴影中是没有阴影尺寸和内外侧属性；经验：文字阴影和盒子阴影在使用的过程中，比较耗费资源，影响网页的渲染速度；1.2 2D 转换1.2.1 位置移动

3、translate（水平方向，垂直方向）表示水平方向和垂直方向移动的距离；1.2.2 旋转Roe(旋转的角度)为 deg（度）如果角度为正值，表示顺时针，如果是负值，表示逆时针；Transform:位置移动缩放旋转倾斜；text-shadow:水平方向垂直方向模糊距离（羽化）颜色；1.2.3 缩放scale(水平方向，垂直方向)没有，直接书写比例大小如果缩小（01）如果放大（1以上）1.2.4 倾斜Skew(水平方向，垂直方向 )deg （度）表示水平方向和垂直方向所倾斜的角度；正值为顺时针，负值为逆时针；1.3 过渡过渡不是动画，css3 中有专门的动画属性；过渡表示从一个状态到另一个状态的

4、转换，通常配合着 hover 一起用；前两个属性是必须要有的1.3.1 过渡属性就是 css 中的属性例如WidthHeightBackgroundTransform如果要过渡所有的属性，alltransition:要过渡的属性 过渡持续的时间 运动曲线何时开始；1.3.2 过渡持续的时间是 s（秒）1.3.3 运动曲线默认为匀速 linear；1.3.4 何时开始从什么时候开始执行过渡，默认即时开始（0s），如果希望两秒钟之后，就写 2s1.4 图标字体是将图标作为字体；优点: 1. 不存在兼容性的问题，ie6 等都支持，它早在 ie4 的时候就出现；当时流行感设计风格，它不失真；资源丰富；

5、字体不适合当时的设计风格；缺点：1. 制作起来非常麻烦不便；2.阿里国外（国内的，淘宝的）1.4.1 图标字体的使用步骤进入到阿里选中需要的字体，加入购物车图标库031.4.2 网页中使用图标字体01 将这些字体放入到fonts文件夹02 在 css 中font-face 字体font-family: myfont;src: url(fonts/iconfont.eot); /* IE9*/src: url(fonts/iconfont.eot?#iefix) format(embedded-opentype),url(fonts/iconfont.woff) format(woff), /*

6、 chrome、firefox */* IE6-IE8 */url(fonts/iconfont.ttf) format(truetype), /* chrome、firefox、opera、Safari,Android, iOS 4.2+*/url(fonts/iconfont.svg#iconfont) format(svg);/*iOS4.1-*/03 让盒子调用字体divfont-family: myfont;/*以下为浏览器兼容 */-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-os

7、x-font-smoothing: grayscale; font-size: 100px;color: red;text-shadow:5px 5px 5px rgba(0,0,0,0.3);04 把需要使用的字体编码放入到盒子中1.5 3d 转换3d 转换和 2d 的区别在于多了 z 轴X 轴旋转Y 轴旋转Z 轴旋转1.6 设置转换的中心点水平方向 left垂直方向right centertopbottomcenter表示设置旋转的中心点，通常和 roe 搭配使用；地图生成1.7 HYPERLINK http:/lbsapi/creatmap/ http:/lbsapi/creatmap/搜索 “地图”Transform-origin:水平方向 垂直方向调用1.7.1调用 CSS,将 css在结构中，到 css 文件中；地图容器，其实就是一个 div，注意：一定要设置好容器的宽高；3.在结构的最下方，将 js 粘贴过去；1.8 浏览器的私有属性由于一些低版本浏览器的存在，产生了低版本浏览器兼容的问题；为了兼容低版本的浏览器，出现了浏览器私有属性，专门针对于低版本浏览器，当然