![[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：元素按显示方式分为哪几种, 并举例, 正确描述它们
块级元素：独立一行，可接受宽度。默认为父级100%。有div，p，h，ul
行内元素：于行内元素并排，不可设置宽高，默认宽度为内容宽度。有span，em，a
2：CSS是什么? 它的主要作用是什么?
CSS是层叠式样式。是控制页面布局的。可以美化网页。
3：什么是CSS选择器,它的样式声明是哪二部分组成?
CSS选择器是可以操作的样式的一个集合。样式声明由样式属性和样式值。如 p{color：red}
4： 举例演示CSS简单选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<style>
.red{
color: red;
}
p{
font-size: 20px;
background-color: green;
}
#item{
color: #fff;
}
body{
background-color: yellow;
}
</style>
</head>
<body>
<p class="red">昨天在朱老师带领下学习了css基本知识</p>
<p id="item">朱老师讲的行云如流水</p>
<p>我听的脑子嗡嗡的</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5：举例演示CSS上下文选择器(全部)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示CSS上下文选择器(全部)</title>
<style>
/* 后代选择器*/
section h2{
color: aqua;
}
/*父子选择器*/
section > h2{
color: red;
}
/*同级相邻选择器*/
#item + *{
background-color: black;
}
/*同级所有选择器*/
#item ~ *{
background-color: yellow;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">昨天在朱老师带领下学习了css基本知识</h2>
<h2 >朱老师讲的行云如流水</h2>
<h2>我听的脑子嗡嗡的</h2>
</div>
<h2>php中文网</h2>
<h2>html中文网</h2>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6：举例演示常用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的元素*/
ul:first-child>:last-child>p:nth-child(n+1){
background-color: yellow;
}
/*选中最后一个元素中，类型为li的后代元素*/
ul:first-child>:last-child li:nth-child(n+1){
background-color: lightgray;
}
/*选中最后一个元素中，类型为p的元素*/
ul:first-of-type>:last-of-type>p:nth-of-type(n+1){
background-color: cyan;
}
/*选中最后一个元素中，类型为li的后代元素*/
ul:first-child>:last-child li:nth-child(n+1){
background-color:lightsalmon;
}
</style>
</head>
<body>
<ul>
<li><h3>购物车</h3>
<ul>
<li>lenovo笔记本电脑</li>
<li>iphone11</li>
<li>MAC pro</li>
</ul>
</li>
<li><h3>学习计划</h3>
<ul>
<li>系统学习html基础知识</li>
<li>练习课堂所讲知识</li>
<li>多敲代码，多温习</li>
</ul>
</li>
<li><h3>重要通知</h3>
<p>好好学习~</p>
<ul>
<li>今天加班学习，直到弄懂知识位为止</li>
<li>努力努力！</li>
<li>学习html+css布局好看网页</li>
</ul>
<p>努力就会出现效果的~</p>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
7： 举例演示常用CSS表单伪类选择器(不少于三种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举例演示常用CSS表单伪类选择器(不少于三种)</title>
<style>
input:enabled{
background-color: blanchedalmond;
}
/*选择禁用元素*/
input:disabled{
background-color: lightgray;
}
/*选择所有必选项*/
input:required{
background-color: yellow;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</p>
<p>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd" required placeholder="6位-12位">
</p>
<p>
<label for="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>
<p>
<label for="save_time">保存期限:</label>
<select name="save_time" id="save_time">
<option value="7" selected>7天</option>
<option value="30">30天</option>
</select>
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
均按老师课件敲打，有对比性。
