<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样式

好的，请稍等，我会给您设置一个漂亮的CSS3样式。

/*全局样式*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  background-color: #f8f8f8;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

/*表格样式*/
table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

thead {
  background-color: #3498db;
  color: #fff;
}

thead th {
  padding: 10px;
  text-align: left;
}

tbody td {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

tbody tr:last-child td {
  border-bottom: none;
}

/*添加按钮样式*/
.add-btn {
  display: block;
  margin: 30px auto;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.add-btn:hover {
  background-color: #2980b9;
}

/*弹出层样式*/
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

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

#modal input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#modal button {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

#modal button + button {
  margin-left: 10px;
  background-color: #e74c3c;
}

#modal button:hover {
  background-color: #2980b9;
}

将以上代码复制到您的CSS文件中，然后将HTML文件中的样式表链接到此CSS文件即可。