利用web前端编写一段网吧管理系统的商品信息代码
时间: 2023-08-23 17:05:44 浏览: 126
web前端期末节课大作业~html学生信息管理系统模板
以下是一个简单的网吧管理系统的商品信息代码,包括商品名称、价格、库存等信息:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>网吧商品管理系统</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>网吧商品管理系统</h1>
<table>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>库存</th>
</tr>
<tr>
<td>爆米花</td>
<td>10元/份</td>
<td>50份</td>
</tr>
<tr>
<td>可乐</td>
<td>5元/瓶</td>
<td>100瓶</td>
</tr>
<tr>
<td>薯片</td>
<td>8元/袋</td>
<td>30袋</td>
</tr>
<tr>
<td>矿泉水</td>
<td>2元/瓶</td>
<td>200瓶</td>
</tr>
</table>
</body>
</html>
```
CSS 代码:
```css
h1 {
text-align: center;
}
table {
margin: auto;
border-collapse: collapse;
width: 80%;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid black;
}
th {
background-color: #eee;
}
```
该代码使用了 HTML 表格标签和 CSS 样式表,实现了一个简单的网吧商品管理系统页面。页面中展示了四种商品的名称、价格和库存信息,方便管理员进行管理和操作。
阅读全文