![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>登录页面</title>
</head>
<body>
<style type="text/css">
tr,td{
padding:0;
margin:0;
}
table caption{
text-align:center;
font-size:20px;
font-weight:bold;
margin-bottom:30px;
}
table tr{
text-align:center;
margin-top:20px;
display: inline-block;
}
table{
border-collapse: collapse; /* 合并边框线 */
width:300px;
margin:0 auto;
margin-top:30px;
background:#eee;
display:inherit;
padding:15px;
}
tbody{
text-align:center;
}
table [type="text"]{
width:200px;
height:30px;
border:1px solid #4285F4;
padding-left:15px;
margin-left:15px;
}
table tr [type="submit"]{
width:60px;
height:30px;
background:#4285F4;
color:#fff;
border:none;
cursor:pointer;
}
table tr [type="submit"]:hover{
background:#999;
}
</style>
<table>
<caption>用户登录 </caption>
<tbody>
<tr>
<td> <label>邮箱:</label></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td> <label>密码:</label></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td><input type="submit" name=""></td>
</tr>
</tbody>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网站后台管理系统</title>
</head>
<body style="background:#eee">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
margin:0;
}
ul,li{
list-style-type:none;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
color:#f30;
text-decoration:underline;
}
header{
width:100%;
height:80px;
background:linear-gradient(to top,#4285F4,#efefef);
margin:0 auto;
border-bottom:1px solid #f30;
}
header h1{
float: left;
line-height:80px;
}
.nav{
width:1000px;
margin:0 auto;
line-height:80px;
}
nav{
float: right;
}
nav ul li{
float: left;
padding-right:15px;
color:#666;
}
article{
min-height:100%;
float: left;
min-width:100%;
}
iframe{
min-width:100%;
height:500px;
border:none;
}
aside{
width:200px;
min-height:100%;
background:linear-gradient(to left,#4285F4, #eee);
margin-left:-100%;
float: left;
position:relative;
left:-200px;
}
aside ol{
margin-top:30px;
}
aside ol li{
line-height:40px;
text-align:center;
}
main{
width:1000px;
height:700px;
padding-left:200px;
margin:0 auto;
}
footer{
text-align:center;
color:#4285F4;
font-size:14px;
}
</style>
<header>
<div class="nav">
<h1>后台管理系统</h1>
<nav>
<ul>
<li>你好！admin, 欢迎使用CMS!</li>
<li><a href="#">主菜单</a></li>
<li><a href="#">内容发布</a></li>
<li><a href="#">网站主页</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">注销</a></li>
</ul>
</nav>
</div>
</header>
<main role="main">
<article>
<iframe src="01.html" name="main"> </iframe>
<footer>
<p> Copyright © 2004-2017 DedeCMS. 织梦科技 版权所有 </p>
</footer>
</article>
<aside>
<ol>
<li><a href="">产品管理</a></li>
<li><a href="03.html" target="main">用户管理</a></li>
<li><a href="04.html" target="main">商品管理</a></li>
<li><a href="">分类管理</a></li>
<li><a href="02.html" target="main">系统设置</a></li>
</ol>
</aside>
</main>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网站后天管理系统</title>
</head>
<body>
<style type="text/css" media="screen">
h1{
font-size:30px;
}
h2{
font-size:20px;
}
ul,li{
list-style-type:none;
}
</style>
<h1>欢迎使用专业的PHP网站管理系统 </h1>
<h2> 安全提示 </h2>
<ul>
<li>1.默认管理目录为dede，需要立即将它更名；</li>
<li>2.强烈建议data/common.inc.php文件属性设置为644（Linux/Unix）或只读（NT）；</li>
<li>3.没有更改默认的管理员名称和密码，强烈建议您进行更改！马上修改</li>
</ul>
<h2> 商业授权 </h2>
<ul>
<p>如果产品商业使用授权，您可以在我们的授权中心查询到相关
商业授权信息，如果授权类型同查询不符，则说明您可能了非法商业授权，
请及时同我们取得联系。</p>
</ul>
<h2> 程序团队 </h2>
<ul>
<li>主程序研发：*****</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>系统管理</title>
</head>
<body>
<style type="text/css">
table td{
padding-top:20px;
}
table td:first-child{
text-align:right;
}
table tr td [type="text"]{
width:250px;
height:30px;
border:1px solid #4285F4;
padding-left:15px;
}
textarea{
border:1px solid #4285F4;
}
[type="submit"]{
width:100px;
height:40px;
border:1px solid #eee;
background:#4285F4;
color:#fff;
text-align:center;
border-radius:5px;
cursor:pointer;
}
[type="submit"]:hover{
background:#666;
}
table tr:last-child td:last-child{
text-align:center;
}
h2{
text-align:center;
}
table{
width:600px;
margin:0 auto;
}
</style>
<h2>系统设置 </h2>
<form action="" method="get">
<table>
<tbody>
<tr>
<td> <label for="title">站点名称：</label></td>
<td><input type="text" name=""> </td>
</tr>
<tr>
<td><label> 站点关键词： </label> </td>
<td> <input type="text" name=""> </td>
</tr>
<tr>
<td><label>站点描述：</label></td>
<td><textarea cols="40" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name=""></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>用户管理</title>
</head>
<body>
<style type="text/css">
tr,td{
padding:0;
margin:0;
}
table caption{
text-align:center;
font-size:20px;
font-weight:bold;
margin-bottom:30px;
}
table thead{
background:#eee;
}
table thead tr th{
border:1px solid #4285F4;
}
table td{
border:1px solid #4285F4;
text-align:center;
}
table tr{
width:500px;
height:50px;
}
table{
border-collapse: collapse; /* 合并边框线 */
width:650px;
margin:0 auto;
margin-top:30px;
}
table tbody tr td:last-child{
color:#008000;
cursor:pointer;
}
a{
text-decoration:none;
color:#008000;
width:28px;
height:24px;
border:1px solid #008000;
display: inline-block;
text-align:center;
}
p{
margin-top:30px;
text-align:center;
}
.active{
background:#008000;
color:#fff;
}
.more{
border:none;
}
a:first-child{
width:35px;
}
a:last-child{
width:35px;
}
</style>
<table>
<caption>用户管理 </caption>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>角色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>admin</td>
<td>1652786790@qq.com</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
<tr>
<td>2</td>
<td>admin</td>
<td>1652786790@qq.com</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
<tr>
<td>3</td>
<td>admin</td>
<td>1652786790@qq.com</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
<tr>
<td>4</td>
<td>admin</td>
<td>1652786790@qq.com</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
</tbody>
</table>
<p>
<a href="">首页 </a>
<a href="" class="active">1 </a>
<a href="">2 </a>
<a href=""> 3</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 type="text/css">
tr,td{
padding:0;
margin:0;
}
table caption{
text-align:center;
font-size:20px;
font-weight:bold;
margin-bottom:30px;
}
table thead{
background:#eee;
}
table thead tr th{
border:1px solid #4285F4;
}
table td{
border:1px solid #4285F4;
text-align:center;
}
table tr{
width:500px;
height:50px;
}
table{
border-collapse: collapse; /* 合并边框线 */
width:650px;
margin:0 auto;
margin-top:30px;
}
table tbody tr td:last-child{
color:#008000;
cursor:pointer;
}
a{
text-decoration:none;
color:#008000;
width:28px;
height:24px;
border:1px solid #008000;
display: inline-block;
text-align:center;
}
p{
margin-top:30px;
text-align:center;
}
.active{
background:#008000;
color:#fff;
}
.more{
border:none;
}
a:first-child{
width:35px;
}
a:last-child{
width:35px;
}
img{
width:50px;
}
table tr td:nth-child(3){
color:#f30;
}
</style>
<table>
<caption>商品管理 </caption>
<thead>
<tr>
<th>ID</th>
<th>标题图片</th>
<th>文档标题</th>
<th>所属分类</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><img src="img/1.jpg" alt=""></td>
<td>小米9手机预计在明年8月正式上市</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
<tr>
<td>2</td>
<td><img src="img/2.jpg" alt=""></td>
<td>小米9手机预计在明年8月正式上市</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
<tr>
<td>3</td>
<td><img src="img/3.jpg" alt=""></td>
<td>小米9手机预计在明年8月正式上市</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
<tr>
<td>4</td>
<td><img src="img/4.jpg" alt=""></td>
<td>小米9手机预计在明年8月正式上市</td>
<td>超级管理员</td>
<td>编辑|删除</td>
</tr>
</tbody>
</table>
<p>
<a href="">首页 </a>
<a href="" class="active">1 </a>
<a href="">2 </a>
<a href=""> 3</a>
<a href="" class="more">.... </a>
<a href="">尾页 </a>
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
