![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：你是刚报名的学员吗? 这些前端作业可以慢慢补交, 目前已进入到php学习, 尽快跟上进度
Collection
Collection
1.内联框架：指当前页面中加载另外一个页面。用iframe表示，src为插入的页面链接，sredoc为内联页面开始页面，有宽高和name属性，name属性可在A标签里面引用，frameborder为设置边框大小。一般用来制作网站管理后台。
<h3><a href="https;//baidu.com" target="baidu"></a></h3> <p> <iframe src="https://baidu.com" frameborder="1" width="500" height="800" name="baidu"></iframe> </p>
点击 "运行实例" 按钮查看在线实例
CSS介绍
css用来设置HTML元素在文档中的显示方式与布局。
一。css样式
1.内联样式：将元素的样式使用style属性应用到当前的元素上，只适用于当前标签
<body> <p style="color: red">我在学习PHP</p> <p style="color: red">我在学习PHP</p> <p style="color: red">我在学习PHP</p> </body>
点击 "运行实例" 按钮查看在线实例
2.内部样式：将元素的样式使用style标签插入到当前的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">
<link rel="stylesheet" href="style_zy.css">
<title>css简介与引入</title>
<style>
p{
color: blue;
}
</style>
</head>点击 "运行实例" 按钮查看在线实例
外部样式：创建在.css文档中，在使用的文档中通过link引用进来。
<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="style_zy.css">
<title></title>
</head>
p {
/* 外部样式 */
color: yellow;
}点击 "运行实例" 按钮查看在线实例
css样式的优先级为内联样式（通过styles属性） > 内部样式（style标签） > 外部样式（.css文档）.
二. css选择器
css选择器：1.id选择器；2.class选择器；3.标签选器；4：js选择器。
选择器的优先级：标签选择器 < class类选择器 < id选择器 < js选择器 。
<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>
<style>
#red {
/* id选择器：一个 */
color: red;
}
.green {
/* class类选择器：多个 */
color: green;
}
/* 标签选择器 */
p {
color: aqua;
}
</style>
</head>
<body>
<p id="red">明天要上班了，好难过！</p>
<p class="green">现在还在赶作业</p>
<p class="green">还有好多没有写</p>
</body>点击 "运行实例" 按钮查看在线实例
三. 盒子模型的基本属性
盒模型是布局的基础，页面上可见的元素都可以看作是盒子，盒模型默认都i是块级元素，独占一行，支持宽度设置。
盒模型有五个基本属性（宽高背景内外边距和边框）
width：宽度
height：高度
background-color：背景
padding：内边距，内容与边框之间的填充区域
margin：外边距，决定当前盒子与其他盒子之间的位置与关系
border：边框，位于内外边框之间，是可见元素，允许设置宽度样式和颜色
根据可见性分为两类：
一. 可见的：width，height，border
二. 不可见的： background-color，padding，margin
padding和margin只能设置宽度，不能设置样式和颜色。
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
padding: 10px 20px 30px 40px;
padding: 20px 30px 40px;
padding: 20px 30px;
padding: 20px;
/* 上边框 */
border-top-width: 10px;
border-top-style: solid;
border-top-color: blue;
/* 简写 */
border: 10px solid red;
}点击 "运行实例" 按钮查看在线实例