首页生成一段web前端网吧管理系统会员管理界面带背景图片和导航栏的代码

生成一段web前端网吧管理系统会员管理界面带背景图片和导航栏的代码

时间: 2023-08-23 21:05:55 浏览: 105

以下是一个简单的会员管理界面的代码，包含了一个背景图片和导航栏： ```html <!DOCTYPE html> <html> <head> <title>网吧会员管理系统</title> <style> body { background-image: url("background.jpg"); background-size: cover; margin: 0; } nav { background-color: #333; color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px; } nav a { color: white; text-decoration: none; margin: 0 10px; } h1 { color: white; text-align: center; font-size: 40px; margin-top: 50px; } table { margin: 50px auto; border-collapse: collapse; width: 80%; background-color: white; } th, td { padding: 10px; border: solid black 1px; text-align: center; } th { background-color: #333; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } </style> </head> <body> <nav> <a href="#">首页</a> <a href="#">会员管理</a> <a href="#">订单管理</a> <a href="#">系统设置</a> </nav> <h1>会员列表</h1> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>会员等级</th> <th>余额</th> </tr> <tr> <td>张三</td> <td>男</td> <td>25</td> <td>13888888888</td> <td>VIP</td> <td>500元</td> </tr> <tr> <td>李四</td> <td>女</td> <td>30</td> <td>13999999999</td> <td>普通会员</td> <td>100元</td> </tr> <tr> <td>王五</td> <td>男</td> <td>20</td> <td>13777777777</td> <td>VIP</td> <td>800元</td> </tr> </table> </body> </html> ``` 你可以将这段代码复制到一个 HTML 文件中并保存，同时将 `background.jpg` 替换成你想要的背景图片，放在同一目录下即可。

阅读全文