![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：效果实现的不错, 下次代码要使用代码块包裹, 也可以添加一个效果示例结果图, 继续加油
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统</title>
<!-- <style>
body {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 10em 1fr;
grid-template-rows: 6em 1fr;
margin: 0;
}
body .header {
grid-column-end: span 2;
border-bottom: 1px solid currentColor;
background-color: #efe;
padding: 2em;
display: flex;
align-items: center;
}
body .header div {
margin-left: auto;
}
body .nav {
background-color: #efc;
margin: 0;
padding-top: 1em;
list-style: none;
}
body iframe {
width: calc(100vw - 10em);
height: calc(100vh - 6em);
border-left: 1px solid currentColor;
}
</style> -->
</head>
<body>
<div class="header">
<h1>后台管理系统</h1>
<div>
<em>admin</em>
<a href="logout.php">退出</a>
</div>
</div>
<ul class="nav">
<li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo1.html" target="content">元素属性</a></li>
<li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo2.html" target="content">布局元素</a></li>
<li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo3.html" target="content">链接与列表</a></li>
<li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo4.html" target="content">表格元素</a></li>
</ul>
<iframe srcdoc="<a href='javascript:;'>请点击左侧菜单</a>" frameborder="1" name="content"></iframe>
</body>
</html>
PHPz