作业一： 元素按显示方式分为哪几种, 并举例, 正确描述它们
元素按显示方式分哪几种，并举例描述他们元素按显示方式分可以分为 块元素和行内元素 块元素有: 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>运行实例 »
点击 "运行实例" 按钮查看在线实例
