![[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、实例演示:<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>iframe作业</title>
<style>
iframe {
width: 500px;
height: 600px;
border: solid 1px #ccc;
float: left;
}
ul {
float: left;
}
</style>
</head>
<body>
<ul>
<li><a href="demo1.html" target="demo">我是demo1</a></li>
<li><a href="demo2.html" target="demo">我是demo2</a></li>
<li><a href="demo3.html" target="demo">我是demo3</a></li>
</ul>
<iframe srcdoc="我会显示3个demo内容" frameborder="0" name="demo"></iframe>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、实例演示: 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="static/css/style3.css">
<title>CSS优先级作业</title>
<style>
p {
color: blue
}
</style>
</head>
<body>
<p style="color:red;">我是最大的内联样式表</p>
<p>我是老二内部样式表</p>
<p>我是老三外部样式表</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
附加外部的css内容是
p {
color: green;
}3、实例演示: css的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>CSS的id，class，标签选择器作业</title>
<style>
.tq {
color: lightblue;
}
#tq {
color: pink;
}
span {
font-size: 22px;
font-weight: bold;
}
</style>
</head>
<body>
<span class="tq">今天天气不太好</span><br>
<span id="tq">今天天气不太好</span><br>
<span>今天天气不太好</span>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、实例演示盒模型的五大要素: 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 {
width: 500px;
height: 500px;
border: 1px solid blue;
margin: 100px auto;
}
.box1 {
width: 300px;
height: 300px;
border: 1px solid green;
padding: 30px 20px 15px 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
