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中插入该标签，适用于大的区段，<section id="content" class="second layout">
3.字体图标居中
字体图标居中
绝对定位要灵活运用，细节参考上图。
3.鼠标hover时，图片的闪动
hover
这个多练习。
网友评论