给我一个比较好看的按钮布局和正常的列表布局

好看的按钮布局可以使用 CSS 中的 flexbox 布局和伪元素等技术来实现，下面是一个示例代码：

<div class="button-group">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-group button {
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #ff6633;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin: 0 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-group button:hover {
  background-color: #ff9966;
}

.button-group button:first-child {
  margin-left: 0;
}

.button-group button:last-child {
  margin-right: 0;
}

这个示例代码中，通过使用 flexbox 布局，设置按钮组为水平居中，每个按钮之间有一定的间距，并且通过伪元素来设置第一个和最后一个按钮的左右边距为 0，从而实现了一个比较好看的按钮布局。

关于正常的列表布局，可以使用 HTML 中的 ul 和 li 元素来创建一个列表，然后使用 CSS 来设置样式。下面是一个示例代码：

<ul class="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  color: #333;
}

.list li:last-child {
  border-bottom: none;
}

这个示例代码中，通过设置 ul 元素的样式，去除了默认的列表样式，然后设置每个 li 元素的样式，包括内边距、边框、字体大小和颜色等。最后通过伪元素来去除最后一个列表项的边框，从而实现了一个基本的列表布局。