Step1: 在网页上放一个div，id为#label
Step2: 设置div的宽度为1200px,高度为336px,背景图片为coke-label.jpg。使背景仅水平平铺
Step3: 此时浏览页面，横向滚动页面，发现背景随滚动而滚动
Step4: 设置背景固定
Step5: 此时浏览页面，发现背景不随页面滚动而滚动
Step6: 将body宽度改为1500px，将label宽度改为与可乐瓶图片等宽194px，使用设置body的padding-left，将label向右推800px
Step7: 此时浏览页面，滚动页面，就是背景始终固定，而小前景视窗移动，产生错位效果
Step8: 在label元素中添加img元素将可乐瓶图片挂到label中，在css中添加样式，设置其宽度和高度与可乐瓶图片一样
Step9: 再次浏览，转动效果出来了。
Step10: 发现可乐瓶底部，有约16px的背景空白，我们将label的背景向下移动16px,弥补空白区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pure CSS Coke Can</title>
<link rel="Stylesheet" href="index.css"/>
</head>
<body>
<div id="label">
<img src="coke-can.png"/>
</div>
</body>
</html>
CSS代码
#label{
height: 336px;
width: 194px;
background-image: url("coke-label.jpg");
background-repeat: repeat-x;
background-attachment:fixed;
background-position: 0 16px;
}
body{
width: 1500px;
padding-left: 800px
}
将两个不一样颜色的div水平并排。
<!DOCTYPE html>
<html>
<head>
<title>111</title>
<link rel="Stylesheet" href="html111.css"/>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>>
</body>
</html>
CSS文件
#one{
height: 100px;
width: 100px;
background-color: red;
float:left
}
#two{
height: 100px;
width: 100px;
background-color: blue;
float:left
}