C1认证任务三

第一题

最后在网页上实现编辑器没有的功能比如表格隔行换色。

实现过程

1. 首先进入网页，发现这个开源文本编辑器还支持Bootstrap框架
   
   2.先来上一段斑马颜色的的表格（基于Bootstrap框架）

	<table class="table table-striped">
	    <tbody>
	       <tr>
	      <td>秃子头上的虱子</td>
	      <td>明摆着</td>
	    </tr>
	      <tr>
	      <td>张飞吃豆芽</td>
	      <td>小菜一碟</td>
	    </tr>
	      <tr>
	      <td>司马昭之心</td>
	      <td>路人皆知</td>
	    </tr>
	      <tr>
	      <td>小葱拌豆腐</td>
	      <td>一清二白</td>
	    </tr>
	    </tbody>
	    </table>

2. 在来一段消息窗口弹出

<button class="btn btn-lg" data-toggle="modal" data-target="#myModal">
 请开始你的表演
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
   </div>
   <div class="modal-body">
    动词打次动次打次
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">表演成功
    </button>
    <button type="button" class="btn btn-primary">
     失败
    </button>
   </div>
  </div>
 </div>
</div>

第二题

完成下图css盒子模型布局

先确定六个绿色方块的位置贴上部分代码：

.cen1 {
			background-color:rgb(197,208,142);
			height: 150px;
		    width: 350px;
			position:absolute;
			left:20px;
	        top:20px;				
		}
		.cen2{
			background-color:rgb(197,208,142);
			height: 510px;
		    width: 350px;
			position:absolute;
			left:20px;
			top:190px;
			text-align:center;
		}
		.cen3{
			background-color:rgb(197,208,142);
			height: 250px;
			width: 1110px;
			position:absolute;
			top: 20px;
			left:390px; 
			text-align:center;
		}
		.cen4{
			background-color:rgb(197,208,142);
			height: 410px;
			width: 560px;
			position:absolute;
			top: 290px;
			left: 390px;
			text-align:center;
		}
		.cen5{
			background-color:rgb(197,208,142);
			width: 530px;
			height: 195px;
			position:absolute;
			top: 290px;
			left: 970px;
			text-align:center;
		}
		.cen6{
			background-color:rgb(197,208,142);
			width:530px;
			height: 195px;
			position:absolute;
			top: 505px;
			left: 970px;
			text-align:center;

再加上789方块

	.cen7{
			background-color:rgb(243,164,100,161);
			height: 160px;
			width: 200px;
			position:relative;
			top: 40px;
			left: 20px;
		}
		.cen8 {
			background-color: rgb(243, 163, 100);
			width: 200px;
			height: 150px;
			position: absolute;
			right: 20px;
			top: -100px;
			text-align:center;
	       
}        .cen9 {
	        background-color:rgb(243,164,100,161);
			position: absolute;
			left: 20px;
			bottom: -130px;
	        width: 250px;
			height: 150px;
			z-index: -1;

自测题

1.HTML5为了使img元素可拖放，需要增加什么属性?
为了把一个元素设置为可拖放，把 draggable 属性设置为 true
拖放的内容 -ondragstart 和 setData()
dataTransfer.setData() 方法设置被拖动数据的数据类型和值
ondragover设置拖到何处
ondrop进行放置
2.HTML5哪一个input类型可以选择一个无时区的日期选择器？
type=”date”
3、CSS盒子模型中的Margin、Border、Padding都是什么意思？
border边框就是整个div的边框
padding内边框用于控制content与border之间的距离
margin外边距用于控制块与块之间的距离
4、说出至少五种常见的HTML事件？
onClick HTML: 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 鼠标双击事件
onMouseDown HTML: 鼠标上的按钮被按下了
onMouseUp HTML: 鼠标按下后，松开时激发的事件
onMouseOver HTML: 当鼠标移动到某对象范围的上方时触发的事件
5、HTML的onblur和onfocus是那种类型的属性？
onfocus 属性在元素获得焦点时被触发，即：获得焦点事件,,
onblur 属性在元素失去焦点时触发，即：失去焦点事件；常用于表单验证代码中。
6、怎么设置display属性的值使容器成为弹性容器？
display: flex; 为弹性布局
7、JavaScript中有多少种不同类型的循环？
for 、do…while 、while
8.用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义标签最合适？
标签。