一、实例演示:<iframe>标签的使用
实例
<!DOCTYPE html> <html lang="zh_CN"> <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> <h3> <a href="https://baidu.com" target="baidu">百度</a> </h3> <p> <iframe frameborder="1" name="baidu" width="500" height="500"></iframe> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、实例演示: css样式设置的优先级
实例
<!DOCTYPE html>
<html lang="zh_CN">
<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>
<link rel="stylesheet" href="demo02b.css">
<style>
p {
color: green;
}
</style>
</head>
<body>
<!-- 内联样式>内部样式>外部样式 -->
<p>测试样式表优先级</p>
<p>测试样式表优先级</p>
<p style="color: blue">测试样式表优先级</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、实例演示: css的id, class与标签选择器的使用规则
实例
<!DOCTYPE html>
<html lang="zh_CN">
<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>
/* id选择器 */
#test01 {
color: red;
}
/* class选择器 */
.test02 {
color: green;
}
/* 标签选择器 */
p {
color: blue;
}
</style>
</head>
<body>
<!-- id定位到单个元素，class定位于存在相同class名称的元素 -->
<!-- 优先级：标签<class<id<js -->
<p id="test01">用id的元素</p>
<p class="test02" id="test01">Class名称为test02的元素</p>
<p class="test02">Class名称为test02的元素</p>
<p class="test02">Class名称为test02的元素</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
实例
<!DOCTYPE html> <html lang="zh_CN"> <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> <link rel="stylesheet" href="demo02d.css"> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/* demo02d.css */
.box1 {
width: 200px;
height: 200px;
background-color: green;
padding: 20px 30px 40px 50px;
border-top: 10px solid red;
border-right: 15px dashed blue;
border-bottom: 10px dotted lightcoral;
border-left: 20px double black;
}
.box2 {
/* width: inherit; */
height: inherit;
background-color: wheat;
}运行实例 »
点击 "运行实例" 按钮查看在线实例