![[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></head><body><form action="" method="post"><div><label for="email">邮箱</label><input type="text" name="email" id="email" value="" placeholder="请输入邮箱" onfocus></div><div><label for="psw">密码</label><input type="password" name="password" id="psw" value="" placeholder="请输入密码"></div><div><button>登陆</button></div></form></body></html>
预览：
代码：
<!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"><span>你好admin</span>，<a href="">退出</a></div><!-- 后台左侧导航 --><ul class="nav" id="left" style="list-style: none;float: left;background-color: blanchedalmond;"><li><a href="login.html" target="content">菜单1</a></li><li><a href="login.html" target="content">菜单2</a></li><li><a href="login.html" target="content">菜单3</a></li><li><a href="login.html" target="content">菜单4</a></li></ul><!-- 后台右侧内容主体 --><iframe srcdoc="请点击左侧栏目导航" src="" name="content" frameborder="1" width="400" height="600"></iframe></body></html>
预览图：
<h2>Hello world</h2><!-- 虽然没有定义颜色，但是浏览器默认的颜色是黑色 -->
<h2 style="color:red">Hello world</h2><!-- 自定义的红色覆盖了默认的黑色 -->
<h2 style="color:red;color:green">Hello world</h2><!-- 实际会显示绿色的 -->
<div style="color:red;"><h2>Hello world</h2></div><!-- 继承了父元素的同名属性 -->
<div style="color:green"><a>php中文网</a></div><!-- a元素的样式并不会继承父元素的绿色样式，而是显示紫色 -->
<style></style>标签
<link rel="stylesheet" href="static/css/style.css" /><!-- 引用方式一 --><style>@import url(static/css/style.css);</style><!-- 引用方式二，常用语CSS模块化的时候 -->
<h2 style="color:red;color:green !important;">Hello world</h2><!-- !important 覆盖了其他的样式声明 -->