[分享]css做一个活动列表

CSS是前端开发中不可或缺的技能，它可以让我们以更加优雅的方式呈现出精美的页面效果。本文将介绍如何使用CSS来制作一个简单的活动列表。 .activitylist { margin: 0; padd...

CSS是前端开发中不可或缺的技能，它可以让我们以更加优雅的方式呈现出精美的页面效果。本文将介绍如何使用CSS来制作一个简单的活动列表。

  .activity-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .activity-list li {
      padding: 20px;
      border-bottom: 1px solid #ccc;
    }
    
    .activity-list li:last-child {
      border-bottom: none;
    }
    
    .activity-list li:hover {
      background-color: #eee;
    } 

首先，我们需要将列表的样式重置，去掉默认的样式，这样才能更好地控制列表的样式。

接着，设置每个列表项的padding和border样式，让它们之间有一定的间隔和边框线。

最后，以:hover伪类设置鼠标悬停时的背景色，让用户能够清晰地看出当前鼠标所在的列表项。

使用以上CSS代码，我们可以轻松地制作一个简单的活动列表。当然，这只是一个基础的样式，我们还可以通过改变字体大小、颜色等样式来进一步美化列表。