首页帮我写一个文件列表,它包含文件名称,文件名称下面是文件大小,最右边是有二个按钮功能,一个是刷新,一个是删除按钮

帮我写一个文件列表,它包含文件名称,文件名称下面是文件大小,最右边是有二个按钮功能,一个是刷新,一个是删除按钮

时间: 2024-02-12 12:02:56 浏览: 56

好的，这是一个基本的HTML和CSS实现，你可以根据自己的需求进行修改： ```html <!DOCTYPE html> <html> <head> <title>文件列表</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } tr:hover { background-color: #f5f5f5; } th { background-color: #4CAF50; color: white; } .btn { background-color: #4CAF50; border: none; color: white; padding: 8px 16px; text-align: center; text-decoration: none; display: inline-block; border-radius: 4px; cursor: pointer; } .btn:hover { background-color: #3e8e41; } .btn-delete { background-color: #f44336; } .btn-delete:hover { background-color: #da190b; } </style> </head> <body> <table> <thead> <tr> <th>文件名称</th> <th>文件大小</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>文件1</td> <td>10 MB</td> <td> <button class="btn">刷新</button> <button class="btn btn-delete">删除</button> </td> </tr> <tr> <td>文件2</td> <td>5 MB</td> <td> <button class="btn">刷新</button> <button class="btn btn-delete">删除</button> </td> </tr> <tr> <td>文件3</td> <td>3 MB</td> <td> <button class="btn">刷新</button> <button class="btn btn-delete">删除</button> </td> </tr> </tbody> </table> </body> </html> ``` 在这个例子中，我们使用了一个HTML表格来显示文件列表，其中每一行包含文件名称、文件大小和两个按钮（刷新和删除）。我们使用CSS来设置表格的样式和按钮的样式。

阅读全文