![[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
作业一： 元素按显示方式分为哪几种, 并举例, 正确描述它们
元素按显示方式分哪几种，并举例描述他们元素按显示方式分可以分为 块元素和行内元素 块元素有: div p ul+li table h1-h6行内元素有:span em input strong a描述:首先块级元素会独占一行 默认占满父元素 可以也必须设置宽高，当没有设置宽高时靠内部子元素撑起行内元素:行内元素不可设置宽高 靠内部内容撑起 也不会独占一行
作业二： CSS是什么? 它的主要作用是什么?
css是什莫？它的主要作用是什么？css 是层叠样式表 主要作用是给html中的元素设置样式
作业三：什么是css选择器它的样式声明由哪两部分组成？
css选择器就是一对一或一对多的对html中元素样式进行修改时找到指定元素的方法样式声明由 选择器和样式两部分组成
作业四：举例演示CSS简单选择器(全部)
标签选择器
类选择器
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#a{
color:red;
}
.b{/*这里的.b还可以写为h1[class='b'] 上边的#a 也可以写为h1[class='a'] 这样按照标签属性也可以但我感觉这样好像反而麻烦了*/
color:green;
}
h3{
color:yellow;
}
</style>
</head>
<body>
<h1 id="a">这是测试一</h1>
<h1 class="b">这是测试二</h2>
<h3>这是测试三</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
作业五：举例演示CSS上下文选择器(全部)
+
~
>
空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.c p{
color: red;
}
.c > p{
color: green;
}*/
.d ~ li{
color: yellow;
}
/* .e + li{
font-size: 30
}*/
</style>
</head>
<body>
<ul class="c">
<li>
<h1>测试一</h1>
<ul class="a">
<li>这是测试一一</li>
<li>这是测试一二</li>
<li>这是测试一三</li>
</ul>
</li>
<li>
<h1>测试二</h1>
<ul>
<li class="e">这是测试二一</li>
<li>这是测试二二</li>
<li>这是测试二三</li>
</ul>
</li>
<li class="b">
<h1>测试三</h1>
<p>这是测试三一</p>
<ul>
<li class="d">这是测试三二</li>
<li>这是测试三三</li>
<li>这是测试三四</li>
</ul>
<p>这是测试三五</p>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
作业六：举例演示常用CSS结构伪类选择器(不少于四种)
ul:first-child 表示会找到父元素中第一个且为ul的元素感觉这句话很重要
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业6</title>
<style type="text/css">
/*全部ul子元素中的第二个元素*/
/*ul > :nth-child(2){
color: yellow;
}*/
/*第一个ul中的第二个子元素*/
/*ul:first-child > :nth-child(2){
color: green;
}*/
/*第一个ul中的最后一个子元素*/
/*ul:first-child >:last-child{
color: green;
}*/
/*第一个ul的最后一个子元素的子元素中的所有p元素*/
.c:first-child > :last-child p:nth-child(n+1){
color: red;
}
/*这个会找到第一个li 中的全部li子元素第一层找到body内所有第一个元素 然后又在这些元素中找最后一个子元素但是只有第一个大ul中的li是有子元素的 所以只有他变色*/
/* :first-child :last-child{
background-color: red;
}*/
/*没理解*/
/*:first-of-type :last-of-type {
background-color: green;
}*/
</style>
</head>
<body>
<!-- <h1>标签</h1>
<div></div> -->
<ul class="c">
<li>
<h1>测试一</h1>
<ul class="a" class="c">
<li>这是测试一一</li>
<li>这是测试一二</li>
<li>这是测试一三</li>
</ul>
</li>
<li>
<h1>测试二</h1>
<ul>
<li class="e" class="a">这是测试二一</li>
<li>这是测试二二</li>
<li>这是测试二三</li>
</ul>
</li>
<li class="b">
<h1>测试三</h1>
<p>这是测试三一</p>
<ul>
<li class="d">这是测试三二</li>
<li>这是测试三三</li>
<li>这是测试三四</li>
</ul>
<p>这是测试三五</p>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
作业七：举例演示常用CSS表单伪类选择器(不少于三种)
表单选择器感觉不难就是根据表单中元素的控件来挑选元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
/*input框中*/
input:required{
background-color: yellow;
}
input:enable{
background-color: red;
}
input:disable{
background-color: green;
}
</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="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="save_time">保存期限:</label>
<select name="save_time" id="save_time">
<option value="7" selected>7天</option>
<option value="30">30天</option>
</select>
</p>
<p>
<input type="hidden" name="login_time" value="登陆时间戳">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<script>
document.querySelector('[type="hidden"]').value = new Date().getTime()
</script>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
