首页用html+css写一个侧边排行榜

用html+css写一个侧边排行榜

时间: 2023-10-29 08:07:04 浏览: 36

以下是一个使用 HTML 和 CSS 创建侧边排行榜的示例代码： ```html <!DOCTYPE html> <html> <head> <style> /* 侧边排行榜样式 */ .sidebar { width: 200px; background-color: #f1f1f1; height: 100%; position: fixed; left: 0; top: 0; } .sidebar h2 { text-align: center; padding: 10px; margin: 0; background-color: #ccc; } .rankings { list-style-type: none; padding: 0; margin: 0; } .rankings li { padding: 10px; border-bottom: 1px solid #ddd; } .rankings li:first-child { font-weight: bold; } .rankings li span { float: right; } </style> </head> <body> <div class="sidebar"> <h2>排行榜</h2> <ul class="rankings"> <li>项目1<span>100</span></li> <li>项目2<span>90</span></li> <li>项目3<span>85</span></li> <li>项目4<span>80</span></li> <li>项目5<span>75</span></li> </ul> </div> </body> </html> ``` 你可以将上述代码复制到一个 HTML 文件中，并在浏览器中打开查看效果。这是一个简单的侧边排行榜，使用 `<ul>` 和 `<li>` 元素来展示排行榜的项目和分数。你可以根据需要进行样式调整和内容更新。