今天完成的事情/收获： 开始着手完成任务9 构思并写了大体布局

                              今天复习的属性：

                              1 overflwo属性，赋予一个值：hidden意思是内容会被修剪，但是浏览器不会显示                                供查看内容的滚动条（我自己的理解就是有时候给代码的样式会让页面出现意想之                                 外的布局，但是只要给个样式overflwo:hidden 就会发现页面被修剪的特别端正）

                               2 box-sizing: border-box;为元素指定任何内边距和边框都将在已设定的宽度和高                                 度内进行绘制（有时候你向给一个元素的某一条边框设置线框 但是有时候不能用                                    border直接给样式 这时候用box-sizing:border-box;就没有你设置不了的线！）

                                3select表单元素 生成下拉列表                                                                                                            

<select name="fruit">
     <option value="1">苹果</option>
     <option value="2">橘子</option>
     <option value="3">香蕉</option>
 </select                                                                         

                                新认知的属性：

                               1 counter-reset:设置某个选择器出现次数的值 赋值：step;(创建步骤数字计数                                       器，就是元素会自动添加数字1~)

                               2 :before选择器和:after选择器 搭配content属性来指定在被选元素的内容前后插                                  入内容

                               3：z-index属性设置元素的堆叠顺序（比如说一个图片可以和一段文字重叠 出来                                  的效果就是背景图上面出现文字）                             

明天计划的事情：1做完任务10中的表单样式和底部导航栏并做响应式优化 

                             2复习任务10遇到的代码 

                             3认真学习表单元素,比如今天遇到的下拉菜单<select><optin>以及radio属性

               4学会改变表单的默认样式，比如 radio等
遇到的问题：之前的表单忘了很多。做出的样式总是差强人意 。流程图我百度了做法 但是里面的有些                         样式我还是理解的不够透彻，如下：

.steps {  position: relative;  margin-bottom: 30px;  counter-reset: step;  /*创建步骤数字计数器*/}

/*步骤描述*/.steps li {  list-style-type: none;  font-size: 12px;  text-align: center;  width: 25%;  position: relative;  float: left;
}

/*步骤数字*/.steps li:before {  display: block;  content: counter(step); /*设定计数器内容*/
  counter-increment: step;  /*计数器值递增*/
  width: 32px;  height: 32px;  background-color: #019875;  line-height: 32px;  border-radius: 32px;  font-size: 16px;  color: #fff;  text-align: center;  font-weight: 700;  margin: 0 auto 8px auto;
}

/*连接线*/.steps li ~ li:after {  content: '';  width: 100%;  height: 2px;  background-color: #019875;  position: absolute;  left: -50%;  top: 15px;  z-index: -1; /*放置在数字后面*/}

/*将当前/完成步骤之前的数字及连接线变绿*/.steps li.active:before,.steps li.active:after {  background-color: #019875;
}

/*将当前/完成步骤之后的数字及连接线变灰*/.steps li.active ~ li:before,.steps li.active ~ li:after {  background-color: #777;
}

相应的HTML代码：

<ul class="steps">
  <li>投递成功</li>
  <li class="active">简历被查看</li>
  <li>待沟通</li>
  <li>面试</li></ul>

这些属性单个放出来大体意思还能理解。但是揉在一起就有点嚼不烂 。这点希望熟能生巧把！