![[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
一，元素按显示方式分为哪几种, 并举例, 正确描述它们
置换元素，非置换元素，块级元素，行内元素
一切元素都是框
任何元素都会在页面上占据一定的空间，页面是一框的形式来显示他们
块级框对应的是块级元素，行内框对应的是行内元素
行内框的宽高，由他内部的内容决定
块级框的宽高，由他内部的子元素决定
一般来说，块级框内，可以嵌套行内元素，反过来不允许（可由display改变）
二，CSS是什么? 它的主要作用是什么?
CSS：层叠样式表（cascading style sheets）
作用:用来设置HTML元素在文档中的布局与显示方式
三，什么是CSS选择器，它的样式声明是哪两部分组成？
选中我所需要的标签
CSS样式声明=属性+属性值（键＋值）
四，举例演示CSS简单选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>距离演示CSS简单选择器（全部）</title>
<style>
/*元素选择器*/
p{
color: green;
}
/*属性选择器*/
p[class="change"]{
color: blue;
}
/*类选择器*/
.test{
color: yellow;
}
/*id选择器*/
#select{
color: red;
}
/*群组选择器*/
h2,h3{
color: aqua;
}
/*通配符选择器*/
body *{
background-color: lightcyan;
}
</style>
</head>
<body>
<p>Theshy</p>
<p class="change">Ning</p>
<p class="test">Rookie</p>
<p id="select">Jackylove</p>
<p>Baolan</p>
<h2>Duke</h2>
<h3>Leyan</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
五，举例演示CSS上下文选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS上下文选择器(全部)</title>
<style>
/*后代选择器*/
body h2{
color: lightpink;
}
/*父子选择器*/
body>h2{
color: aqua;
}
/*同级相邻选择器*/
.item+*{
font-size: 2rem;
}
/*同级所有选择器*/
.item~*{
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
<h2 class="item">Theshy</h2>
<h2>Ning</h2>
<h2>Rookie</h2>
</div>
<h2>Jackylove</h2>
<h2>Baolan</h2>
</body>
</html>点击 "运行实例" 按钮查看在线实例
六，举例演示常用CSS结构伪类选择器(不少于四种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS结构伪类选择器(不少于四种)</title>
<style>
/*选中所有的ul下面的第二个子元素*/
ul>:nth-child(2){
background-color: lightblue;
}
/*只选中第一个ul中的第二个子元素*/
ul：first-child>:nth-child(2){
background-color: lightgreen;
}
/*选中第一个ul中最后一个子元素*/
ul:first-child>:last-child{
background-color: lightpink;
}
/*选中最后一个子元素中的，类型为p的元素*/
/*n是从0开始取值，n+1=1，1+1=2，*/
ul:first-child > :last-child > p:nth-child(n+1){
background-color: yellow;
}
ul:first-child > :last-child li:nth-child(n+1){
background-color: lightgray;
}
/*将以上案件全部用限定类型的伪类进行改写*/
ul:first-of-type > :last-of-type >p:nth-of-type(n+1){
background-color: cyan;
}
ul:first-of-type > :last-of-type li:nth-of-type(n+1){
background-color: lightsalmon;
}
</style>
</head>
<body>
<ul>
<li>
<h3>自我介绍</h3>
<ul>
<li>姓名：淡月</li>
<li>联系方式:452557923</li>
<li>目前状态：学生</li>
</ul>
</li>
<li>
<h3>学习计划</h3>
<ul>
<li>准时上课</li>
<li>按时作业</li>
<li>反复练习</li>
</ul>
</li>
<li>
<h2>重要通知</h2>
<p>即日起学校调整作息时间</p>
<ul>
<li>上午按原作息时间不做变动</li>
<li>下午由三点十分上课改至三点二十</li>
<li>晚自习时间调整至九点三十下课</li>
</ul>
<p>请各单位，各部门及时通知师生员工，安排好相关工作</p>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
七，举例演示常用CSS表单伪类选择器(不少于三种）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS表单伪类选择器(不少于三种)</title>
<style>
/*选择所有有效的input表单元素*/
input:enabled {
background-color: blanchedalmond;
}
/*选择禁用元素*/
input:disabled {
background-color: lightgray;
}
/*选择所有必选项*/
input:required {
background-color: yellow;
}
</style>
</head>
<body>
<form action="">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required placeholder="不得少于6位">
</p>
<p>
<label for="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<p>
<button>登录</button>
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
CSS选择器大大缩减页面代码，提高页面浏览速度，减少了工作量。
