[分享]css做一个日程列表

CSS（Cascading Style Sheets）是一种用于网页样式设计的语言，可以用来对网页的布局、字体、颜色、大小等方面进行样式设计。在日程列表的设计中，CSS可以发挥重要作用。/ 定义列表的...

CSS（Cascading Style Sheets）是一种用于网页样式设计的语言，可以用来对网页的布局、字体、颜色、大小等方面进行样式设计。在日程列表的设计中，CSS可以发挥重要作用。

/* 定义列表的样式 */
ul {
  list-style: none; /* 去除列表默认的符号样式 */
  margin: 0; /* 去除列表的外边距 */
  padding: 0; /* 去除列表的内边距 */
}

/* 定义列表项的样式 */
li {
  display: flex; /* 使用flex布局，使内容水平排列 */
  align-items: center; /* 使内容垂直居中 */
  padding: 10px; /* 设置内边距，增加列表项的间距 */
  border-bottom: 1px solid #ccc; /* 增加列表项之间的分隔线 */
}

/* 设置每个列表项中的内容样式 */
li span {
  flex: 1; /* 使文本占据剩余空间 */
}

/* 定义列表项中的按钮样式 */
li button {
  margin-left: 10px; /* 设置按钮与文本之间的间距 */
  padding: 5px 10px; /* 设置按钮内边距 */
  background-color: #4CAF50; /* 设置按钮背景颜色 */
  border: none; /* 去除按钮边框 */
  color: white; /* 设置按钮文本颜色 */
  cursor: pointer; /* 设置按钮鼠标样式为手型 */
}

/* 当按钮被鼠标悬停时的样式 */
li button:hover {
  background-color: #3e8e41; /* 设置按钮背景颜色变深 */
} 

通过以上CSS代码的设置，可以在网页中实现一个简单的日程列表。每个列表项由一条分隔线与一个文本框和一个按钮组成，通过flex布局水平排列。借助CSS，我们可以轻松的实现日程列表的样式设计，为用户提供更好的阅读体验。