![[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>标签的使用
<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> <h1>内联框架演示</h1> <ul style="float: left"> <li><a href="https://php.cn" target="neilian">php中文网</a></li> <li><a href="https://wwww.baidu.com" target="neilian">百度</a></li> </ul> <iframe frameborder="1" name="neilian" width="400" height="400" style="float: left"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
2. 实例演示: css样式设置的优先级
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>
<style>
p {
color: blue
}
</style>
<!-- Css样式演示3（外部引入） -->
<link rel="stylesheet" href="">
</head>
<body>
<p style="color: red">Css样式演示1(内联演示)</p>
<p>Css样式演示2（内部演示）</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3. 实例演示: css的id, class与标签选择器的使用规则
id选择器 用#引入 class选择器用.引入
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>
/* id选择器 */
#red {
color: red
}
/* 类选择器 */
.green {
color: green
}
/* 标签选择器 */
p {
color: yellow
}
</style>
</head>
<body>
<p id="red">基本选择器1</p>
<p class="green" id="red">基本选择器2</p>
<p>基本选择器3</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">
<title>盒模型</title>
<style>
.box1 {
/* 宽 */
width: 200px;
/* 高 */
height: 200px;
/* 背景颜色 */
background-color: red;
/* 内边距 */
padding: 20px 20px;
/* 上边框 */
border-top: black 10px solid;
/* 右边框 */
border-right: seagreen 10px solid;
/* 下边框 */
border-bottom: salmon 10px solid;
/* 左边框 */
border-left: blue 10px solid;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>