使用 div+css 制作出一个如下图所示的四个固定位置的方框的页面，要求如下：1) 方框底色为cyan，边框2px、solid、蓝色。2) 宽和高为40px；方框与页面的距离为30px

要实现这个要求，我们可以使用div和CSS来制作这个页面。具体操作如下：

1) 首先，在HTML中创建四个div元素来表示方框，分别添加唯一的类名来标识它们。

2) 在CSS中，为这四个方框的类名设置相应的样式，包括底色为cyan、边框为2px、solid、蓝色，以及宽高为40px。

3) 使用CSS中的定位属性（position）将这四个方框固定在页面的特定位置。可以使用top、bottom、left、right属性来控制它们与页面的距离。 根据要求，将top和left属性设置为30px，这样方框与页面上边缘和左边缘的距离都为30px。

示例代码如下：

HTML:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

CSS:

.box1, .box2, .box3, .box4 {
  width: 40px;
  height: 40px;
  background-color: cyan;
  border: 2px solid blue;
  position: absolute;
}

.box1 {
  top: 30px;
  left: 30px;
}

.box2 {
  top: 30px;
  right: 30px;
}

.box3 {
  bottom: 30px;
  left: 30px;
}

.box4 {
  bottom: 30px;
  right: 30px;
}

通过以上代码，我们就可以实现一个包含四个固定位置方框的页面，它们的底色为cyan，边框为2px、solid、蓝色，宽高为40px，与页面的距离为30px。