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

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、/*border:solid 1px #f00;*/

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、/*这是cont部分*/

116、.cont{

117、width:1000px;

118、height:100%;

119、overflow:auto;

120、/*border:solid 1px #ccc;*/

121、margin:0px auto;

122、}

123、/* 这是左边栏部分开始*/

124、.cont .left-nav{

125、width:200px;

126、/*border:solid 1px #f00;*/

127、float:left;

128、}

129、/* 导航效果1开始*/

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、/* 导航效果1结束*/

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、/*background:#eee;*/

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

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

179、/*border:solid 1px #f00;*/

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、/*height:190px;*/

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、/*width:60px;*/

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、至此，案例制作完成。

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

关键词：