实例:
![](https://i-blog.csdnimg.cn/blog_migrate/1f33293691c5fe200fd8fda098ac55ec.png)
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Forecast</title>
<style >
/*设置外部大盒子的背景图片,宽度,高度*/
.backimage{
margin:0 auto;
width: 790px;
height: 500px;
background-image: url(backgroundimage.jpg);
background-size: cover;
}
/*第一个小盒子*/
.one{
margin:380px 10px 0px;
width: 130px;
height: 100px;
border:4px solid white;
background-color: #9E9080;
float: left;
}
/*第二个小盒子*/
.two{
margin:380px 10px 0px;
width: 130px;
height: 100px;
border:4px solid white;
background-color: #14305F;
float: left;
}/*第三个小盒子*/
.three{
margin:380px 10px 0px;
width: 130px;
height: 100px;
border:4px solid white