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>Document</title> </head> <body> <h3><a href="https://www.baidu.com/" target="baidu">百度</a></h3> <iframe src="" frameborder="1" name="baidu" width="200" height="300"></iframe> <!-- 核心的地方在iframe的name属性对应了前面a标签里的target属性，这样就可以实现画中画的打开方式 --> </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>Document</title>
<link rel="stylesheet" href="css/style.css"> <!--这里只做对比说明 -->
<style>
p{color: darkblue}
</style>
</head>
<body>
<p style="color: darkgoldenrod">这是一个文本</p>
<p>这是一个文本</p>
<!-- 元素的css样式优先级：内联样式 > 内部样式 > 外部样式 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
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>Document</title>
<link rel="stylesheet" href="css/style.css"> <!--这里只做对比说明 -->
<style>
#blue{color:blue;}
.color{color:red;}
p{color:darkgreen}
</style>
</head>
<body>
<p id="blue">这是一个文本,使用ID设置css样式</p>
<p class="color">这是一个文本，使用class设置样式</p>
<p>这是一个文本，使用标签设置样式</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>Document</title>
<link rel="stylesheet" href="css/style.css">
<!--这里只做对比说明 -->
<style>
.box_1 {
width: 260px;
/*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的300px */
height: 180px;
/*因为使用了padding，所以高度需要减去10*2的长度，才是真正的200px */
background: darkslateblue;
margin: 10px;
padding: 10px 20px;
}
.box_2 {
width: 220px;
/*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的260px */
height: 160px;
/*因为使用了padding，所以高度需要减去10*2的长度，才是真正的180px */
background: rgb(5, 236, 63);
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="box_1">
<div class="box_2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
