你们好，最近小未来发现有诸多的小伙伴们对于网站后台管理员权限是多少，网站后台管理这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、 这个案例是通过一个比较简单易懂的方法实现的网站后台管理接口，对于网站前端的开发和学习有很大的帮助和促进作用。知识点主要有折叠菜单和表格颜色交替。案例效果如下：

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、 h2a href='manage1.html'网站后台管理/a/h2

16、 /div

17、 div

18、 ul

19、 Lia href='#' Login /a/Li

20、 Lia href='#' Logout /a/Li

21、 Lia href='#' Registration /a/Li

22、 /ul

23、 /div

24、 /div

25、 div

26、 div

27、 ul

28、 lia href='# '系统功能spangt/span/a

29、 ul

30、 Lia href='# '系统信息/a/li

31、 Lia href='# '管理员管理/a/li

32、 Lia href='#' Exit /a/Li

33、 /ul

34、 /li

35、 lia href='# '栏目功能spangt/span/a

36、 ul

37、 Lia href='# '列管理/a/li

38、 Lia href='# '列修改/a/li

39、 Lia href='#' Exit /a/Li

40、 /ul

41、 /li

42、 /ul

43、 /div

44、 div

45、 div

46、 Pa href='# '主页管理/a/a href='# '列/a/a href='# '添加列/a/p

47、 /div

48、 div

49、 table

50、 th scope=' col ' id/th scope=' col '订单号th scope=' col '订单日期th scope=' col '总价th scope=' col '状态/th/tr

51、 trtd 1/tdtd 101/tdtd 2017-1-3 7:10:30/tdtd 177.0/tdtd出库/td/tr

52、 trtd 2/tdtd 103/tdtd 2017-4-1 21:01:10/tdtd 899.3/tdtd出库/td/tr

53、 trtd 3/tdtd 104/tdtd 2017-5-1 20:12:11/tdtd 1999.0/tdtd未确认/td/tr

54、 /table

55、 /div

56、 div

57、 table

58、 caption订单02/caption

59、 trth scope='col'id/thth scope='col'订单号/thth scope='col'订单日期/thth scope='col'总价/thth scope='col'状态/th/tr

60、 trtd1/tdtd201/tdtd2017-1-15 7:10:30/tdtd350.0/tdtd出库/td/tr

61、 trtd2/tdtd202/tdtd2017-10-1 21:01:10/tdtd2000/tdtd已付款/td/tr

62、 trtd3/tdtd205/tdtd2017-11-1 20:12:11/tdtd2999.0/tdtd未确认/td/tr

63、 /table

64、 /div

65、 /div

66、 /div

67、 /body

68、 /html

69、 外部样式文件ma1.css的代码如下：

70、 @charset 'utf-8';

71、 *{

72、 margin: 0px;

73、 padding:0px;

74、 }

75、 body{

76、 font-size:14px;

77、 font-family: 'microsoft yahei';

78、 }

79、 a{

80、 color:#0c478f;

81、 text-decoration: none;

82、 }

83、 a:hover{

84、 color:#333;

85、 }

86、 ul{

87、 list-style-type:none;

88、 }

89、

90、 .nav{

91、 width:1000px;

92、 height:50px;

93、 border:solid 1px #ccc;

94、 margin:0px auto 10px;

95、 background:#ddd;

96、 }

97、 .nav .logo{

98、 width:200px;

99、 float:left;

100、

101、 margin:0px 0px 0px 20px;

102、 }

103、 .nav .logo h2{

104、 font-weight:normal;

105、 line-height:50px;

106、 }

107、 .nav .dh{

108、 float:right;

109、 line-height:50px;

110、 }

111、 .nav .dh ul li{

112、 float:left;

113、 width:70px;

114、 }

115、

116、 .cont{

117、 width:1000px;

118、 height:100%;

119、 overflow:auto;

120、

121、 margin:0px auto;

122、 }

123、

124、 .cont .left-nav{

125、 width:200px;

126、

127、 float:left;

128、 }

129、

130、 .cont .left-nav ul li ul{

131、 display:none;

132、 }

133、 .cont .left-nav ul li:hover ul{

134、 display:block;

135、 margin: -5px 0px 0px 0px;

136、 border-left:solid 1px #ccc;

137、 border-right:solid 1px #ccc;

138、 border-bottom:solid 1px #ccc;

139、 }

140、 .cont .left-nav ul li a{

141、 display:block;

142、 padding:5px 10px;

143、 background:#eee;

144、 margin:0px 0px 5px 0px;

145、 border:solid 1px #ccc;

146、 border-radius:3px;

147、 }

148、 .cont .left-nav ul li:hover ul li a{

149、 display:block;

150、 padding:5px 10px;

151、 background:#fff;

152、 border:none;

153、 margin:0px 0px 5px 0px;

154、 }

155、 .cont .left-nav ul li:hover ul li a:hover{

156、 background:#ddd;

157、 }

158、 .cont .left-nav ul li span{

159、 font-weight: bold;

160、 float:right;

161、 }

162、

163、

164、

165、 .cont .right-d{

166、 width:780px;

167、 background:#ccc;

168、 float:left;

169、 margin:0px 0px 0px 10px;

170、 padding:15px 0px 20px 0px;

171、 }

172、 .cont .right-d .right-top{

173、 width:98%;

174、 height:30px;

175、 line-height:30px;

176、

177、 margin:0px 0px 10px 0px;

178、 padding:0px 0px 0px 10px;

179、

180、 }

181、

182、 .cont .right-d .dd-out{

183、 width:45%;

184、 border:solid 1px #ccc;

185、 padding:0px 10px 15px 10px;

186、 background:#fff;

187、 border-radius:5px;

188、 display: inline-block;

189、 }

190、 .cont .right-d .dd-out .dd{

191、 width:100%;

192、

193、 border-collapse: collapse;

194、 }

195、 .cont .right-d .dd-out .dd caption{

196、 width:103%;

197、 font-size:16px;

198、 margin:0px 0px 10px -3%;

199、 border-bottom:solid 1px #aaa;

200、 background:#ddd;

201、 padding:15px 0px 15px 10px;

202、 text-align: left;

203、 }

204、 .cont .right-d .dd-out .dd th,dd td{

205、 border-bottom:solid 1px #ccc;

206、

207、 height:45px;

208、 text-align:center;

209、 }

210、 .cont .right-d .dd-out .dd th{

211、 background:#eee;

212、 color:#333;

213、 }

214、 .cont .right-d .dd-out .dd tr:hover{

215、 background:#aaa;

216、 color:#eee;

217、 }

218、

219、 至此，案例制作完成。

以上就是网站后台管理这篇文章的一些介绍，希望对大家有所帮助。