1.iframe标签的使用说明
iframe就是我们常用的iframe标签：<iframe>。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。
iframe标签的属性
frameborder：1、0。用于规定是否显示框架周围的边框。
height：pixels、%。用于规定iframe的高度。
longdesc：URL。规定一个页面，该页面包含了有关iframe的较长描述。
marginheight：pixels。定义iframe的顶部和底部的边距。
marginwidth：pixels。定义iframe的左侧和右侧的边距。
name：frame_name。规定iframe的名称。
scrolling：yes、no、auto。规定是否在iframe中显示滚动条。
src：URL。规定在iframe中显示的文档的URL。
width：pixels。%。定义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>
<style>
.box1 {
float: left;
}
li {
padding: 20px 0;
}
.box2 {
float: left;
padding-left: 180px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>
<a href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E5%B0%8F%E6%B8%85%E6%96%B0%E9%A3%8E%E6%A0%BC&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=©right=&cs=3594304340,3713390862&os=1390700426,1166674172&simid=0,0&pn=0&rn=1&di=222420&ln=818&fr=&fmq=1567437637120_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fimg.zx123.cn%2FResources%2Fzx123cn%2Fuploadfile%2F2018%2F0416%2Fb76b1e0df600c86f727063c2c839afc2.jpg&rpstart=0&rpnum=0&adpicid=0&force=undefined"
target="hz">小清新风格</a></li>
<li><a href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E6%89%81%E5%B9%B3%E5%8C%96&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=©right=&cs=553209051,211593432&os=3149140638,780707007&simid=0,0&pn=0&rn=1&di=224290&ln=938&fr=&fmq=1567437698569_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F00%2F89%2F94%2F58dbd3fdbe514_610.jpg&rpstart=0&rpnum=0&adpicid=0&force=undefined"
target="hz">扁平化风格</a></li>
<li><a href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E9%AD%94%E5%B9%BB%E9%A3%8E%E6%A0%BC&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=©right=&cs=1870954560,2062721770&os=3790274174,382071005&simid=38858374,815096697&pn=0&rn=1&di=193170&ln=1116&fr=&fmq=1567437714631_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=15&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd562ccc8f9ed9e0e1a491a5efda3935e5ebcee2a224a6-QNcMIl_fw658&rpstart=0&rpnum=0&adpicid=0&force=undefined"
target="hz">魔幻风格</a></li>
<li><a href="https://image.baidu.com/search/detail?ct=503316480&z=3&tn=baiduimagedetail&ipn=d&word=%E5%93%A5%E7%89%B9%E9%A3%8E%E6%A0%BC&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=©right=&cs=262249871,1559002666&os=1695375436,2808220192&simid=44026332,653004273&pn=9&rn=1&di=79970&ln=1090&fr=&fmq=1567437727617_R&ic=0&s=undefined&se=&sme=&tab=0&width=0&height=0&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=78&objurl=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fb151f8198618367acfcbb2932e738bd4b31ce53a.jpg&rpstart=0&rpnum=0&adpicid=0&force=undefined"
target="hz">哥特风格</a></li>
</ul>
</div>
<div class="box2">
<iframe srcdoc="<h3>欢迎登陆后台图片系统</h3>" frameborder="1" name="hz" width="800" height="600"></iframe>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.css样式设置的优先级
内联样式(style="") > 内部样式(<style>..</style) >外部样式表(.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">
<link rel="stylesheet" href="css/style.css">
<style>
p {
color: aqua;
}
</style>
<title>css</title>
</head>
<body>
<ol>
<li>
<p style="color: red">
我是内联样式，我优先级最高
</p>
</li>
<li>
<p>我是内部样式，我的优先级比较高</p>
</li>
<li>
<p>我是外部样式表，我的优先级最低</p>
</li>
</ol>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.id、class与标签选择器的使用规则
标签<class<id<js
实例
<!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">
<style>
p {
color: black;
}
#red {
color: crimson;
}
.green {
color: pink;
}
.pink {
color: green;
}
.blue {
color: blue;
}
</style>
<title>选择器的优先级</title>
</head>
<body>
<p id="red" class="green">我是佩奇，这是我的弟弟乔治</p>
<p class="blue">我是乔治，这是我的姐姐佩奇</p>
<p class="pink">我是猪爸爸，这是我的孩子们</p>
<!-- 通过实例证明 优先级 id>class>p标签 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.实例演示盒模型的五大要素:
width, height, padding, border.
实例
<!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">
<style>
.box {
border: 2px dashed red;
width: 1100px;
height: 500px;
background-color: #a2e9ff;
}
.box1 {
width: 300px;
height: 300px;
padding: 100px 390px;
background-color: blueviolet;
border: 4px solid forestgreen;
}
.box2 {
width: 300px;
height: 300px;
background-color: darkslateblue;
padding: 500px 0;
border: 4px solid #b7c274;
}
.box3 {
width: 300px;
height: 300px;
background-color: red;
padding: 0 900px;
}
</style>
<title>box</title>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
