实现一个图片形状变化响应式网页，要求如下: 1.界面如下图所示，第一行显示班级姓名"，第2行显示1张图片(素材选用正方形图片)，第三行显示2个按键 。2.连续点击方型图"按键，图片外框为方型。 3.连续点击圆形图"按键，图片外框为圆形。

这是一个比较简单的响应式网页，可以通过 HTML、CSS 和 JavaScript 实现。下面是实现的步骤：

1. 编写 HTML 结构

<div class="header">
  <h1>班级姓名</h1>
</div>
<div class="content">
  <img id="image" src="square.jpg">
</div>
<div class="footer">
  <button id="square-btn">方型图</button>
  <button id="circle-btn">圆形图</button>
</div>

其中，header、content 和 footer 分别表示页面的头部、内容和底部。图片元素使用 img 标签进行定义，id 为 image。

2. 编写 CSS 样式

/* 全局样式 */
* {
  box-sizing: border-box;
}

/* 头部样式 */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}

/* 内容样式 */
.content {
  text-align: center;
  padding: 20px;
}

/* 图片样式 */
#image {
  width: 300px;
  height: 300px;
  border: 10px solid #333;
  border-radius: 0;
  transition: all 0.3s ease-in-out;
}

/* 底部样式 */
.footer {
  text-align: center;
  padding: 20px;
}

/* 按钮样式 */
button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
}

其中，图片样式定义了宽度、高度、边框和过渡效果。初始时，图片的边框为方形，圆角半径为 0。

3. 编写 JavaScript 代码

// 获取按钮元素
const squareBtn = document.getElementById('square-btn');
const circleBtn = document.getElementById('circle-btn');

// 获取图片元素
const image = document.getElementById('image');

// 点击方形图按钮
squareBtn.addEventListener('click', () => {
  image.style.borderRadius = '0';
});

// 点击圆形图按钮
circleBtn.addEventListener('click', () => {
  image.style.borderRadius = '50%';
});

通过获取按钮元素和图片元素，分别为两个按钮添加点击事件。当点击方形图按钮时，将图片的圆角半径设为 0；当点击圆形图按钮时，将图片的圆角半径设为 50%。

这样，一个简单的响应式网页就完成了。可以根据需要进行样式的调整和优化。