<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <!-- 数据渲染 --> </tbody> </table> <!-- 弹出层，用于添加或编辑联系人 --> <div id="modal" style="display: none;"> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div>帮我给这个页面用css3和JavaScript设置一个好看的中式布局，弹出框设置一个中式风格超好看样式

好的，以下是一个简单的示例，供您参考：

HTML代码：

<h1>通讯录</h1>
<button class="add-btn">添加联系人</button>

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>电话</th>
      <th>邮箱</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据渲染 -->
  </tbody>
</table>

<!-- 弹出层，用于添加或编辑联系人 -->
<div id="modal" class="modal">
  <form>
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
      <label for="phone">电话</label>
      <input type="text" id="phone" name="phone" required>
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input type="text" id="email" name="email" required>
    </div>
    <button id="save-btn" class="btn">保存</button>
    <button id="cancel-btn" class="btn">取消</button>
  </form>
</div>

CSS代码：

/* 全局样式 */
body {
  font-family: 'Microsoft Yahei', 'PingFang SC', sans-serif;
  background-color: #f5f5f5;
}

/* 表格样式 */
table {
  width: 80%;
  margin: 30px auto;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

th, td {
  padding: 10px 20px;
  text-align: center;
  border: 1px solid #d9d9d9;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 添加联系人按钮 */
.add-btn {
  display: block;
  margin: 30px auto;
  padding: 10px 20px;
  background-color: #d9d9d9;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  transition: all .3s ease;
}

.add-btn:hover {
  background-color: #a0d8ef;
  cursor: pointer;
}

/* 弹出层样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 999;
}

.modal form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.modal label {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: bold;
}

.modal input[type="text"] {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #ddd;
  box-shadow: none;
  transition: all .3s ease;
}

.modal input[type="text"]:focus {
  outline: none;
  border-color: #a0d8ef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.modal .btn {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 20px;
  background-color: #d9d9d9;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: all .3s ease;
}

.modal .btn:hover {
  background-color: #a0d8ef;
}

JavaScript代码：

// 获取页面元素
const addBtn = document.querySelector('.add-btn');
const modal = document.getElementById('modal');
const saveBtn = document.getElementById('save-btn');
const cancelBtn = document.getElementById('cancel-btn');

// 点击添加联系人按钮弹出弹出层
addBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

// 点击保存按钮关闭弹出层
saveBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// 点击取消按钮关闭弹出层
cancelBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

PS: 由于我不知道您希望的具体中式风格是怎样的，因此在示例中只是提供了一个简单的样式。如果您有更具体的要求，可以提出来，我会尽力满足。