今天完成的事情

• # 完成任务10页面的测试,各设备均能良好的访问;
• # 学习JS概率，重点理解变量，函数，对象，作用域，数组，IF ELSE，For 循环的含义;
• # 查看有关预编译语言的资料,理解预编译语言的概念;

明天计划的事情

• # 深入了解sass与less的特点与差异;
• # 下一步进行任务11;

遇到的问题

• 已解决

  #  使用checked选择器实现下拉列表的制作;
• 
• 
  
• 用法:
• checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
• 
  
• 解决思路:
• 
  
• 涉及到的三个关键技能点:checked选择器/label标签/checkbox复选框.
• 
  
• 
  
• checked选择器:将列表与复选框(已选中状态)关联起来;
• 理解:单词"checked"后缀为"ed",代表的是过去完成的事情
• 
  
• HTML:
• 
  
• CSS:
• 
  
• 代码说明:点击input复选框之后,将ul列表改为块状元素显示出来;
• (原列表处于不显示状态display:none;)
• 
  
• 
  
• label标签:点击 label 元素内的文本，则会切换到控件本身;用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
• 
  
• 
• 
  
• 代码说明:通过id选择器将label内的汉堡图标与复选框绑定起来,实现点击图标即可改变复选框样式,提高用户体验;
• 此处效果可以理解为采用汉堡图标替代复选框默认的标记样式,原默认复选框样式将被隐藏;为了保证点击效果,原图标样式只能隐藏(opacity:0),切不可让它彻底消失(display:none)
• 
  
• 
  
• checkbox:复选框,特点是点击一次代表选中,再次点击代表取消,利用这一特性再配合checked选择器实现点击图标后显示下拉菜单,再次点击图标将关闭下拉菜单;
  
• 
  

收获

• #  各种布局方式的总结与思考;
• 
  
• 以发展和联系的眼光看问题:
• 
  
• 网页从简单到复杂,催生了布局方式的不断改良和完善,对应的就是层出不穷的元素/标签/样式/属性/我尝试地将这些各种布局方式进行详细的分类与整理,发现很难办到.不同布局方式很难与单个CSS属性联系起来.这就好比我们的朋友圈一样 ,关系错综复杂,而不是像学校班级,学生是属于这个集体的或那个社团的;
• 
  
• 这些布局方式的定义来源于人们对网页的期待.
• 
  
• 静态布局:在初期的网页制作过程中,人们仅仅期待的是网页能传达出具体的内容;
• 
  
• 流式布局: 需要传达的信息种类多种多样,特别是图片/文字,人们期待不同元素之间进行合理的排版,就像报纸一样方便阅读;
• 
  
• 自适应布局:随着终端设备特别是小屏设备的种类日益多样化,人们期待能够在不同设备之间获得一致的浏览体验,即同一个页面,在不同设备上,均能显示统一的效果;
• 
  
• 响应式布局:随着市场竞争激烈和受众对用户体验的重视,这就要求制作页面时,在不同设备上的布局方式应该适应不同设备的特点;手机/平板/PC都有各自的使用场景和交互逻辑,在布局方式上应该要区别开来;
• 
• 这要求我们在制作网页时,从需求出发,灵活地运用各种标签/属性进行布局;了解各种布局方式的概念与分类有助于我们整理思路,但真正重要的是勤而行之,搞懂他真正在做些什么.
• 
  

• 总结

  • • task10 :
    • 成果链接: http://www.yanzehao.top/task10/task10.html#
    • 官方脑图:
    • 
    • 
      
    • 任务脑图:
    • 
    • 任务耗时:3天
    • 此任务学到的主要新知识是form表单,其中涉及到了很多的属性以及相对应的值,感觉一下子接受那么多新内容让人眼花缭乱,有点吃不消,也很难抓住重点.
    • 其实回过头来看本任务涉及到的属性不多.我一直以来的学习方式是从整体到局部,所以我刚开始主要的精力都耗费到了概念的理解与梳理,相对而言练习的时间较少.
    • 概念的理解与代码实践相辅相成缺一不可,可其中所占的比例又该如何把控呢?