利用css、html、js做一个后台管理页面
时间: 2023-12-15 21:03:13 浏览: 46
好的,我可以为您提供一个简单的后台管理页面的示例,使用HTML、CSS和JavaScript实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<h1>菜单</h1>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">订单管理</a></li>
<li><a href="#">商品管理</a></li>
<li><a href="#">统计报表</a></li>
</ul>
</div>
<div class="main">
<h1>欢迎来到后台管理系统</h1>
<p>这是一个简单的后台管理页面示例,使用HTML、CSS和JavaScript实现。</p>
</div>
<script src="script.js"></script>
</body>
</html>
```
```css
/* style.css */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
.sidebar {
float: left;
width: 200px;
height: 100%;
background-color: #333;
color: #fff;
padding: 20px;
box-sizing: border-box;
}
.sidebar h1 {
margin: 0;
padding: 0;
font-size: 24px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar ul li {
margin: 0;
padding: 0;
}
.sidebar ul li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
.sidebar ul li a:hover {
background-color: #555;
}
.main {
float: left;
width: calc(100% - 200px);
height: 100%;
padding: 20px;
box-sizing: border-box;
}
.main h1 {
margin: 0 0 20px 0;
padding: 0;
font-size: 32px;
}
.main p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
}
```
```javascript
// script.js
// 点击菜单项时,添加active类名
window.onload = function() {
var menuItems = document.querySelectorAll('.sidebar ul li a');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].onclick = function() {
for (var j = 0; j < menuItems.length; j++) {
menuItems[j].classList.remove('active');
}
this.classList.add('active');
}
}
}
```
这个示例页面由两个部分组成:侧边栏(`.sidebar`)和主要内容区域(`.main`)。侧边栏包含一个菜单,菜单项可以点击并添加`active`类名。主要内容区域包含一个欢迎信息和一些说明文字。
您可以根据自己的需求对这个示例进行修改和定制,添加更多的菜单项、页面元素和交互效果。
希望这个示例对您有所帮助!
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)