收藏
批改状态：合格
老师批语：
代码
<!DOCTYPE html> <!--file: admin/index.html 起始页--> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style.css"> <title>网站后台管理系统</title> </head> <body> <!--header[role="header"]+main[role="main"]>article[role="content"]+aside--> <!--header[role="header"]+main[role="main"]>article[role="content"]+aside^footer[role="copyright"]--> <header role="header"> <div> <h1>后台管理系统</h1> <nav role="user1"> <ul> <li>欢迎：<strong>admin</strong></li> <li><a href="modify_pwd.html" target="ad">修改密码</a></li> <li><a href="">退出</a></li> </ul> </nav> </div> </header> <!--圣杯两列布局--> <main role="main"> <article role="content"> <iframe src="welcome.html" name="ad"></iframe> <footer role="copyright"> <p><a href="http://www.php.cn">php.cn</a>©版权所有</p> </footer> </article> <aside> <nav role="option"> <ul> <li><a href="setting.html" target="ad">系统设置</a></li> <li><a href="user.html" target="ad">用户管理</a></li> <li><a href="article.html" target="ad">文档管理</a></li> <li><a href="category.html" target="ad">分类管理</a></li> <li><a href="product.html" target="ad">产品管理</a></li> </ul> </nav> </aside> </main> </body> </html>
点击 "运行实例" 按钮查看在线实
<!DOCTYPE html>
<!--file:admin/setting.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>系统设置</title>
<link rel="stylesheet" href="static/css/style.css">
<style type="text/css">
h1 {
font-weight: lighter;
text-indent: 4rem;
background-color: lightgray;
height:3rem;
line-height: 3rem;
}
table {
margin: auto;
font-size: 14px;
}
table td {
padding-top: 20px;
}
table td:first-child {
padding-right: 20px;
text-align: right;
}
input[type="text"] {
width: 420px;
height: 32px;
border: 1px solid #666;
border-radius: 2px;
padding-left: 15px;
}
textarea {
width: 420px;
height: 180px;
border: 1px solid #666;
border-radius: 2px;
padding-left: 15px;
resize: none;
}
input[type="submit"] {
width: 100px;
height: 38px;
font-size: 18px;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 3px;
margin-right: 60px;
}
input[type="submit"]:hover {
color: white;
background-color: black;
cursor: pointer;
}
</style>
</head>
<body>
<h1>系统设置</h1>
<form action="" method="post">
<table>
<tr>
<td><label for="siteTitle">站点名称:</label></td>
<td><input type="text" id="siteTitle" placeholder="建议不超过40个中文"></td>
</tr>
<tr>
<td><label for="keywords">关键字:</label></td>
<td><input type="text" id="keywords" placeholder="多个关键字之间用逗号隔开"></td>
</tr>
<tr>
<td><label for="desc">站点描述:</label></td>
<td><textarea name="desc" id="desc" rows="10" cols="30" placeholder="不超过120中文"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="提交" onclick="alert('提交成功！')"></td>
</tr>
</table>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实
<!DOCTYPE html>
<!--file:admin/user.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" href="static/css/style.css">
<style type="text/css">
h1 {
font-weight: lighter;
text-indent: 4rem;
background-color: lightgray;
height:3rem;
line-height: 3rem;
}
/*表格样式*/
table,th,td{
border:1px solid #666;
}
table{
width:650px;
margin:20px auto 0;
border-collapse:collapse;
text-align:center;
}
table tr:first-child{
background-color: lightskyblue;
font-size:16px;
}
td{
font-size:14px;
padding:10px;
}
section,nav{
/*width:800px;*/
}
/*分页样式*/
nav{
height:60px;
width:800px;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
nav ul li{
display:inline;
margin-left:3px;
text-align:center;
}
nav li a{
display: inline-block;
border:1px solid #666;
border-radius:2px;
width:20px;
height:26px;
text-align: center;
padding:0 3px;
line-height: 26px;
}
nav .active{
background-color:lightgreen;
}
nav li:first-child a,nav li:last-child a{
width:56px;
}
nav li:nth-last-child(2) a{
border:none;
}
</style>
</head>
<body>
<h1>用户管理</h1>
<section>
<table>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>角色</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>a@anmuo.com</td>
<td>超级管理员</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>peter</td>
<td>peter@anmuo.com</td>
<td>讲师</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>zhu</td>
<td>zhu@anmuo.com</td>
<td>管理员</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>猪哥</td>
<td>zhuge@anmuo.com</td>
<td>版主</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
</section>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="" class="active">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="" class="more">...</a></li>
<li><a href="">尾页</a></li>
</ul>
</nav>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<!--file:admin article.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档管理</title>
<link rel="stylesheet" href="static/css/style.css">
<style type="text/css">
/*标题样式*/
h1{
font-weight:lighter;
text-indent:4rem;
background-color:lightgray;
height:3rem;
line-height: 3rem;
}
/*表格样式*/
table,th,td{
border:1px solid #666;
font-size:14px;
padding:6px;
}
table{
border-collapse:collapse;
text-align:center;
margin:20px auto 0;
}
table tr:first-child{
background-color:lightskyblue;
}
/*分页样式*/
nav{
width:800px;
height:60px;
display:table-cell;
vertical-align:bottom;
text-align: center;
}
nav ul li{
display:inline;
margin-left:3px;
text-align:center;
}
nav li a{
display:inline-block;
width:26px;
height:26px;
border:1px solid #666;
border-radius:3px;
text-align: center;
line-height: 26px;
}
nav li:first-child a,nav li:last-child a{
width:56px;
}
nav li .active{
background-color:lightgreen;
}
nav li .more{
border:none;
}
</style>
</head>
<body>
<h1>文档管理</h1>
<!--section(>table>(tr>th*5)+tr*4>td*5)+nav>ul>li*7>a-->
<section>
<table>
<tr>
<th>ID</th>
<th>标题图片</th>
<th>文档标题</th>
<th>所属分类</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><img src="./static/images/1.jpg" width="40px" title="iPhone X 系列"></td>
<td><a href="">Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="./static/images/2.jpg" width="40px" title="华为P20"></td>
<td><a href="">华为P20手机将全面采用自主研发的麒麟系统xin片</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="./static/images/3.jpg" width="40px" title="小米9手机"></td>
<td><a href="">小米9手机预计在明年8月正式上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="./static/images/4.jpg" width="40px" title="OPPO手机"></td>
<td><a href="">OPPO手机勇夺印度市销售冠军</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
</section>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="" class="active">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="" class="more">...</a></li>
<li><a href="">尾页</a></li>
</ul>
</nav>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<!--file: admin/category.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
<link href="./static/css/style.css" rel="stylesheet">
<style type="text/css">
/*标题样式*/
h1{
font-weight:lighter;
text-indent:4rem;
background-color:lightgray;
height:3rem;
line-height: 3rem;
}
/*表格样式*/
table,th,td{
border:1px solid #666;
font-size:14px;
padding:6px 26px;
}
table{
border-collapse:collapse;
text-align:center;
margin:20px auto 0;
}
table tr:first-child{
background-color:lightskyblue;
}
/*分页样式*/
nav{
width:800px;
height:60px;
display:table-cell;
vertical-align:bottom;
text-align: center;
}
nav ul li{
display:inline;
margin-left:3px;
text-align:center;
}
nav li a{
display:inline-block;
width:26px;
height:26px;
border:1px solid #666;
border-radius:3px;
text-align: center;
line-height: 26px;
}
nav li:first-child a,nav li:last-child a{
width:56px;
}
nav li .active{
background-color:lightgreen;
}
nav li .more{
border:none;
}
section .disable{
color:red;
}
</style>
</head>
<body>
<h1>分类管理</h1>
<section>
<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 class="disable">禁用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>打印机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>显示器</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
</section>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="" class="active">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="" class="more">...</a></li>
<li><a href="">尾页</a></li>
</ul>
</nav>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<!--file:admin/product.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<link rel="stylesheet" href="static/css/style.css">
<style type="text/css">
/*标题样式*/
h1{
font-weight:lighter;
text-indent:4rem;
background-color:lightgray;
height:3rem;
line-height: 3rem;
}
/*表格样式*/
table,th,td{
border:1px solid #666;
font-size:14px;
padding:6px 30px;
}
table{
border-collapse:collapse;
text-align:center;
margin:20px auto 0;
}
table tr:first-child{
background-color:lightskyblue;
}
/*分页样式*/
nav{
width:800px;
height:60px;
display:table-cell;
vertical-align:bottom;
text-align: center;
}
nav ul li{
display:inline;
margin-left:3px;
text-align:center;
}
nav li a{
display:inline-block;
width:26px;
height:26px;
border:1px solid #666;
border-radius:3px;
text-align: center;
line-height: 26px;
}
nav li:first-child a,nav li:last-child a{
width:56px;
}
nav li .active{
background-color:lightgreen;
}
nav li .more{
border:none;
}
</style>
</head>
<body>
<h1>产品管理</h1>
<section>
<table>
<tr>
<th>ID</th>
<th>图片</th>
<th>型号</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><img src="./static/images/1.jpg" width="40px" title="iPhone X 系列"></td>
<td>iPhone X</td>
<td>5888</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="./static/images/2.jpg" width="40px" title="华为P20"></td>
<td>华为P20</td>
<td>6988</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="./static/images/3.jpg" width="40px" title="小米9手机"></td>
<td>小米9</td>
<td>5899</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="./static/images/4.jpg" width="40px" title="OPPO手机"></td>
<td>OPPO x20</td>
<td>6799</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
</section>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="" class="active">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="" class="more">...</a></li>
<li><a href="">尾页</a></li>
</ul>
</nav>
</body>
</html>点击 "运行实例" 按钮查看在线实例
/*通用样式
*file:admin/static/css/style.css
*/
body,h1,h2,h3,h4,h5,h6,ul,li,a,iframe{
margin:0;
padding:0;
border:0;
}
body{
background-color:#efefef;
}
li{
list-style-type:none;
}
a,a:link,a:visited{
color:green;
text-decoration-line:none;
}
a:hover{
text-decoration-line:underline;
}
/*头部样式*/
header{
background:linear-gradient(to top,lightgrey,#efefef);
width:100%;
height:60px;
overflow: hidden;
border-bottom:1px solid gray;
}
header div{
width:1000px;
margin:auto;
}
header h1{
float:left;
margin-left:20px;
font-weight:lighter;
line-height:60px;
}
header nav{
float:right;
margin-right:20px;
}
header nav ul li{
float:left;
line-height: 85px;
padding-left:30px;
}
/*圣杯两列布局*/
main{
width:800px;
height:800px;
margin:0 auto;
padding-left:200px;
overflow:hidden;
}
main article{
float:left;
width:100%;
min-height:100%;
}
main aside{
float:left;
width:200px;
min-height: 100%;
margin-left:-100%;
position:relative;
left:-200px;
background:linear-gradient(to left,lightgrey,#efefef);
border-right:1px dashed gray;
}
main aside nav{
padding: 20px 30px;
}
main aside nav ul li{
line-height:2rem;
}
main article iframe{
min-width:100%;
min-height:650px;
margin:auto;
border:none;
}
footer p{
text-align: center;
}点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
