day7
一、review
1.transition 过渡,可以让属性改变的时候有动画
=> transition-property:all; 过渡属性
=> transition-duration 动画持续(执行)时间
=> transition-delay 延迟时间
=> transition-timing-function: linear | ease-in | ease-out | ease-in-out;
+ 缩写
=> transition: 值1 值2 值3 值4...
2.文本阴影/盒子阴影
text-shadow/box-shadow
+ 文本阴影/盒子阴影(inset表示内阴影)
+ 值1表示阴影的水平位置 值2表示阴影的垂直位置 值3表示阴影的模糊程度 值4表示阴影的颜色值。
3.flex弹性盒
伸缩流方向 => flex-direction: row | row-reverse | column | column-reverse 主轴对齐方式 => jusitify-content: flex-start | flex-end | center | space-around | space-between | space-evenly; 侧轴对齐方式 => align-items: flex-start | flex-end | center | baseline | stretch; 换行 => flex-wrap: nowrap | wrap | wrap-reverse; 缩写(伸缩流方向和换行) => flex-flow: wrap | wrap-reverse | row-reverse | column | column-reverse; 堆栈伸缩行 => align-content: flex-start | flex-end | center | space-around | space-between | space-evenly; 分配元素的所占的份额 => flex
二、元素隐藏
第一种方式 => display:none; => display:block; => 会让元素直接消失,在页面中不占位置
第二种方式 => opacity:0; => opacity:1; => 不是让元素隐藏了,其实是看不见了。元素隐藏后,正常的功能是存在的
第三种方式 => visibility:hidden; => visibility:visible; => 是让元素进行隐藏,只不过会继续占用网页的位置。元素隐藏后,元素的功能会消失
三、三列布局
三列布局 容器里面有三块内容 两边的内容宽度是固定的,中间内容区域需要宽度自适应
圣杯和双飞翼布局 圣杯和双飞翼布局其实效果是一样的,实现思路有不同的点,在这里采用最简单的和最实用的方式(采用弹性盒+order) => 容器里面有三块内容 => 左右两边的内容宽度是固定的,中间内容区域需要宽度自适应 => 中间内容区域在解析代码的时候优先加载,但是在显示效果的时候中间内容区域还是在中间显示
四、HTML5多媒体标记
video专门用来播放视频的。flash可以做动画、可以播放音频和视频
属性 => src 视频的资源路径 => controls 视频控件(点击播放、进度条、声音、全屏等等) => muted 静音 => loop 循环播放 => autoplay 自动播放 => poster 视频封面
支持的视频格式 => ogg => mp4 => webm
注意点 => source标记可以写多个,主要目的是当浏览器不支持其中某个视频格式的时候,可以去查找其他的格式 --> <!-- <video src="./videos/chrome_japan.mp4" controls loop width="500" autoplay poster="./img/5.jpg"></video> --> <!--
video controls loop width="500"> <source src="" type="video/ogg"> <source src="./videos/dongbei.mp4" type="video/mp4"> <source src="" type="video/webm"> </video>
五、rem单位
rem
是css3新增的一个单位 以一个参照物,进行动态的变化,让网页实现自适应的布局
是根标记(html)字体大小为参照物的单位
<script src="./js/flexbox.js"></script>
rem适配方案,是使用js动态的计算html font-size的大小的 exbox方案是手淘团队使用的实现原理 => 无论多大的屏幕,默认都是把屏幕划分成10等分的,是按照10等分的比例进行缩放
六、属性选择器
通过标记自生带来的属性来选择元素
①通过属性选取元素: input[type]{ border: 1px solid orange; }
input[name]{ border: 1px solid orange; }
input[value]{ border: 1px solid orange; }
②通过属性的属性值来选择元素:
input[type="text"]{ width: 300px; border: 1px solid hotpink; }
input[type="number"]{ border: 1px solid hotpink; }
③ 通过属性的属性值的开头选择元素 a[href^="h"]{ color: hotpink; }
④ 通过属性的属性值的结尾选择元素 a[href$="com"]{ color: orange; }
⑤通过属性的属性值的任意字符选择元素 a[href*="c"]{ color: gold; }
七、字体图标
iconfont
+ 字体图标
+ 把图标当成普通文本区处理
+ 文本的颜色和字体大小可以对它起作用