![[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
1.课程内介绍了内联标签<iframe></iframe>，是框架布局的基础，其中最重要的属性为name；name的值<a></a>标签中的target属性进行绑定，既可实现跳转
2.CSS样式表的设置引用的优先级别：内联样式>内部样式>外部样式 （高级样式表声明会覆盖次一级样式表声明）
内联样式：直接在标签内加入 style 属性；
内部样式：在<style></style>标签内声明样式
外部样式：在网页头部标签<head></head>放入引入标签<link> 用于引入已经编写号的外部样式表.css 详见代码
3.CSS的选择器:目前学习的选择器有三种 按优先规则排列 id选择器>calss选择器>标签选择器
选择器使用方法
id选择器 #calss{}
class选择器 .id{}
标签选择器 a{}
由于层级原因，id>calss 所以在单个页面中id 属性应该要有唯一性比较好，主要原则就是选定范围越小的选择器和规则，等级越高
4.关于盒子，“一切皆盒子”，盒子是一个抽象的概念，通过教程学习目前个人的理解是，网页内的所有元素都可以看成是一个盒子，然后这个盒子也可以包围其他盒子，还可以被其他盒子包围，像浏览器就是最大的盒子，可以通过一些简单的通用属性去声明盒子的样式颜色达到美观合理的布局
一下是根据教程所学些的作业代码，先上一段外部引用的css声明代码文件名demo3.css
body {
background-color: rgb(234, 236, 112);
}
en {
/*外部样式表使用了标签选择器*/
color: hotpink;
}
.rame {
/*外部样式表使用了class选择器声明样式宽高和背景颜色*/
width: 800px;
height: 600px;
background-color: aliceblue;
border-style: solid;
border-width: 6px;
padding: 5px 10px;
}点击 "运行实例" 按钮查看在线实例
这部分是html代码文件名demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架与CSS基础使用</title>
<link rel="stylesheet" href="css/demo3.css">
</head>
<body>
<style>
/*内部样式表*/
/*标签选择器*/
a {
color: #0ff;
}
/*class选择器*/
.zxc {
color: blue;
}
/*id选择器*/
#asd {
color: darkgreen;
}
</style>
<h2>内联框架使用</h2>
<h3>小说类型列表</h3>
<p>样式表设置优先级：内联样式表>内部样式表>外部样式表</p>
<p>样式表选择器规则：id选择器>calls选择器>标签选择器</p>
<!--该外连接网站，为作业展示使用，与本人无关-->
<ul>
<li>
<a href="https://www.qb5200.tw/list/1_1.html" target="log">
<en>玄幻【外部样式表】</en>
</a>
</li>
<li>
<a id="asd" href="https://www.qb5200.tw/list/2_1.html" target="log">仙侠【内部样式表id选择器】</a>
</li>
<li>
<a class="zxc" href="https://www.qb5200.tw/list/2_1.html" target="log">都市【内部样式表class选择器】</a>
</li>
<li>
<a href="https://www.qb5200.tw/list/4_1.html" target="log">历史【内部样式表标签选择器】</a>
</li>
<li>
<a style="color: darksalmon" href="https://www.qb5200.tw/list/5_1.html" target="log">网游【内联样式表】</a>
</li>
</ul>
<iframe class="rame" srcdoc="<h3>内联框架使用</h3>" frameborder="1" name="log"></iframe>
</body>
</html>点击 "运行实例" 按钮查看在线实例
下面是页面运行的效果图
