主页
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css">
<title>首页</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #cccccc;
}
li{
list-style: none;
}
a{
color:chartreuse;
text-decoration: none; /*去掉a的下划线*/
}
a:hover{
color: red;
text-decoration:underline;
}
header{
width: 100%;
background: linear-gradient(to top,skyblue,#cccccc);
border-bottom: 1px solid #000000;
overflow: hidden;
height: 60px;
}
header div{
width: 1200px;
margin: 0 auto;
}
header div h1{
float: left;
font-weight: lighter;
line-height: 60px;
margin-left: 20px;
}
header div nav{
float: right;
margin-right: 20px;
}
header div nav ul li{
float: left;
padding-left: 20px;
line-height: 80px;
}
main{
width: 1000px;
height:800px;
margin: 0 auto;
padding-left: 200px; /*将左边菜单挤出来*/
overflow: hidden;
border: 1px solid red;
}
main article{
width: 100%;
min-height: 100%;
float: left;
/*background-color: #f56f56;*/
}
main aside{
float: left;
margin-left: -100%;
min-height: 100%;
position: relative;
left:-200px;
border-right: 1px solid #000;
}
main aside nav{
padding: 20px 30px;
}
main aside nav li{
line-height: 2rem;
}
main article iframe{
min-width: 100%;
min-height: 700px;
margin: auto;
border: none;
}
footer p{
text-align: center;
}
</style>
<header role="header">
<div>
<h1>后台管理系统</h1>
<nav>
<ul>
<li>欢迎管理员：<strong>admin</strong></li>
<li><a href="changepassword.html" target="main">修改密码</a></li>
<li><a href="login.html" onclick="return confirm('是否退出？')">退出登录</a></li>
</ul>
</nav>
</div>
</header>
<!--主体-->
<main role="main">
<article role="content">
<iframe src="welcome.html" name="main"></iframe>
</article>
<!--左侧导航-->
<aside role="menu">
<nav>
<ul><li><a href="setting.html" target="main">系统设置</a></li></ul>
<ul><li><a href="user.html" target="main">用户管理</a></li></ul>
<ul><li><a href="article.html" target="main">文档管理</a></li></ul>
<ul><li><a href="fenlei.html" target="main">分类管理</a></li></ul>
<ul><li><a href="product.html" target="main">产品管理</a></li></ul>
</nav>
</aside>
</main>
<!--底部-->
<footer><p>©版权所有</p></footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
欢迎界面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎进入后台管理</title>
</head>
<body>
<h1>欢迎使用后台管理</h1>
<style>
h1{
text-align: center;
margin: 50px auto;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
系统设置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>系统设置</title>
</head>
<body>
<style>
h2{
text-align: center;
margin: 50px auto;
}
table{
width: 600px;
min-height: 100%;
margin: auto;
}
table ,tr,td{
border: none;
padding: 15px;
}
textarea{
border-radius: 8px;
resize: none;
border: 1px dashed #000;
width:400px;
}
table tr td:first-child{
text-align: right;
height:30px;
}
input[type='text']{
width: 400px;
height:30px;
border: 1px dashed #000;
border-radius: 8px;
padding-left: 15px;
}
input[type='submit']{
width: 100px;
height: 36px;
background-color: #f4f4f4;
color: #000000;
border: 2px solid #000000;
border-radius: 8px;
}
input[type='submit']:hover{
background-color: rebeccapurple;
border: 2px solid #000000;
border-radius: 8px;
cursor: pointer;
}
table tr:last-child td:last-child{
text-align: center;
}
</style>
<h2>系统设置</h2>
<form action="">
<table>
<tr>
<td><label for="title">站点名称:</label></td>
<td><input type="text" name="" id="title" placeholder="建议不超过40个字" required></td>
</tr>
<tr>
<td><label for="keywords">关 键 词:</label></td>
<td><input type="text" name="" id="keywords" placeholder="多个关键词用逗号分隔" required></td>
</tr>
<tr>
<td><label for="description">站点描述:</label></td>
<td><textarea id="description" placeholder="不超过120个中文" cols="30" rows="10" required></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" name="submit">
</td>
</tr>
</table>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
用户管理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
margin: 50px auto;
}
table{
width: 600px;
min-height: 100%;
margin: 0 auto;
border-collapse:collapse;
}
table ,tr ,th,td{
border: 1px solid #000;
}
table th{
height: 50px;
font-weight: bold;
}
table td{
text-align: center;
height: 40px;
}
a{
color:chartreuse;
text-decoration: none; /*去掉a的下划线*/
}
a:hover{
color: red;
text-decoration:underline;
}
p{
text-align: center;
margin-top:20px;
}
p a{
margin: 0 5px;
border: 1px solid #000;
}
p a:first-child{
border: 1px solid #000;
width: 60px;
height:26px;
}
p a:last-child{
border: 1px solid #000;
width: 60px;
height: 26px;
}
p a{
display: inline-block;
width: 24px;
height: 26px;
border: 1px solid #000000;
line-height: 26px;
}
.active{
background-color: aquamarine;
color: #fff;
}
.more{
border: none;
}
</style>
<h2>用户管理</h2>
<table>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>角色</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>admin@qq.com</td>
<td>admin</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>123</td>
<td>123@qq.com</td>
<td>123</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<p>
<a href="">首页</a>
<a href="" class="active">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
文章管理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档管理</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
margin: 50px auto;
}
table{
width: 600px;
min-height: 100%;
margin: 0 auto;
border-collapse:collapse;
}
table ,tr ,th,td{
border: 1px solid #000;
}
table th{
height: 50px;
font-weight: bold;
}
table td{
text-align: center;
height: 40px;
}
table tr td img{
width: 200px;
height: 150px;
}
a{
color:chartreuse;
text-decoration: none; /*去掉a的下划线*/
}
a:hover{
color: red;
text-decoration:underline;
}
p{
text-align: center;
margin-top:20px;
}
p a{
margin: 0 5px;
border: 1px solid #000;
}
p a:first-child{
border: 1px solid #000;
width: 60px;
height:26px;
}
p a:last-child{
border: 1px solid #000;
width: 60px;
height: 26px;
}
p a{
display: inline-block;
width: 24px;
height: 26px;
border: 1px solid #000000;
line-height: 26px;
}
.active{
background-color: aquamarine;
color: #fff;
}
.more{
border: none;
}
</style>
<h2>文档管理</h2>
<table>
<tr>
<th>ID</th>
<th>缩略图</th>
<th>标题</th>
<th>分类</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><img src="https://i8.mifile.cn/a1/pms_1527735134.03584233!560x560.jpg" alt="123"></td>
<td><a href="">标题一</a></td>
<td>手机</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg" alt=""></td>
<td><a href="">标题二</a></td>
<td>手机</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<p>
<a href="">首页</a>
<a href="" class="active">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
分类管理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
margin: 50px auto;
}
table{
width: 600px;
min-height: 100%;
margin: 0 auto;
border-collapse:collapse;
}
table ,tr ,th,td{
border: 1px solid #000;
}
table th{
height: 50px;
font-weight: bold;
}
table td{
text-align: center;
height: 40px;
}
table tr td img{
width:100px;
height:30px;
}
a{
color:chartreuse;
text-decoration: none; /*去掉a的下划线*/
}
a:hover{
color: red;
text-decoration:underline;
}
p{
text-align: center;
margin-top:20px;
}
p a{
margin: 0 5px;
border: 1px solid #000;
}
p a:first-child{
border: 1px solid #000;
width: 60px;
height:26px;
}
p a:last-child{
border: 1px solid #000;
width: 60px;
height: 26px;
}
p a{
display: inline-block;
width: 24px;
height: 26px;
border: 1px solid #000000;
line-height: 26px;
}
.active{
background-color: aquamarine;
color: #fff;
}
.more{
border: none;
}
</style>
<h2>分类管理</h2>
<table>
<tr>
<th>ID</th>
<th>分类名称</th>
<th>层级</th>
<th>是否启用</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>笔记本</td>
<td>顶级</td>
<td style="color: red">禁用</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<p>
<a href="">首页</a>
<a href="" class="active">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
产品管理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品管理</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
margin: 50px auto;
}
table{
width: 600px;
min-height: 100%;
margin: 0 auto;
border-collapse:collapse;
}
table ,tr ,th,td{
border: 1px solid #000;
}
table th{
height: 50px;
font-weight: bold;
}
table td{
text-align: center;
height: 40px;
}
table tr td img{
width: 200px;
height: 150px;
}
a{
color:chartreuse;
text-decoration: none; /*去掉a的下划线*/
}
a:hover{
color: red;
text-decoration:underline;
}
p{
text-align: center;
margin-top:20px;
}
p a{
margin: 0 5px;
border: 1px solid #000;
}
p a:first-child{
border: 1px solid #000;
width: 60px;
height:26px;
}
p a:last-child{
border: 1px solid #000;
width: 60px;
height: 26px;
}
p a{
display: inline-block;
width: 24px;
height: 26px;
border: 1px solid #000000;
line-height: 26px;
}
.active{
background-color: aquamarine;
color: #fff;
}
.more{
border: none;
}
</style>
<h2>产品管理</h2>
<table>
<tr>
<th>ID</th>
<th>图片</th>
<th>型号</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><img src="https://i8.mifile.cn/a1/pms_1527735134.03584233!560x560.jpg" alt="123"></td>
<td>小米8</td>
<td>2699元</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg" alt=""></td>
<td>小米8 SE</td>
<td>1799元</td>
<td><a href="" >编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<p>
<a href="">首页</a>
<a href="" class="active">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
修改密码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改密码</title>
</head>
<body>
<style>
h2{
text-align: center;
margin: 50px auto;
}
table{
width: 600px;
min-height: 100%;
margin: auto;
}
table ,tr,td{
border: none;
padding: 15px;
}
table tr td:first-child{
text-align: right;
height:30px;
}
input[type='password']{
width: 400px;
height:30px;
border: 1px dashed #000;
border-radius: 8px;
padding-left: 15px;
}
input[type='submit']{
width: 100px;
height: 36px;
background-color: #f4f4f4;
color: #000000;
border: 2px solid #000000;
border-radius: 8px;
}
input[type='submit']:hover{
background-color: rebeccapurple;
border: 2px solid #000000;
border-radius: 8px;
cursor: pointer;
}
table tr:last-child td:last-child{
text-align: center;
}
</style>
<form action="">
<table>
<caption><h2>修改密码</h2></caption>
<tr>
<td><label for="password">原密码：</label></td>
<td><input type="password" name="password" id="password" placeholder="请输入原密码"></td>
</tr>
<tr>
<td><label for="newpassword">新密码：</label></td>
<td><input type="password" name="password" id="newpassword" placeholder="请输入新密码"></td>
</tr>
<tr>
<td colspan="2" >
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
登录
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>登录</title> </head> <body> <form action="" method="get"> <!--get/post提交方式--> <table width="500px" align="center" style="background-color: skyblue" cellspacing="0" cellpadding="8px"> <caption><h2>用户登录</h2></caption> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td align="right"><label for="num">帐号:</label></td> <td><input type="text" name="num" id="num" placeholder="请输入账号" /></td> </tr> <tr> <td align="right"><label for="password">密码:</label></td> <td><input type="password" name="password" id="password" placeholder="请输入密码" /></td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td colspan="2" > <input type="submit" value="提交" style="margin-left: 100px;border-radius: 8px;cursor:pointer" /> </td> </tr> </table> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
