<div class="col-sm-6 col-md-6 text-center"> <span class="icons c4"><i class="icon-trophy"></i></span> <div class="box-area"> <h3>象棋</h3> <img src="images/xq.jpg"> </div> </div> 用css调节图片大小

可以使用 CSS 中的 `width` 和 `height` 属性来调节图片大小。例如，如果你想将图片的宽度设置为 200 像素，高度自适应，可以使用以下 CSS 代码：

.box-area img {
  width: 200px;
  height: auto;
}

如果你想将图片的高度设置为 150 像素，宽度自适应，可以使用以下 CSS 代码：

.box-area img {
  height: 150px;
  width: auto;
}

你可以根据实际需要来设置图片的大小。

相关问题

<div class="col-sm-6 col-md-6 text-center"> <span class="icons c2"><i class="icon-tools"></i></span> <div class="box-area"> <h3>画</h3> <p>Lorem ipsum dolor sitamet, consec tetur adipisicing elit. Dolores quae porro consequatur aliquam, incidunt eius magni provident</p> </div> </div>把p标签中的文字换成图片

要将这个 div 中的 p 标签中的文字替换成图片，可以在 HTML 中将 p 标签的内容改为一个 img 标签，如下所示：

<div class="col-sm-6 col-md-6 text-center">
  <span class="icons c2"><i class="icon-tools"></i></span>
  <div class="box-area">
    <h3>画</h3>
    <img src="path/to/image.jpg">
  </div>
</div>

其中，`path/to/image.jpg` 是你要插入的图片的路径。这样就可以将 p 标签中的文字替换成图片了。注意要确保图片的尺寸和样式适合所在的容器。

<div class="about interest"> <h2 class="title2">兴趣爱好</h2> <ul> <li><span class="material-icons" style="vertical-align: -6px;"> piano </span> 钢琴 </li> <li><span class="material-icons" style="vertical-align: -6px;"> code </span> 编程 </li> <li><span class="material-icons" style="vertical-align: -6px;"> nightlife </span> 唱歌 </li> <li><span class="material-icons" style="vertical-align: -6px;"> savings </span> 宠物 </li> </ul> </div>加入鼠标事件

好的，您可以在每个li标签中加入onmouseover和onmouseout属性，来实现鼠标移入移出时的效果。例如：

<div class="about interest">
  <h2 class="title2">兴趣爱好</h2>
  <ul>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">piano</span>
      钢琴
    </li>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">code</span>
      编程
    </li>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">nightlife</span>
      唱歌
    </li>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">savings</span>
      宠物
    </li>
  </ul>
</div>

在这个例子中，当鼠标移入li标签时，会将字体颜色改为红色，当鼠标移出时，又将字体颜色改回黑色。您可以根据自己的需求来修改鼠标事件的效果。