“学习园地”“公共服务”“自主招生”三部分宽度都是 312px，高度 160px，都是左侧为图片（图 片宽度 100px），右侧为文字。“学习园地”“公共服务”“自主招生”三个标题都是 16px 加粗显示。 其它文字按图 3 所示效果设计。 图3 9）“学习园地”的右侧为四行三列的链接，链接 hover 时文字为红色有下划线。给出代码

好的，以下是一个简单的HTML和CSS代码示例，可以实现上述效果：

<div class="container">
  <div class="section">
    <img src="learn.png" alt="学习园地" width="100">
    <div class="content">
      <h3>学习园地</h3>
      <p>这里是学习的好地方，我们提供优质的教育资源和培训课程。</p>
      <ul>
        <li><a href="#">课程1</a></li>
        <li><a href="#">课程2</a></li>
        <li><a href="#">课程3</a></li>
        <li><a href="#">课程4</a></li>
        <li><a href="#">课程5</a></li>
        <li><a href="#">课程6</a></li>
      </ul>
    </div>
  </div>
  <div class="section">
    <img src="services.png" alt="公共服务" width="100">
    <div class="content">
      <h3>公共服务</h3>
      <p>我们致力于为您提供最优质的公共服务，让您的生活更加便捷。</p>
      <ul>
        <li><a href="#">服务1</a></li>
        <li><a href="#">服务2</a></li>
        <li><a href="#">服务3</a></li>
        <li><a href="#">服务4</a></li>
        <li><a href="#">服务5</a></li>
        <li><a href="#">服务6</a></li>
      </ul>
    </div>
  </div>
  <div class="section">
    <img src="enrollment.png" alt="自主招生" width="100">
    <div class="content">
      <h3>自主招生</h3>
      <p>我们为有梦想的年轻人提供最好的平台，让您的未来更加美好。</p>
      <ul>
        <li><a href="#">招生1</a></li>
        <li><a href="#">招生2</a></li>
        <li><a href="#">招生3</a></li>
        <li><a href="#">招生4</a></li>
        <li><a href="#">招生5</a></li>
        <li><a href="#">招生6</a></li>
      </ul>
    </div>
  </div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.section {
  width: 312px;
  height: 160px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px #ddd;
  border-radius: 5px;
  padding: 0 20px;
}

.section img {
  margin-right: 20px;
}

.section h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.section ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  margin: 0;
  padding: 0;
}

.section a {
  color: #333;
  text-decoration: none;
}

.section a:hover {
  color: red;
  text-decoration: underline;
}

你可以将图片文件替换为你自己的图片，将链接和文本内容替换为你需要的内容。