网页实战-布局再回顾

1.首页全屏

效果图

方法

html,
body{
    height: 100%;
  }
section{
    background:url("https://ooo.0o0.ooo/2017/07/01/5957299554c26.jpg") 0 0 no-repeat;
    background-size: 100% 100%;
    height: 100%;
}

section中的height:100%是继承父元素的，所以这里的父元素body及根元素html也得height:100%。
这里重点强调下 background-size属性，有4种属性background-size: length|percentage|cover|contain;

属性	描述
length	设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

2.内容固定宽度+居中

固定宽度+居中

设标签 class="layout"，CSS中设置

.layout{
    max-width: 900px;
    margin: 0 auto;
  }

在html中插入该标签，适用于大的区段，

3.字体图标居中

字体图标居中

绝对定位要灵活运用，细节参考上图。

3.鼠标hover时，图片的闪动

hover

这个多练习。