实例演示:<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>实例演示:<iframe>标签的使用</title>
<style>
ul{
width: 100px;
float: left;
}
#right{
float: left;
}
</style>
</head>
<body>
<ul>
<li><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1567472970889_R&pv=&ic=&nc=1&z=&hd=&latest=©right=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&sid=&word=%E7%BE%8E%E5%A5%B3" target="cms">美女</a></li>
<li><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1567473057676_R&pv=&ic=&nc=1&z=&hd=&latest=©right=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&sid=&word=%E9%A3%8E%E6%99%AF" target="cms">风景</a></li>
<li><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1567473089842_R&pv=&ic=&nc=1&z=&hd=&latest=©right=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&sid=&word=%E4%BA%BA%E7%89%A9" target="cms">人物</a></li>
<li><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1567473108099_R&pv=&ic=&nc=1&z=&hd=&latest=©right=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&sid=&word=%E5%8D%A1%E9%80%9A" target="cms">卡通</a></li>
</ul>
<iframe id="right" srcdoc="<h1>欢迎登录管理后</h>" name="cms" width="500" height="500"></iframe>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、实例演示: 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>
ul li {
color: #f00;
}
</style>
</head>
<body>
<ul>
<li style="color: blue">我是内联样式，级别最高</li>
<li>我是内部样式，级别第二</li>
<li>我是外部样式，级别最低</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.id、class与标签选择器的使用规则
优先级
标签<class<id<js
id选择器声明方式 #red{} class选择器声明方式 .green{} 标签选择器的声明方式 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">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<style>
p {
color: brown;
}
#blue{
color: blue;
}
.green{
color: green;
}
</style>
</head>
<body>
<div>
<p id="blue" class="green">
id、class与标签选择器的使用规则
</p>
<p class="red">
id、class与标签选择器的使用规则
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 实例演示盒模型的五大要素
实例
<!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>
.box1 {
width: 500px;
height: 500px;
background: burlywood;
padding: 30px;
margin: 30px;
border: 3px solid #f00;
}
.box2 {
width: 480px;
height: 480px;
background-color: aqua;
border: 3px solid #009;
margin: 10px 30px;
}
.box3 {
width: 300px;
height: 300px;
background: #f00;
border: 1px solid #999;
padding: 10px 30px 15px;
margin: 10px 10px 30px 40px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例