你们好，最近小未来发现有诸多的小伙伴们对于网站后台管理账号和密码爆破工具，网站后台管理这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、本次案例用比较简单、容易理解的方法实现网站后台管理界面，对于网站前端开发学习有很好的帮助与促进作用。知识点主要包括折叠菜单、表格的隔行变色等。案例效果如下：
2、案例一共有2个文件，一个是网页文件manage1.html，一个外部样式文件ma1.css。折叠菜单使用项目列表（ul）的嵌套做结构，用CSS样式逐级实现。
3、网页文件manage1.html的代码如下：
4、<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
5、"http://www.w3.org/TR/html4/strict.dtd">
6、<html xmlns="http://www.w3.org/1999/xhtml">
7、<head>
8、<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
9、<title></title>
10、<link rel="stylesheet" type="text/css" href="css/ma1.css"/>
11、</head>
12、<body>
13、<div>
14、<div>
15、<h2><a href="manage1.html">网站后台管理</a></h2>
16、</div>
17、<div>
18、<ul>
19、<li><a href="#">登陆</a></li>
20、<li><a href="#">注销</a></li>
21、<li><a href="#">注册</a></li>
22、</ul>
23、</div>
24、</div>
25、<div>
26、<div>
27、<ul>
28、<li><a href="#">系统功能<span>></span></a>
29、<ul>
30、<li><a href="#">系统信息</a></li>
31、<li><a href="#">管理员管理</a></li>
32、<li><a href="#">退出</a></li>
33、</ul>
34、</li>
35、<li><a href="#">栏目功能<span>></span></a>
36、<ul>
37、<li><a href="#">栏目管理</a></li>
38、<li><a href="#">栏目修改</a></li>
39、<li><a href="#">退出</a></li>
40、</ul>
41、</li>
42、</ul>
43、</div>
44、<div>
45、<div>
46、<p><a href="#">首页管理</a> / <a href="#">栏目</a> / <a href="#">增加栏目</a></p>
47、</div>
48、<div>
49、<table>
50、<caption>订单01</caption>
51、<tr><th scope="col">id</th><th scope="col">订单号</th><th scope="col">订单日期</th><th scope="col">总价</th><th scope="col">状态</th></tr>
52、<tr><td>1</td><td>101</td><td>2017-1-3 7:10:30</td><td>177.0</td><td>出库</td></tr>
53、<tr><td>2</td><td>103</td><td>2017-4-1 21:01:10</td><td>899.3</td><td>出库</td></tr>
54、<tr><td>3</td><td>104</td><td>2017-5-1 20:12:11</td><td>1999.0</td><td>未确认</td></tr>
55、</table>
56、</div>
57、<div>
58、<table>
59、<caption>订单02</caption>
60、<tr><th scope="col">id</th><th scope="col">订单号</th><th scope="col">订单日期</th><th scope="col">总价</th><th scope="col">状态</th></tr>
61、<tr><td>1</td><td>201</td><td>2017-1-15 7:10:30</td><td>350.0</td><td>出库</td></tr>
62、<tr><td>2</td><td>202</td><td>2017-10-1 21:01:10</td><td>2000</td><td>已付款</td></tr>
63、<tr><td>3</td><td>205</td><td>2017-11-1 20:12:11</td><td>2999.0</td><td>未确认</td></tr>
64、</table>
65、</div>
66、</div>
67、</div>
68、</body>
69、</html>
70、外部样式文件ma1.css的代码如下：
71、@charset "utf-8";
72、*{
73、margin: 0px;
74、padding:0px;
75、}
76、body{
77、font-size:14px;
78、font-family: "microsoft yahei";
79、}
80、a{
81、color:#0c478f;
82、text-decoration: none;
83、}
84、a:hover{
85、color:#333;
86、}
87、ul{
88、list-style-type:none;
89、}
90、/*这是导航部分*/
91、.nav{
92、width:1000px;
93、height:50px;
94、border:solid 1px #ccc;
95、margin:0px auto 10px;
96、background:#ddd;
97、}
98、.nav .logo{
99、width:200px;
100、float:left;
101、/*border:solid 1px #f00;*/
102、margin:0px 0px 0px 20px;
103、}
104、.nav .logo h2{
105、font-weight:normal;
106、line-height:50px;
107、}
108、.nav .dh{
109、float:right;
110、line-height:50px;
111、}
112、.nav .dh ul li{
113、float:left;
114、width:70px;
115、}
116、/*这是cont部分*/
117、.cont{
118、width:1000px;
119、height:100%;
120、overflow:auto;
121、/*border:solid 1px #ccc;*/
122、margin:0px auto;
123、}
124、/* 这是左边栏部分开始*/
125、.cont .left-nav{
126、width:200px;
127、/*border:solid 1px #f00;*/
128、float:left;
129、}
130、/* 导航效果1开始*/
131、.cont .left-nav ul li ul{
132、display:none;
133、}
134、.cont .left-nav ul li:hover ul{
135、display:block;
136、margin: -5px 0px 0px 0px;
137、border-left:solid 1px #ccc;
138、border-right:solid 1px #ccc;
139、border-bottom:solid 1px #ccc;
140、}
141、.cont .left-nav ul li a{
142、display:block;
143、padding:5px 10px;
144、background:#eee;
145、margin:0px 0px 5px 0px;
146、border:solid 1px #ccc;
147、border-radius:3px;
148、}
149、.cont .left-nav ul li:hover ul li a{
150、display:block;
151、padding:5px 10px;
152、background:#fff;
153、border:none;
154、margin:0px 0px 5px 0px;
155、}
156、.cont .left-nav ul li:hover ul li a:hover{
157、background:#ddd;
158、}
159、.cont .left-nav ul li span{
160、font-weight: bold;
161、float:right;
162、}
163、/* 导航效果1结束*/
164、/* 这是左边栏部分结束*/
165、/*这是右边部分*/
166、.cont .right-d{
167、width:780px;
168、background:#ccc;
169、float:left;
170、margin:0px 0px 0px 10px;
171、padding:15px 0px 20px 0px;
172、}
173、.cont .right-d .right-top{
174、width:98%;
175、height:30px;
176、line-height:30px;
177、/*background:#eee;*/
178、margin:0px 0px 10px 0px;
179、padding:0px 0px 0px 10px;
180、/*border:solid 1px #f00;*/
181、}
182、/*订单部分开始*/
183、.cont .right-d .dd-out{
184、width:45%;
185、border:solid 1px #ccc;
186、padding:0px 10px 15px 10px;
187、background:#fff;
188、border-radius:5px;
189、display: inline-block;
190、}
191、.cont .right-d .dd-out .dd{
192、width:100%;
193、/*height:190px;*/
194、border-collapse: collapse; /*边框合并*/
195、}
196、.cont .right-d .dd-out .dd caption{
197、width:103%;
198、font-size:16px;
199、margin:0px 0px 10px -3%;
200、border-bottom:solid 1px #aaa;
201、background:#ddd;
202、padding:15px 0px 15px 10px;
203、text-align: left;
204、}
205、.cont .right-d .dd-out .dd th,.dd td{
206、border-bottom:solid 1px #ccc;
207、/*width:60px;*/
208、height:45px;
209、text-align:center;
210、}
211、.cont .right-d .dd-out .dd th{
212、background:#eee;
213、color:#333;
214、}
215、.cont .right-d .dd-out .dd tr:hover{
216、background:#aaa;
217、color:#eee;
218、}
219、/*订单部分结束*/
220、至此，案例制作完成。
以上就是网站后台管理这篇文章的一些介绍，希望对大家有所帮助。