用html代码写 农产品信息管理页面
时间: 2023-12-18 08:02:19 浏览: 34
好的,以下是一个简单的农产品信息管理页面的HTML代码示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>农产品信息管理页面</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1, h2, h3 {
text-align: center;
}
nav {
background-color: #333;
color: #fff;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
nav a:hover {
background-color: #666;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
text-align: center;
padding: 10px;
border: 1px solid #ccc;
}
th {
background-color: #333;
color: #fff;
}
form {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], textarea {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"], input[type="reset"] {
background-color: #333;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
background-color: #666;
}
</style>
</head>
<body>
<header>
<h1>农产品信息管理系统</h1>
<nav>
<a href="#">首页</a>
<a href="#">添加产品</a>
<a href="#">查看产品</a>
<a href="#">联系我们</a>
</nav>
</header>
<main>
<h2>添加产品</h2>
<form>
<label for="name">名称:</label>
<input type="text" id="name" name="name" required>
<label for="category">类别:</label>
<select id="category" name="category" required>
<option value="水果">水果</option>
<option value="蔬菜">蔬菜</option>
<option value="畜禽">畜禽</option>
</select>
<label for="price">价格:</label>
<input type="text" id="price" name="price" required>
<label for="description">描述:</label>
<textarea id="description" name="description" rows="5"></textarea>
<input type="submit" value="添加">
<input type="reset" value="重置">
</form>
<h2>产品列表</h2>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>类别</th>
<th>价格</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>苹果</td>
<td>水果</td>
<td>5.00元/斤</td>
<td>红富士,口感脆甜</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>黄瓜</td>
<td>蔬菜</td>
<td>2.00元/斤</td>
<td>新鲜,口感爽脆</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</main>
<footer>
<p>版权所有 © 2021 农产品信息管理系统</p>
</footer>
</body>
</html>
```
这段代码实现了一个简单的农产品信息管理页面,包括导航栏、表单、表格等基本元素。您可以根据需要进行修改和扩展。注意,这只是一个示例,实际项目中需要根据具体需求进行设计和开发。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)