本次要实现如下图所示的咖啡店banner效果图：
其实主要看给了什么素材，总共给了两种图片的素材，所以我们的结构框架就是一个大<div>包含一个小<div>:
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>写到这儿还没有任何效果展示，因为我们需要通过css给两个<div>设置不同的背景，我们使用链入式引用CSS代码，既然要引入CSS代码，就需要先新建CSS文件，CSS文件新建过程与html文件新建过程几乎一样，只是在如下界面将Html选项选择Css即可：
然后紧接着</title>标签 下一行引入Css文件：
<link href="index1_20_test03.css" rel="stylesheet" type="text/css">接下来我们来到CSS文件，第一步，祖传艺能，初始化边距：
*{
margin: 0px;
padding:0px;
}为底部（外部）图片添加宽高，边框和背景图片：
.out{
margin: 0px auto;
height: 400px;
width: 800px;
background:url("../../../Documents/muxishiye/bg.png") repeat-x;然后故技重施，对上部（内部）图片设置宽高范围，边框和背景图片即可：
.in{
margin: 0px auto;
height: 400px;
width: 800px;
background:url("../../../Documents/muxishiye/coffee.png") repeat-x 0px 40px;
}实际效果如下：
完整.html源码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>咖啡店Banner</title>
<link href="index1_21_test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>
</html>
完整.css文件源码：
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.out{
margin: 0px auto;
height: 400px;
width: 800px;
background:url("../../../Documents/muxishiye/bg.png") repeat-x;
}
.in{
margin: 0px auto;
height: 400px;
width: 800px;
background:url("../../../Documents/muxishiye/coffee.png") repeat-x 0px 40px;
}如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。
（QQ群：937864538 欢迎入群~）