主要是图片的定位和div的定位问题。
设图片起点坐标是(0, 0),图片高和宽为100px,则图片右下角坐标为(0, 0)
div起点坐标是(0,0),div高和宽为70px，边框分别为 10，20, 20, 10 。并给div边框上色掩盖背景图部分，则 div可见区域为图片的左上(10,10)到右下（20， 20）
图片上的div.html 文件代码如下：
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
<title>图片上的div</title>
<link href="picanddiv.css" rel="stylesheet">
</head>
<body>
<img src="1.jpg" alt="这是一张关于X的照片">
<div></div>
</body>
</html>
picanddiv.css 文件代码如下：
img {position: absolute /* 用绝对定位控制图片 */
top: 0 /* 设置图片跟顶部距离 */
left: 0 /* 设置图片跟左边距离 */
width: 100px
height: 100px
}
div {
position: absolute /* 用绝对定位控制div */
top: 0 /* 设置div距离顶部距离 */
left: 0 /* 设置div距离左边距离 */
margin: 0
border-top: 10px solid red /* 用div上边框颜色掩盖你不想别人看见部分 */
border-right: 20px solid red/* 用div右边框颜色掩盖你不想别人看见部分 */
border-bottom: 20px solid red/* 用div下边框颜色掩盖你不想别人看见部分 */
border-left: 10px solid red /* 用div左边框颜色掩盖你不想别人看见部分 */
padding: 0
width: 70px /* 设置div宽度 */
height: 70px /* 设置div高度 */
background: rgba(0, 0, 0, 0.5) /* 设置div透明背景，能看见背景 */
}
HTML：
CSS:
这样写的话，三张图片能够垂直平铺，且随着浏览器的缩放而缩放，可以添加alt关于图片的描述，利于SEO，且写法方便，不用考虑兼容性
HTML:
CSS:
在上面样式中，layout表示居中，最大宽度为640px，最小为320px，常用在手机端，
在header中设置padding-top: 11.875%表示的是图片的高度和宽度比例
1，当设置一张图片向上移动且想覆盖上一张图片一部分，那么要绝对定位一下，且使用top，或者bottom的时候，虽然图片能上移下移但是上移后底部的空间还是要占据，这时候要使用margin-top：-n%；使用百分比是相对外层有定位的元素，而且能够随着浏览器缩放大概位置不变。
2，活动页面背景图宽度写死的方法
最外层div设置最大宽度和最小宽度，居中，且写背景色，或者在body写背景色，第二层div设置背景图，居中，最大宽度定死
HTML:
CSS:
3，在写手机端页面的时候有事设计稿高度不够，此时为了自适应满屏，需要在HTML和body中设置高度100%
