网站后台怎么搭建（网站后台）
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>gt;</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>gt;</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、至此，案例制作完成。
以上就是网站后台这篇文章的一些介绍，希望对大家有所帮助。