![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
1、运用a标签和iframe标签实现类似于 后台菜单效果。
要使所有链接都在iframe框架中打开，关键在于将a标签中的arget属性值等于iframe的name属性值。
iframe框架可以设置样式，srcdoc属性中敲入的是H5代码，用于设置未打开任何链接的默认样式。
<ul><!--要将所有连接内容都在ifame打开，关键要在a标签中设置target属性，属性值等于iframe的name属性值--> <li><a href="demo1.html" target="kuang">用户列表</a></li> <li><a href="demo2.html" target="kuang">产品列表</a></li> <li><a href="demo3.html" target="kuang">订单列表</a></li> <li><a href="demo4.html" target="kuang">日志列表</a></li> </ul> <iframe srcdoc="<h1>未点击任何菜单时的默认展示</h1>" width="400" height="400" style="float:left" name="kuang"></iframe>
点击 "运行实例" 按钮查看在线实例
2、三种样式表的组合应用
三种样式表通常都会同时使用，优先级是内联样式>内部样式>外部样式。
内部样式和外部样式都会使用到选择器，优先级是id > class > tag。
编辑内联样式时，一定要在style="……"中编辑。
编辑内部样式时，一定要在style标签中编辑。
编辑外部样式时，一定要通过link标签引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="1.css">
<style>
#two {
color: green;
}
</style>
</head>
<body>
<!--内联样式适合针对某个标签，进行特定的样式，只有这个标签有，优先级最高-->
<p id="one" style="color:red" >这是用内联样式表定义的样式</p>
<!--内部样式适合针对此html文件，进行内部的专有设置，优先级是id > class > tag-->
<p id="two">这是用内部样式表定义的样式</p>
<!--外部样式适合针对多个html文件，进行统一的设置，效率高，但优先级最低-->
<p id="three">这是用外部样式表定义的样式</p>
<!--三种设置样式的优先级：内联样式>内部样式>外部样式-->
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、任何标签都是一个盒模型，都可以对盒子的外部边距、边框、内部边距进行设置。
其中，外边距margin和内边距padding都只能改变宽度，而边框可以设置其 宽度、样式（比如是虚线还是实线）、前景色。
在对margin、padding设置宽度时，若直接在属性中填写数值，要注意填写顺序，依次对应“上右下左”。若只填写3个数值，则依次对应“上-左右-下”；若只填写2个数值，则依次对应“上下-左右”；若只填写1个数值，则对应所有。