用html做一个仓库管理系统的页面
时间: 2023-12-23 11:02:23 浏览: 33
好的,下面是一个简单的仓库管理系统的页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>仓库管理系统</title>
<meta charset="UTF-8">
<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;
}
form {
margin-top: 20px;
}
input[type=text], select {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>仓库管理系统</h1>
<table>
<tr>
<th>仓库编号</th>
<th>仓库名称</th>
<th>仓库地址</th>
<th>联系电话</th>
</tr>
<tr>
<td>001</td>
<td>北京仓库</td>
<td>北京市朝阳区</td>
<td>010-12345678</td>
</tr>
<tr>
<td>002</td>
<td>上海仓库</td>
<td>上海市浦东新区</td>
<td>021-87654321</td>
</tr>
</table>
<form>
<h2>添加新仓库</h2>
<label for="number">仓库编号:</label>
<input type="text" id="number" name="number"><br>
<label for="name">仓库名称:</label>
<input type="text" id="name" name="name"><br>
<label for="address">仓库地址:</label>
<input type="text" id="address" name="address"><br>
<label for="phone">联系电话:</label>
<input type="text" id="phone" name="phone"><br>
<input type="submit" value="添加">
</form>
</body>
</html>
```
这个页面包含一个简单的表格,显示了已有的仓库信息,并提供一个表单用于添加新仓库。你可以根据需要增加更多功能和样式。