请求技术帮助：如何使用HTML CSS制作指定图片中的图形结构

以下是还原图中结构的代码，包含完整的HTML结构和CSS样式：

HTML 结构 #

<div class="main-container">
  <div class="top-bar">
    <h2>模块标题</h2>
    <button class="icon-btn">⚙️</button>
  </div>
  <div class="content-wrapper">
    <div class="left-panel">
      <div class="panel-item">
        <span class="item-label">标签项1</span>
        <span class="item-value">对应内容1</span>
      </div>
      <div class="panel-item">
        <span class="item-label">标签项2</span>
        <span class="item-value">对应内容2</span>
      </div>
      <div class="panel-item">
        <span class="item-label">标签项3</span>
        <span class="item-value">对应内容3</span>
      </div>
    </div>
    <div class="right-panel">
      <div class="panel-header">子面板标题</div>
      <div class="panel-content">
        <div class="content-desc">这里是子面板的内容区域，可根据需求添加表格、表单或其他元素</div>
      </div>
    </div>
  </div>
</div>

CSS 样式 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}

.main-container {
  width: 90%;
  max-width: 1200px;
  margin: 30px auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.top-bar h2 {
  font-size: 19px;
  color: #333;
  font-weight: 600;
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #6c757d;
  transition: color 0.2s;
}

.icon-btn:hover {
  color: #495057;
}

.content-wrapper {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.left-panel {
  width: 28%;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 16px;
  background-color: #fdfdfd;
}

.panel-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e9ecef;
}

.panel-item:last-child {
  border-bottom: none;
}

.item-label {
  color: #6c757d;
  font-size: 14px;
}

.item-value {
  color: #212529;
  font-weight: 500;
  font-size: 14px;
}

.right-panel {
  flex: 1;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

.panel-header {
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-size: 17px;
  font-weight: 600;
  color: #333;
}

.panel-content {
  padding: 20px;
  background-color: #ffffff;
}

.content-desc {
  color: #495057;
  font-size: 15px;
  line-height: 1.6;
}

可以根据实际需求调整尺寸、颜色、字体等样式细节，也可以在内容区域添加表格、表单等更复杂的元素

内容的提问来源于stack exchange，提问作者Abdus Sattar Ripon