![[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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
iframe{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
1、iframe标签的使用
<ul>
<li><a href="https://www.php.cn/blog/detail/14827.html" target="admin">首页</a></li>
<li><a href="./user.php" target="admin">用户管理</a></li>
<li><a href="javascript:void(0)" target="admin">列表管理</a></li>
<li><a href="javascript:void(0)" target="admin">内容管理</a></li>
</ul>
<!-- <iframe src="#" name="admin"></iframe> -->
<iframe src="./index.php" name="admin"></iframe>
<br/>
<br/>
2、css样式优先级
内联最高，内部第二；外部最次；
选择器是 js>id>类>标签
<br/>
<br/>
3、三种选择器演示
<style>
/* 标签选择器 */
p{
color: red;
}
/* 类选择器 */
.p{
color: greenyellow;
}
/* id选择器 */
#p{
color: brown;
}
</style>
<p>标签选择器</p>
<p class="p">类选择器</p>
<p id="p">id选择器</p>
<br/>
4、盒模型的五种元素演示
<style>
div{
width: 500px;
height: 500px;
padding: 10px;
border: 5px solid red;
margin: 10px;
background-color: black;
}
</style>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例