![[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>我的导航</title> </head> <body> <div> <ul> <li><a href="https:\\www.sina.com " target="mainframe">新浪</a></li> <li><a href="https:\\www.163.com " target="mainframe">网易</a></li> <li><a href="https:\\www.qq.com " target="mainframe">腾讯</a></li> </ul> </div> <div> <iframe srcdoc="<p>欢迎来到我的导航</p>" frameborder="0" name="mainframe"></iframe> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
2. 实例演示: css样式设置的优先级
CSS样式优先级：外部样式<内部样式<内联样式
下例中，由于外部样式优先级小于内部样式，故外部样式无效。内联样式优先级高于内部样式，故最后一个p标签内容样式为内联样式。
<!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="mystyle.css">
<style>
p {
font-size: 20px;
color: blueviolet;
}
</style>
<title>CSS优先级</title>
</head>
<body>
<p>我是外部样式，我的优先级最低</p>
<p>我是内部样式，我的优先级比外部样式高，比内联样式低</p>
<p style="font-size: 30px;color: red;">我是内联样式，我的优先级最高</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.实例演示: css的id, class与标签选择器的使用规则
CSS选择器优先级：标签<class<id
<!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">
<style>
p {
background-color: blue;
color: darkorange;
}
.big {
background-color: deeppink;
color: green;
}
#small {
background-color: rgb(58, 189, 25);
color: rgb(255, 2, 2);
}
</style>
<title>CSS选择器优先级</title>
</head>
<body>
<p>我是标签选择器</p>
<p class="big">我是class选择器</p>
<p class="big" id="small">我是id选择器</p>
</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">
<style>
#out {
width: 500px;
height: 500px;
padding: 50px 60px 80px 40px;
margin: 20px 15px 10px 30px;
background-color: coral;
border: 5px solid green;
}
#in {
width: 300px;
height: 300px;
padding: 40px 30px 20px 10px;
margin: 30px 25px 20px 10px;
background-color: rgb(98, 80, 255);
border: 2px dashed rgb(16, 202, 16);
}
</style>
<title>盒模型</title>
</head>
<body>
<div id="out">
<div id="in">
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例