今天完成的事情：

1.做了任务10顶部的流程图，模拟了单选框还有下拉选框

明天计划的事情：

1.继续做任务10后面部分

2.完善任务10的响应式

遇到的问题：

1.做任务10顶部流程图时遇到困难，流程图一个步骤的两头是椭圆框，需要实现一个如下图的hover效果:

当点击第二个步骤时，2的椭圆框需要盖住1右边的椭圆框同时盖住3左边的椭圆框，并且变成橙色，点击第三个步骤也要有这种效果，在这个问题上卡了挺久，最后是设置负的margin实现重叠后，再利用position，在hover时加上z-index实现覆盖，这样的方法来实现。

2.在模拟单选框时，要实现点击文字的同时选中表单，这里也卡了很久，通过百度得知可通过下面的方法实现：

给input设置一个id，用label标签包裹文字，其中的for属性设置为input的id就可以实现了。（中间曾一度将label写成了label，导致一直无法实现功能，浪费了很多时间，这点要吸取教训）

收获：

1.表单元素的属性

form元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。最常用的表单控件是input元素

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

几个重要的传统属性介绍：

name

name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据

[注意]只有设置了name属性的表单元素才能在提交表单时传递它们的值

type

type属性用来规定input元素的类型

[注意]如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type="text"

accept

accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的MIME类型

[注意]该属性只能与type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt

alt属性为图像输入规定替代文本，功能类似于image元素的alt属性，为用户由于某些原因无法查看图像时提供备选信息

[注意]alt属性只能与type="image"的input元素配合使用

<input type="image" src="#" alt="测试图片">

checked

checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置

[注意]checked属性只能与type="radio"或type="checkbox"的input元素配合使用

<input type="radio" name="radio" value="1" checked>

<input type="radio" name="radio" value="2">

<input type="checkbox" name="checkbox" value="1">

<input type="checkbox" name="checkbox" value="2">

<script>

var oInput = document.getElementsByTagName('input');

for(var i = 0,len = oInput.length; i < len; i++){

    oInput[i].onmouseover = function(){

        this.checked = 'checked';

    }

}    

</script>

src

src属性作为提交按钮显示的图像的URL

[注意]src属性只能且必须与type="image"的input元素配合使用

<form action="#">

    <input name="test">

    <input type="image" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片">

</form>

value

value属性为input元素设定值。对于不同的输入类型，value属性的用法也不同：

type="button"、"reset"、"submit"用于定义按钮上的显示的文本

type="text"、"password"、"hidden"用于定义输入字段的初始值

type="checkbox"、"radio"、"image"用于定义与输入相关联的值

[注意]type="checkbox"或"radio"必须设置value属性

2.position属性的用法和技巧

position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位--相对于浏览器窗口）。

（1）position:relative

生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。不需改变位置但可以用来配合z-index使用。

（2）position:absolute

absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父...)级来定位；如果父级都没有position属性，则相对于document来定位；使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。

（3）position:fixed

fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。

（4）z-index属性

使用定位后的元素都会有z-index属性，同级定位元素这个值越大，其显示越靠前。这项属性需要注意的是比较时是同级定位元素进行比较。在用于覆盖时很好用。

进度：css任务10

任务开始时间：2018.6.10

预计demo时间：2018.6.11

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html