今天完成的事情：

完成了中间部分表单的布局，明天完成任务10。

明天计划的事情：

做完底部布局，同时修改头部和中间部分的代码，完成调试。

遇到的问题：

开始这一块儿不会做，不知道怎么实现，后来经过和其他人交流才知道是自己想复杂了。我本来想的是要有链接和动画效果，比如点击1全部变成橙色，再点击2再全部变成橙色、进度条往前进。

经过交流才知道只需要实现静态效果就行了。直接用最简单的盒子布局布局，结合列表、背景色进行了实现。

收获：

之前每次清除浮动都是对盒子单独设定，但要写好多代码，今天学到只有设置一个clearfix类，然后对类进行样式设定，每个盒子直接引用类就行了。

/*清除浮动*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom: 1; }

学会了表单的各项知识：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

   当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

单选下拉框

<seclect>

<option value="提交值">选项</option>

</seclect>

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能。

label：为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。