用css写一个完整微博热搜榜单

好的，以下是一个完整的微博热搜榜单的HTML和CSS代码：

HTML代码：

<div class="weibo-hot">
  <div class="weibo-hot-header">
    <h2>微博热搜榜</h2>
    <a href="#">更多</a>
  </div>
  <ol>
    <li>
      <span class="weibo-hot-rank">1</span>
      <a href="#">#话题1#</a>
      <span class="weibo-hot-trend up">↑</span>
    </li>
    <li>
      <span class="weibo-hot-rank">2</span>
      <a href="#">#话题2#</a>
      <span class="weibo-hot-trend down">↓</span>
    </li>
    <li>
      <span class="weibo-hot-rank">3</span>
      <a href="#">#话题3#</a>
      <span class="weibo-hot-trend up">↑</span>
    </li>
    <li>
      <span class="weibo-hot-rank">4</span>
      <a href="#">#话题4#</a>
      <span class="weibo-hot-trend up">↑</span>
    </li>
    <li>
      <span class="weibo-hot-rank">5</span>
      <a href="#">#话题5#</a>
      <span class="weibo-hot-trend down">↓</span>
    </li>
    <li>
      <span class="weibo-hot-rank">6</span>
      <a href="#">#话题6#</a>
      <span class="weibo-hot-trend up">↑</span>
    </li>
    <li>
      <span class="weibo-hot-rank">7</span>
      <a href="#">#话题7#</a>
      <span class="weibo-hot-trend down">↓</span>
    </li>
    <li>
      <span class="weibo-hot-rank">8</span>
      <a href="#">#话题8#</a>
      <span class="weibo-hot-trend up">↑</span>
    </li>
    <li>
      <span class="weibo-hot-rank">9</span>
      <a href="#">#话题9#</a>
      <span class="weibo-hot-trend down">↓</span>
    </li>
    <li>
      <span class="weibo-hot-rank">10</span>
      <a href="#">#话题10#</a>
      <span class="weibo-hot-trend up">↑</span>
    </li>
  </ol>
</div>

CSS代码：

.weibo-hot {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.weibo-hot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.weibo-hot h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.weibo-hot-header a {
  font-size: 12px;
  color: #666;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 3px;
}

.weibo-hot-header a:hover {
  background-color: #f5f5f5;
}

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

.weibo-hot li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.weibo-hot-rank {
  font-size: 16px;
  font-weight: bold;
  color: #f00;
  margin-right: 5px;
}

.weibo-hot li a {
  color: #333;
  text-decoration: none;
}

.weibo-hot-trend {
  font-size: 14px;
  font-weight: bold;
  color: #666;
  margin-left: 5px;
}

.weibo-hot-trend.up {
  color: #f00;
}

.weibo-hot-trend.down {
  color: #0f0;
}

上述代码中，我们增加了一个weibo-hot-header元素，用于包含标题和更多按钮。ol元素中每个li元素都包含排名、话题名称和趋势箭头。我们使用flex布局对weibo-hot-header和li元素进行了排列，设置了一些字体、颜色、边框和填充等样式。

该实例的效果是：展示了一个样式美化和功能完善的微博热搜榜单，包含热门话题名称、排名和趋势箭头等信息。你可以根据需要对其进行样式和功能扩展。