好的，以下是一个完整的
微博热搜榜单的HTML和CSS代码：
HTML代码：
```
<div class="weibo-hot">
<div class="weibo-hot-header">
<h2>
微博热搜榜</h2>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">更多</a>
</div>
<ol>
<li>
<span class="weibo-hot-rank">1</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题1#</a>
<span class="weibo-hot-trend up">↑</span>
</li>
<li>
<span class="weibo-hot-rank">2</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题2#</a>
<span class="weibo-hot-trend down">↓</span>
</li>
<li>
<span class="weibo-hot-rank">3</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题3#</a>
<span class="weibo-hot-trend up">↑</span>
</li>
<li>
<span class="weibo-hot-rank">4</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题4#</a>
<span class="weibo-hot-trend up">↑</span>
</li>
<li>
<span class="weibo-hot-rank">5</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题5#</a>
<span class="weibo-hot-trend down">↓</span>
</li>
<li>
<span class="weibo-hot-rank">6</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题6#</a>
<span class="weibo-hot-trend up">↑</span>
</li>
<li>
<span class="weibo-hot-rank">7</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题7#</a>
<span class="weibo-hot-trend down">↓</span>
</li>
<li>
<span class="weibo-hot-rank">8</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题8#</a>
<span class="weibo-hot-trend up">↑</span>
</li>
<li>
<span class="weibo-hot-rank">9</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题9#</a>
<span class="weibo-hot-trend down">↓</span>
</li>
<li>
<span class="weibo-hot-rank">10</span>
<a href=https://blog.csdn.net/m0_72947390/article/details/"#">#
话题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元素进行了排列，设置了一些字体、颜色、边框和填充等样式。
日期：2024-11-11
移动：http://nhjcxspj.xhstdz.com/mobile/quote/78043.html