窗口调整大小时如何将菜单项移入另一div？如何用HTML/CSS/JS创建指定表格？

先搭建基础HTML结构，包含两个导航容器和需要移动的目标菜单项：

<!-- 主导航容器 -->
<div class="main-nav" id="mainNav">
  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">产品</a>
  <a href="#" class="nav-item" id="targetItem">移动端专属入口</a>
</div>

<!-- 移动端备用容器 -->
<div class="mobile-nav" id="mobileNav"></div>

添加基础CSS样式，控制容器的显示与隐藏：

.main-nav, .mobile-nav {
  padding: 10px;
  background: #f5f5f5;
  margin: 10px 0;
}
.nav-item {
  margin-right: 15px;
  text-decoration: none;
  color: #333;
}

/* 屏幕宽度≥768px时隐藏移动端容器 */
@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}
@media (max-width: 767px) {
  .mobile-nav {
    display: block;
  }
}

核心用JavaScript监听窗口尺寸变化，实现菜单项的动态转移：

const mainNav = document.getElementById('mainNav');
const mobileNav = document.getElementById('mobileNav');
const targetItem = document.getElementById('targetItem');

// 封装转移逻辑函数
function shiftNavItem() {
  const windowWidth = window.innerWidth;
  // 设定768px为阈值，根据窗口宽度判断元素位置
  if (windowWidth <= 767) {
    // 确保元素不在目标容器时再移动
    if (!mobileNav.contains(targetItem)) {
      mobileNav.appendChild(targetItem);
    }
  } else {
    if (!mainNav.contains(targetItem)) {
      mainNav.appendChild(targetItem);
    }
  }
}

// 页面加载时执行一次，保证初始状态正确
window.addEventListener('load', shiftNavItem);
// 监听窗口resize事件，实时调整元素位置
window.addEventListener('resize', shiftNavItem);

说明 #

• 通过contains()方法判断元素是否已在目标容器，避免重复移动导致的性能浪费
• 结合CSS媒体查询控制容器显示，和JS逻辑配合实现完整的响应式转移效果

根据图示表格的特征（合并单元格、绿色高亮表头、边框分隔、奇偶行区分色），实现代码如下：

HTML结构（包含单元格合并） #

<table class="custom-table">
  <thead>
    <tr>
      <th rowspan="2">序号</th>
      <th rowspan="2">产品名称</th>
      <th colspan="2">规格参数</th>
      <th rowspan="2">价格</th>
    </tr>
    <tr>
      <th>尺寸</th>
      <th>重量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>笔记本电脑</td>
      <td>14英寸</td>
      <td>1.5kg</td>
      <td>5999元</td>
    </tr>
    <tr>
      <td>2</td>
      <td>平板电脑</td>
      <td>10.9英寸</td>
      <td>0.5kg</td>
      <td>3299元</td>
    </tr>
    <tr>
      <td>3</td>
      <td>智能手机</td>
      <td>6.7英寸</td>
      <td>0.2kg</td>
      <td>4999元</td>
    </tr>
  </tbody>
</table>

CSS样式（还原图示风格） #

.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 20px 0;
}

.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.custom-table thead th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

.custom-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.custom-table tbody tr:hover {
  background-color: #e8f5e9;
}

可选JavaScript：动态添加表格行 #

如果需要动态添加数据行，可使用以下代码：

function addTableRow(id, productName, size, weight, price) {
  const tableBody = document.querySelector('.custom-table tbody');
  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>${id}</td>
    <td>${productName}</td>
    <td>${size}</td>
    <td>${weight}</td>
    <td>${price}</td>
  `;
  tableBody.appendChild(newRow);
}

// 示例：添加一行新数据
addTableRow(4, "无线耳机", "入耳式", "0.05kg", "899元");

说明 #

• HTML中使用rowspan实现单元格纵向合并，colspan实现横向合并，匹配图示的表头结构
• CSS通过border-collapse合并边框，设置表头背景色、奇偶行区分色和hover效果，还原图示样式
• JavaScript部分为扩展功能，方便动态管理表格数据

内容的提问来源于stack exchange，提问作者Gur Ji