一、任务一、任务二(略)
任务一、任务二主要是引导学生对前端三驾马车进行初识，在此不过多展示任务的完成过程，我们直接来看拓展任务。
二、拓展任务 ： CSS盒模型
据说要实现这样的界面？
效果图
我主要是用position来做的。
下面附上源代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型布局</title>
<style>
html,body{
width : 100%;
height : 100%;
}
html {
border-width : 5px;
border-color : rgb(169,169,169);
border-style: solid;
}
body {
background-color: rgb(251,220,155);
}
.box1 {
width : 25%;
height : 280px;
font-size: 25px;
margin-top: 25px;
text-align: center;
line-height: 280px;
margin-left: 35px;
color : white;
background-color: rgb(197,208,142);
}
.box2 {
position : absolute;
font-size: 25px;
color : white;
text-align: center;
top : 35%;
margin-left: 35px;
width : 25%;
height : 590px;
line-height: 590px;
background-color: rgb(197,208,142);
}
.box3 {
position : absolute;
top : 28px;
left : 550px;
font-size : 25px;
color : white;
width : 1270px;
height : 362px;
line-height: 362px;
text-align: center;
background-color: rgb(197,208,142);
}
.box4 {
position : absolute;
left : -50px;
top : -362px;
width : 572px;
height : 488px;
font-size : 25px;
color : white;
line-height: 462px;
text-align: center;
background-color: rgb(197,208,142);
}
.box5 {
position : absolute;
left : 1200px;
top : 420px;
width : 620px;
height : 230px;
font-size : 25px;
color : white;
text-align: center;
line-height: 230px;
background-color: rgb(197,208,142);
}
.box6 {
position : absolute;
left : 1200px;
top : 676px;
width : 620px;
height : 230px;
font-size : 25px;
color : white;
text-align: center;
line-height: 230px;
background-color: rgb(197,208,142);
}
.box7 {
position:absolute;
top : 120px;
left : 600px;
width : 250px;
height : 200px;
line-height: 200px;
text-align: center;
font-size: 25px;
color:white;
background-color: rgb(242,163,99);
}
.box8 {
position: absolute;
top : -60px;
left :1500px;
width : 250px;
height : 200px;
line-height: 200px;
text-align: center;
font-size: 25px;
color:white;
background-color: rgb(242,163,99);
}
.box9 {
position: absolute;
top : 780px;
left :600px;
width : 250px;
height : 200px;
line-height: 200px;
text-align: center;
font-size: 25px;
color:white;
background-color: rgb(242,163,99);
}
</style>
</head>
<body>
<div class = "box1">1</div>
<div class = "box2">2</div>
<div class = "box3">3</div>
<div class = "box9">9<div class ="box4">4</div></div>
<div class = "box5">5</div>
<div class = "box6">6</div>
<div class = "box7">7</div>
<div class = "box8">8</div>
</body>
</html>
三、自测
- HTML5为了使img元素可拖放，需要增加什么属性?
draggable = "true";
- HTML5哪一个选择器可以选择一个无时区的日期选择器？
input datetime-local类型
- CSS盒子模型中 Margin Border Padding都是什么意思？
margin外边距（不同容器之间的距离)，border边框，padding内边距（容器内元素距边框的距离）
- 至少说出5种常见的HTML事件
onclick鼠标点击事件 onfocus元素获取焦点事件 onblur失焦事件 onkeydown 按键按下事件
onmousemove鼠标移入事件
- HTML的onblur和onfocus是哪种类型的属性?
窗口事件属性
- 怎么设置display属性的值使容器成为弹性容器？
display: flex;
- JavaScript中有多少种不同类型的循环？
for 、forEach、do…while、while、for…in、for…of
- 用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适?
mark标签