一、今日完成的情况

       1、完成任务十提交审核，梳理深度思考，并总结。

       2、制作小课堂PPT。

       3、学习任务十一涉及到的知识点。

二、明天的计划

       1、小课堂提前了，明天估计要减少一点任务时间，多分配点时间准备小课堂了。

       2、开始任务做十一。

三、遇到的问题

        暂未遇到新的问题。

四、收获

       深度思考：

       1、如何改变默认radio和select的样式?

          （1）首先想一想，为什么要修改radio和select的样式？

                   由于大多数浏览器的默认样式实在不够美观，又不能被直接修改样式，所以需要通过CSS、jQuery等其他途径来改变radio和select的样式，来达到设计要求。

          （2）实现原理：

            1>.对select来说，可以利用css中的“七层重叠法”来改变其样式。何谓“七层重叠法”，即网页内容先后顺序分别为：背景边框 ， 负值z-index ， display:block , 浮动 , display:inline-block , z-index:auto , 正值z-index，越往后在网页中的层级越靠前，也就是说如果一个z-index值为1或者更高的话 它会遮挡掉他之前的所有元素。利用这个法则以及opacity设置透明度，可以模拟一个新的是自定义样式，来覆盖默认样式。

           2>.对radio来说，可以将它写到label标签中，点击label域则会选中它，采取隐藏的方式或者直接消除原本的默认样式，再自定义样式即可达成改变默认样式的效果。

       2、自适应小屏幕设备时，该如何布局？

         （1）什么是自适应网页设计？ 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）。

         （2）实现原理：

           1>.在网页代码的头部，加入一行meta标签：meta name="viewport" content=content="width=device-width, initial-scale=1" 这段代码意思是说网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。viewport是应对手机模式访问网站,网页对屏幕而做的一些设置。设置viewport后，移动页面就可以进行拖动，放大缩小。

           2>.不使用绝对宽度，使用相对单位 具体来讲CSS代码不能指定像素宽度为xx px;只能指定百分比宽度 width: xx%;或者width:auto; 字体只能使用相对大小（em,rem,vw,vh,vmin,vmax)等。

任务名称：CSS-TASK-10

成果链接：任务十

任务耗时：5月19日-5月21日，耗时3天。

技能脑图：

个人脑图：

官网脑图：

任务总结：

1. 1.         任务进度符合预期，未延期。任务10，和任务8-9相比没有太多的新知识，页面也简单了很多，基本没有遇到太多的问题，只是最近几天搬家，看房子，太疲倦了，导致效率有点低了，做了3天才做完。本次任务耗时3天，做完了任务基本符合要求，提交给师兄检查也只有两处细节需要修改，虽然这个任务较为简单，但总算第一次没那么多错误需要反复修改了，哈哈，也省的反复麻烦师兄给我检查了。在做这个任务的过程之中，主要学习和使用了表单属性，bootstrap的进度条、分离式按钮以及自定义表单样式来达成改变默认样式，换成设计图样式的效果，也初步了解了一下兄弟选择器，暂时没有深入的研究这个知识点。
      做完任务，梳理了一下深度思考，对改变默认radio和select的样式和对自适应小屏幕设备进行布局的定义和实现原理有了更多的了解。
      自适应从一开始就一直涉及，这里就不反复赘述了，简单地梳理一下改变默认radio和select的样式深度思考：

             如何改变默认radio和select的样式?

           （1）首先想一想，为什么要修改radio和select的样式？

              由于大多数浏览器的默认样式实在不够美观，又不能被直接修改样式，所以需要通过CSS、jQuery等其他途径来改变radio和select的样式，来达到设计要求。

           （2）实现原理：

             1>.对select来说，可以利用css中的“七层重叠法”来改变其样式。何谓“七层重叠法”，即网页内容先后顺序分别为：背景边框 ， 负值z-index ， display:block , 浮动 , display:inline-block , z-index:auto , 正值z-index，越往后在网页中的层级越靠前，也就是说如果一个z-index值为1或者更高的话 它会遮挡掉他之前的所有元素。利用这个法则以及opacity设置透明度，可以模拟一个新的是自定义样式，来覆盖默认样式。

             2>.对radio来说，可以将它写到label标签中，点击label域则会选中它，采取隐藏的方式或者直接消除原本的默认样式，再自定义样式即可达成改变默认样式的效果。

   2. 脑图对比分析：基本符合官网预期，自己的脑图提到了做任务10过程中运用到的新知识点，例如bootstrap的进度条、分离式按钮等。
   3. 任务中遇到的疑难问题，任务十由于较为简单，任务过程中没有遇到疑难问题，遇到的小问题通过查找资料和求助师兄都得以解决了。

任务进度：

任务十

任务开始时间：

2018.05.19

任务完成时间：

2018.05.21

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