1.实例演示：<iframe>标签的使用
<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> <li> <a href="demo4.html" target="demo">demo4</a> </li> <li> <a href="demo5.html" target="demo">demo5</a> </li> </ul> <iframe src="wecome.html" frameborder="0" name="demo"></iframe>
2.实例演示：css样式设置的优先级
1.选择器级别优先级
id选择器高于类选择器
类选择器高于标签选择器
demo:
<style>
p2 {
color: green;
}
#pp {
color: pink;
}
.ppp {
color: hotpink;
}
</style>
<p2 style="font-size:20px;" id="pp" class="ppp">加油</p2>2.样式设置级别优先级
1.内联样式高于内部样式
2.内部样式高于外联样式
index.css
#pp {
color: royalblue;
}<!DOCTYPE html>
<html>
<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="index.css">
</head>
<style>
#pp {
color: pink;
}
</style>
<body>
<p2 style="color:red;font-size:20px;" id="pp">加油</p2>
</body>
</html>3.实例演示:css的id, class 与标签选择器的使用规则
/* id选择器 */
#pp {
color: royalblue;
}
/* 类选择器 */
.ppp{
color:pink;
}
/* 标签选择器 */
p{
color:black;
}4.实例演示盒模型的五大要素
五大要素 宽,高,背景,边框,内外边距
demo
#pp {
/* 外边距 */
margin: 20px;
/* 边框 */
border: 2px solid #ccc;
/* 内边距 */
padding: 20px;
/* 背景色 */
background-color: blueviolet;
/* 宽高 */
height: 200px;
width: 50px;
}