写一个后台管理页面的代码
时间: 2024-01-05 16:48:57 浏览: 32
好的,以下是一个简单的后台管理页面的代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>后台管理系统</title>
</head>
<body>
<header>
<h1>后台管理系统</h1>
<nav>
<a href="#">首页</a>
<a href="#">用户</a>
<a href="#">设置</a>
<a href="#">退出</a>
</nav>
</header>
<main>
<h2>用户管理</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user1</td>
<td>user1@example.com</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>user2</td>
<td>user2@example.com</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>user3</td>
<td>user3@example.com</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<button>添加用户</button>
</main>
<footer>
<p>版权所有 © 2021 后台管理系统</p>
</footer>
</body>
</html>
```
CSS:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
}
header h1 {
margin: 0;
}
nav {
float: right;
}
nav a {
display: inline-block;
color: #fff;
text-decoration: none;
margin-left: 20px;
}
main {
padding: 20px;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
table th {
text-align: left;
padding: 10px;
background-color: #333;
color: #fff;
}
table td {
border: 1px solid #ccc;
padding: 10px;
}
table button {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
table button + button {
margin-left: 10px;
}
table tbody tr:hover {
background-color: #efefef;
}
button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #666;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
```
该示例包含一个简单的后台管理页面,包括用户管理表格和添加用户按钮。CSS 样式表用于使页面更加美观和易于使用。