![[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
问题一：实例演示:<iframe>标签的使用
直接调用：
<iframe src="https://www.baidu.com" frameborder="1" width="600" height="600"></iframe>
点击 "运行实例" 按钮查看在线实例
同页面调用：
<!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>同页面调用</title>
<style>
.left {
float: left;
}
ul>li {
list-style:none;
}
.right {
float: left;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="left">
<ul>
<li><a href="https://www.baidu.com" target="main">百度</a></li>
<li><a href="https://www.qq.com" target="main">腾讯</a></li>
<li><a href="https://www.sina.com.cn" target="main">新浪</a></li>
<li><a href="https://www.163.com" target="main">网易</a></li>
</ul>
</div>
<div class="right">
<iframe srcdoc="<h3>同页面调用演示</h3>" frameborder="1" name="main" width="600" height="600"></iframe>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
问题二：实例演示: css样式设置的优先级
答：优先级：内联样式>内部样式>外部样式表
<!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">
<link rel="stylesheet" href="css/style.css">
<style>
p {
color: #ff0000;
}
</style>
<title>css优先级</title>
</head>
<body>
<ol>
<li>
<p style="color: green">
内联样式，优先级最高
</p>
</li>
<li>
<p>内部样式，优先级比较高</p>
</li>
<li>
<p>外部样式表，优先级最低（因外部地址不存在，所以显示的是内部样式）</p>
</li>
</ol>
</body>
</html>点击 "运行实例" 按钮查看在线实例
问题三：实例演示: css的id, class与标签选择器的使用规则
答：选择器的优先级：js>id>class>标签
<!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>选择器的优先级</title>
<style>
p {
color: yellow;
}
#red {
color: red;
}
.green {
color: pink;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p id="red" class="green">#(red)+class(green)，显示红色，证明id>class>标签</p>
<p class="blue">class(blue)显示蓝色，证明class>标签</p>
<p>标签默认黄色，显示黄色</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
问题四：实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
答：
<!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>一切皆盒子</title>
<style>
.box {
border: 3px dashed red;
width: 600px;
height: 800px;
background-color: #999;
padding:10px;
}
.box1 {
width: 150px;
height: 150px;
padding: 10px 20px;
background-color: blue;
border: 5px solid #168328;
margin:10px 15px 20px 5px;
}
.box2 {
width: 180px;
height: 180px;
background-color: #000;
padding: 10px 0;
border: 5px solid #993333;
color:#fff;
margin:10px 15px;
}
.box3 {
width: 200px;
height: 200px;
background-color: blue;
padding: 0 30px;
margin:10px 15px 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例