用css写一个微博热搜榜单
时间: 2023-08-04 17:21:28 浏览: 123
一个超酷的CSS列表排行榜
好的,以下是一个简单的微博热搜榜单的CSS代码:
```
.weibo-hot {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
.weibo-hot h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.weibo-hot ol {
list-style: none;
margin: 0;
padding: 0;
}
.weibo-hot li {
margin-bottom: 5px;
}
.weibo-hot li a {
color: #333;
text-decoration: none;
display: inline-block;
padding: 5px;
border-radius: 3px;
background-color: #f5f5f5;
}
.weibo-hot li a:hover {
background-color: #ccc;
color: #fff;
}
```
上述代码中,我们设置了weibo-hot元素的宽度、边框、内边距和圆角。h2元素的字体大小、粗细和下边距都已经设置好。ol元素的样式设置为无序列表,没有外边距和内边距。li元素的下边距设置为5px,a元素设置为内联块元素,具有一定的填充、圆角和背景色。a:hover设置为鼠标悬停时的背景颜色和字体颜色。
该实例的效果是:展示了一个带有样式美化的微博热搜榜单,包含热门话题名称和链接。你可以根据需要对其进行样式和功能扩展。
阅读全文