任务一:使用富文本编辑器
任务二 所见即所得式开发
实验数量过多,不一一举例，按顺序完成所有试验项目既可。
拓展
深入理解CSS盒子模模型多层次含义
边框边距
标准文档流
布局模式
完成CSS盒子模型布局
这里参考了其他大神的思路，总的来说，比较合理的就是使用grid布局。9个div在一个大的div容器中，然后控制它们相对的位置。
所以，第一步，建立9个div，和一个div容器。最外面的main_div就是容器。里面的9个div是item。
然后所有的div的display方式使用grid。排序方式使用默认的按列排序。
首先不要管7、8、9，1-6已经将所有的容器沾满了，即先设置1-9div在容器中的位置，然后再设置7、8、9的位置。遵循这个思路。
参考文章：
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
https://blog.csdn.net/qq_44700693/article/details/115661811?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162598095916780264077539%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162598095916780264077539&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-13-115661811.first_rank_v2_pc_rank_v29_1&utm_term=C1-WEB&spm=1018.2226.3001.4187
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="new_file.css" />
</head>
<body>
<div id="main_div">
<div class="div1_6" id="div1">
<p>1</p>
</div>
<div class="div1_6" id="div2">
<p>2</p>
</div>
<div class="div1_6" id="div3">
<p>3</p>
</div>
<div class="div1_6" id="div4">
<p>4</p>
</div>
<div class="div1_6" id="div5">
<p>5</p>
</div>
<div class="div1_6" id="div6">
<p>6</p>
</div>
<div class="div7_8" id="div7">
<p>7</p>
</div>
<div class="div7_8" id="div8">
<p>8</p>
</div>
<div class="div9" id="div9">
<p>9</p>
</div>
</div>
</body>
</html>
body{
/* 设置相对布局，此处设置布局是为了让其子元素相对此元素布局 */
position: relative;
font-size: 20px;
text-align: center;
color: white;
background-color: #fcdd9c;
/* 清除浏览器默认边距样式 */
padding: 0;
margin: 0;
}
div {
text-align: center;/*将所有的div中的文本居中显示*/
}
#main_div {
width: 100%;
height: 100%;
background-color: #FCDD9C;
display: grid;/*定义一个容器元素*/
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;/*定义每一列的宽度*/
grid-template-rows: 77px 77px 77px 77px 77px 76px 76px 76px;/*定义每一行的宽度*/
grid-gap: 20px;/*设置行间距与列间距为20px*/
}
/*注意以上定义完后,就是一个8*8的容器,有9条网格竖线,9条网格横线*/
/*这里都是设置项目的颜色*/
.div1_6 {
background-color: #C5D08E;
}
.div7_8 {
background-color: #F3A464;
}
.div9 {
background-color: #F8CC9D;
}
#div1 {
grid-column: 1/4;/*这里开始设置项目的属性,需求中div1本来就位容器的左上角,这里设置div1宽度的开始、结束为列条线1至列条线4*/
grid-row: 1/3;/*div1高度的开始和结束为行条线1至行条线3*/
line-height: 150px;
}
#div2 {
grid-column: 1/4;/*横向和div1一样*/
grid-row: 3/9;/*从第三行开始一直到底部*/
line-height: 562px;
}
#div3 {
grid-column: 4/9;/*竖向4-9*/
grid-row: 1/5;/*横向1-5*/
line-height: 363px;
}
/*下面思路都一致*/
#div4 {
grid-column: 4/7;
grid-row: 5/9;
line-height: 368px;
}
#div5 {
grid-column: 7/9;
grid-row: 5/7;
line-height: 174px;
}
#div6 {
grid-column: 7/9;
grid-row: 7/9;
line-height: 174px;
}
/*直接定位竖向4-6，横向2-4，这样与div3重复，并且覆盖了3，大的item号区域会覆盖小的item号*/
#div7 {
grid-column: 4/6;
grid-row: 2/4;
line-height: 174px;
margin-left: 20px;
}
/*设置绝对定位，相对于容器的位置进行定位*/
#div8 {
position: absolute;
left: 75%;
width: 22%;
height: 22%;
top: -8%;
line-height: 230px;
}
/*设置绝对定位，注意重叠的部分应该显示div4，所以div9的z-index应该设置-1*/
#div9 {
position: absolute;
width: 25%;
height: 25%;
line-height: 25%;
left: 44%;
top: 90%;
z-index: -1;
}
自测
HTML5为了使img元素可拖放，需要增加什麽属性？
回答：
1．为了把一个元素设置为可拖放，需要把draggable属性设置为true。
<img draggable=“true”>
2．需要设置元素被拖动时发生的事件ondragstart属性。
Ondragstart关联函数，调用dataTransfer.setData方法，设置被拖动数据的数据类型和值。
3．设置拖到何处ondragover事件
ondragover属性，默认情况下数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的默认处理方式。使用event.preventDefault方法完成。
4．进行放置
当放开数据时，会发生drop事件
ondrop属性调用函数，完成放置事件
调用preventDefualt()，阻止数据的浏览器默认处理方式（drop事件的默认行为是以链接形式打开）
通过datatransfer.getData()方法获得被拖得数据。该方法将返回在setData()方法中设置为相同类型的任何数据。
被拖数据是被拖元素的id(“drag1”)
把被拖元素追加到放置元素中
HTML5哪一个input类型可以选择一个无时区的日期选择器？
回答：先要说明下业务概念，有时区，即UTC标准时间，北京时间属于东八区，如2018-08-12T06:55:21.752Z，这种以z结尾的，就是UTC统一时间表示。无时区即正常的本地时间。常用input类型如下：
<input type=”date” name=”day”>
<input type=”datetime-local” name=”day”>
CSS盒子模型中的Margin、Border、Padding都是什麽意思？
回答：
margin：层的边框以外留的空白（）
border：边框，在padding与margin之间
padding：层的边框到层的内容之间的空白（内边距，边框到content之间的距离）
说出至少五种常见HTML事件
回答：
- 鼠标事件（mouse events）onclick 单击鼠标时运行脚本
- 窗口事件属性（window event attributes）onload 文档加载时运行脚本
- 表单事件（From events）onsubmit 当提交表单时运行脚本
- 表单事件（From events）onfocus当元素获得焦点时运行脚本
- 键盘事件（keyboard events）onkeydown 当按下按键时运行脚本
HTML的onblur和onfocus是哪种类型的属性？
回答：
onblur属于事件属性，在元素失去焦点时触发，即失去焦点事件；常用于表单验证代码
onfocus属于事件属性，在元素获得焦点时触发，即获得焦点事件，常用于<input>,<select>以及<a>标签中。
怎么设置display属性的值使容器成为弹性容器？
回答：display属性设置为flex为弹性布局。
JavaScript中有多少种不同类型的循环？
- While循环
While（条件）{
//代码块
}
循环直到条件为false
2．Do-while循环
Do{
//代码块
}
While（条件）
先执行一次，之后如果while为false则退出循环，否则继续循环。
- For循环
遍历循环
- Foreach（）
遍历循环
- map（）
数组另一个原型方法。将创建一个新的数组，该数组的返回值由一个给定的数组的函数执行生成。
- For…in
- For…of
用户搜索某个单词后，javaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？
回答：常见的语义化标签有<title>,<strong>,<p>,<mark>等等。
1368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
