options.css 内容优化 --chatGPT

问：options.css 内容优化，将页面左边的功能列表背景设置成浅黑色 ，宽度设置成320；将页面右边的背景设置成浅灰色

gpt:

你可以通过在 `options.css` 文件中添加相应的样式规则来实现你的要求。以下是一个将左侧功能列表背景设置为浅黑色、宽度设置为 320px，右侧内容背景设置为浅灰色的样式示例：

```css
/* 设置整个选项页容器样式 */
.chat-container {
  display: flex;
  background-color: #f0f0f0; /* 设置整个容器背景色为浅灰色 */
}

/* 设置左侧功能列表样式 */
.function-list {
  background-color: #222; /* 设置左侧功能列表背景色为浅黑色 */
  width: 320px; /* 设置左侧功能列表宽度为320px */
  color: #fff; /* 设置文字颜色为白色 */
  padding: 20px; /* 添加一些内边距 */
}

/* 设置左侧功能列表项样式 */
.function-list ul {
  list-style-type: none;
  padding: 0;
}

.function-list li {
  margin-bottom: 10px;
  cursor: pointer;
}

/* 设置右侧内容容器样式 */
.content-container {
  flex: 1; /* 右侧内容容器占据剩余的可用空间 */
  background-color: #f0f0f0; /* 设置右侧内容背景色为浅灰色 */
  padding: 20px; /* 添加一些内边距 */
  overflow-y: auto; /* 添加垂直滚动条，以防内容溢出 */
}

/* 设置右侧内容的样式 */
.content-container p {
  color: #333; /* 设置文字颜色为深灰色 */
  font-size: 16px;
}
```

这些样式规则会将左侧功能列表的背景设置为浅黑色，宽度为320px，将右侧内容的背景设置为浅灰色。你可以根据需要进一步自定义样式以满足你的设计要求。确保将这些样式规则添加到你的 `options.css` 文件中，以实现所需的外观效果。