![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：总结的不错
Collection
Collection
今天有人问我a标签的链接如何在iframe里面打开？该如何理解？该如何实现？
<a href="url"></a> 你想不想当演员？不是网红是上电视那种。
<iframe src="url" frameborder="0"></iframe>我是cctv星光大道来我这里表演吧a
如何理解：我就想问你看过星光大道木有？星光大道的舞台就是iframe嘛是个展示自己的窗口，舞台是大家（a）展示表演的地方，大家都很优秀谁先上？
a就是表演者，有很多a很多表演者。谁先上 听主持人的嘛~ 主持人就是个鼠标哈~点谁谁上台展示自己（a里面的网址）。
如何实现：当你看别人表演时候说切 还不如我~ 不行老子也要去展示那么问题来了。
<iframe name="cctv"></iframe>
<iframe name="ccAV"></iframe>
<iframe name="bbc"></iframe>
哇原来可以展示的舞台很多哦 我的选一个报名~
对的演员（a）很多，舞台（iframe）也很多你当前只能选一个 为了表明你的选择你需要target=" "属性写上舞台名字。
比如target="cctv"就不错对吧。
<a href="http:www.dahuilang.com" target="cctv">大灰狼</a>
主持人说 有请下一位 大灰狼~
<iframe src="http:www.dahuilang.com" name="cctv"></iframe> 首先我要感谢选择ccAV舞台没和我竞争的朱老师 因为他没选cctv才让我有获奖的机会~
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe</title> </head> <body> <ui> <li><a href="http://www.163.com" target="cctv">网易</a></li> <li><a href="http://www.qq.com" target="cctv">腾讯</a></li> <li><a href="http://www.baidu.com" target="cctv">百度</a></li> <li><a href="http://www.php.cn/blog/dahuilang.html" target="cctv">大灰狼</a></li> </ui> <iframe src="" width="100%" height="600" name="cctv"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
=================================一条朴素的分割线
css 内联样式、页内样式、外部样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 内联样式、页内样式、外部样式</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--上一行代码是 调用外部样式 多个页面可以共用共享通用样式。 不能上传文件我就吧style.css的代码写在页内了-->
<style type="text/css">
h1{color: red;}/*标签选择器*/
.green{}/*class 类 选择器*/
.reg{color: red;}
.box{width: 100px;height: 100px; background: #009F95;}
#dahuilang{color: #1E9FFF;}/*id选择器*/
main span{}/*派生选择器 上下文选择器的情况有三种：后代选择器，子元素选择器，相邻兄弟选择器 */
pre{color: #000000;}
p{}
</style>
</head>
<body>
<main>
<article>
<h1>css 内联样式、页内样式、外部样式 <span style="color: green;">的优先级！</span></h1>
<p>
关于优先级你可能认为是：内联样式 > 页内样式 > 外部样式 <span class="reg">不一定对</span><br />
你首先得知道html和css 是一行一行顺序执行的。<br />
css又是 谁最后发言听谁的，css后面的同名设置会覆盖前面的。<br />
因此有2种情况：<br />
第一种 link在前面 style在后面<br />
优先级 内联样式 > 页内样式 > 外部样式<br />
<xmp>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
h1{color: red;}
</style>
</xmp>
第二种 style在前面 link在后面<br />
优先级 内联样式 > 外部样式 > 页内样式 <br />
<xmp>
<style type="text/css">
h1{color: red;}
</style>
<link rel="stylesheet" type="text/css" href="style.css"/>
</xmp>
</p>
</article>
<article>
<h1>css样式的调用</h1>
<div class="box red">css叫神马 ? 层叠样式表~ 对 可以叠加多个class</div>
<p>你可以对一个元素同时调用多个class哦 <br />
比如 <xmp><div class="box red"></div></xmp><br />
上面这个div因为.box 被设置了宽度、高度、还有背景色，因为.red被设置了文字为红色。<br /><br />
</p>
</article>
<article>
<h1>css 通用选择器 *{} 被用来初始化</h1>
<p>你很快会发现 我去怎么每个浏览器显示有错位！！！<br />
别急你只要使用*{margin:0;padding:0;} 就能先解决60%的兼容问题。其他的呵呵太多慢慢一起演技呗。
</p>
</article>
</main>
</body>
</html>点击 "运行实例" 按钮查看在线实例
=================================一条朴素的分割线
盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
来看个图~
认识盒子了么?
盒子可以设置宽高用下面属性：
width宽度、height高度
min-width最小宽度、min-height最小高度
max-width最大宽度、max-height最大高度
宽高的单位是：px像素、%百分比
比如 <div style="width:500px; height:300px;">我有宽 高啦</div>
---------------------------------------------------------------分割线
padding 盒子的内边距 四个方向的内边距：
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
注意：内边距设置后会使容器宽度和高度增加！
---------------------------------------------------------------分割线
margin盒子的外边距 四个方向的外边距：
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
下来咱说一下简写 按上面这样写有点累哈~
外边距的简写格式（内边距格式一样 就不赘述了 大灰狼比较懒 ）
margin:10px
代表上下左右的外边距都为10px
margin:10px 20px
第一个值代表上下外边距，第二个值代码左右外边距
margin:10px 20px 30px
第一个值代表上外边距，第二个值代表左右外边距，第三个值代表下内边距
margin:10px 20px 30px 40px
第一个值代表上外边距，第二个值代表右外边距，第三个值代表下外边距，第四 个值代表左外边距
注：吐槽下这个编辑器一点都不丰富 颜色都不能选 我不会用吗？
---------------------------------------------------------------分割线
边框的组成部分
border-width 边框宽度设置
border-color 边框颜色设置
border-style 边框样式设置 solid dotted dashed 常用3个~
边框的简写格式
border:边框宽度 边框颜色 边框样式
border-top:1px solid red
border-top-color:green
(✪ω✪) 终于写完了~