![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：ifame 标签的案例不错, 估计你现在知道了许多页面是如何工作的了吧
Collection
Collection
作业一：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> </head> <body> <h3>内联标签iframe</h3> <iframe src="https://www.qq.com" frameborder="10" width="1200" height="300"></iframe> <p>如果不定义宽高，iframe标签默认宽380，高190</p> <b>有些网站本身设定了防内联，比如php中文网，就会出现对应的错误提示。</b> <code>frameborder=0,没有边框，只有滚动框；frameborder=1,有边框，也有滚动框；这个属性是个布尔值；</code> </body> </html>
点击 "运行实例" 按钮查看在线实例
2。iframe与a标签的静态结合运用
<!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>
</head>
<body>
<h4>a标签和iframe标签的结合运用——静态版A</h4>
<a href="https://www.qq.com" target="main">腾讯</a>
<a href="https://www.163.com" target="main">网易</a>
<iframe frameborder="0" name="main" width="600" height="200" src="https://www.163.com"></iframe>
<h4>导航栏中a与iframe标签的运用</h4>
<style>
a {
text-decoration: none;
}
li {
display: inline-block;
border: 1px solid red;
margin-top: 5px;
margin-left: 10px;
padding: 5px 20px;
}
ul {
width: 90%;
height: 120px;
border: 1px solid black;
}
</style>
<ul style="list-style-type: none;">
<h5>内部UL容器</h5>
<li>
<a href="https://www.qq.com" target="main">qq</a>
</li>
<li>
<a href="https://www.163.com" target="main">163</a>
</li>
<li>
<a href="https://www.qq.com" target="main">qq</a>
</li>
<li>
<a href="https://www.163.com" target="main">163</a>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.iframe与a标签的JS动态结合运用——待续
作业未完，请勿批改！
作业二：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">
<title>盒模型及css选择器</title>
</head>
<body>
<style>
h4 {
border: 1px solid blue;
padding: 10px 20px;
}
.dd-juli {
color: crimson;
}
.dd-weizi {
color: indigo;
}
#dd-quanzhong {
font-size: 10px !important;
color: black;
}
#dd-last {
color: indigo;
}
.dd-quan-a {
color: blueviolet;
}
dd {
color: crimson;
}
dd:last-child {
color: green;
}
ul {
width: 300px;
height: 80%;
border: 2px solid cornflowerblue;
padding: 30px 50px;
margin: 20px auto;
margin-top: 30px;
}
</style>
<h4>盒模型及CSS选择器——所见即盒子</h4>
<ul>
<h5>CSS样式设置优先级：</h5>
<li>
<dl>距离远近</dl>
<dd class="dd-juli" style="color:darkblue;">1: 比如同一个元素的样式设置，距离该元素最近的样式有效，距离远的会被覆盖。</dd>
<dd class="dd-juli">2: 这里另外的对比示例</dd>
</li>
<li>
<dl>位置前后</dl>
<dd class="dd-weizi">1: 位置后的样式覆盖位置前的样式；</dd>
</li>
<li>
<dl>页面内外</dl>
<dd>当前页面的样式覆盖加载的样式</dd>
</li>
<li>
<dl>权重大小</dl>
<dd id="dd-quanzhong" class="dd-quan-a" style="font-size: 20px;color:limegreen;">!important最重</dd>
<dd class="dd-quan-a">其次是——元素内样式</dd>
<dd>再其次是——ID选择器</dd>
<dd>再其次是——CLASS选择器</dd>
<dd class="dd-quan-a" id="dd-last">最后是元素选择器</dd>
</li>
</ul>
<style>
.dd-weizi {
color: darkseagreen;
}
</style>
</body>
</html>点击 "运行实例" 按钮查看在线实例