今天完成的事情：

完成任务10，提交任务

明天计划的事情：

学习less，开始任务10

遇到的问题：

数字输入框刚开始没有太多想法，加入代码之后样式并不是自己想要的效果，最终实现下面的效果。

这3个输入框要做成一个整体，还要实现响应式效果。在这3个输入框外面加父级div.form-group，这是bootstrap的类名

@media (min-width: 768px) {

 .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }

}

数字输入框要作出限制：只能输入5位数字，使用number的属性不能达到目的，只能使用别人代码。

oninput="if(value.length>5)value=value.slice(0,5)"

收获：

1 之前使用过form元素，感觉很难下手，可能是内容太多、不熟悉，感觉很难用。这次相对好了一些，改变radio、select默认样式，看到可以定制样式，对于form元素多了一些了解。

2 bootstrap为我们背后做了很多事情，虽然使用很方便还是需要尝试自己的想法，很多方法还是需要自己尝试才能明白其中内在的原理，扩展自己的思路和视野。

任务11

开始时间：5.11

预计结束时间：5.15

http://task.jnshu.com/zentao/project-task-629.html

任务10深度思考：

1.如何改变默认radio和select的样式？

使用css3

改变默认radio

1 去掉默认样式

input[type='radio']{ display:none; }

2 label前添加模拟图标

label:before{

    content: "";

    display: inline-block;

    width: 17px;

    height: 16px;

    margin-right: 10px;

    position: absolute;

    left: 0;

    bottom: 0;

    background-color: #3797fc;

}

input[type='radio'] + label:before{

     border-radius: 8px;

}

3 选定状态时改变外观

input[type='radio']:checked+label:before{

    content: "\2022";

    color: #fff;

    font-size: 30px;

    text-align: center;

    line-height: 19px;

}

改变默认select

select{

    /*复写边框*/

    border:1px solid  green;

    /*清除默认样式*/

    appearance:none;

    -moz-appearance:none;

    -webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/

    background: url("arrow.png") no-repeat scroll right center ；

 }

 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand { display: none; }

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

页面能适配众多不同的终端设备，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）
2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。

1 学会运用 css3 Media Queries，根据不同的屏幕分辨率，选择应用不同的css规则

1. @media screen and (max-width:400px){    
2.     .class  {   
3.          background:#ccc;    
4.      }   
5.  }  

2 在网页头部加上viewport标签

1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  

该属性可以控制视窗口宽度的大小。它可以被设置为实际的具体像素width= 600或为特殊设备设置宽度值。 viewport设置属性如下： 

width：可设定数值，或者指定为 device-width 

height：可设定数值，或者指定為 device-height 

initial-scale：第一次进入页面的初始比例 

minimum-scale：允许缩小最小比例 

maximum-scale：允许放大最大比例 

user-scalable：允许使用者缩放，1 or 0 (yes or no)

3 不使用绝对宽度

4 字体最好不要用绝对大小(px)，而使用相对大小(em)

5 流动布局（fluid grid）

1. .main { float: rightright; width: 70%; }        
2. .leftBar { float: left; width: 25%; }   

6 图片的自动缩放，等比缩放

1. img{   max-width: 100%; }   

任务总结

任务名称：TASK=8-9

成果链接：https://chenzl90.github.io/demo-jnshu/task10/index.html

任务耗时：5.7-5.11 共4天，延期1天

技能脑图：

个人脑图

任务总结：

a. 任务进度延期1天，8号讲小课堂和相关事情花费半天

b. 脑图对比

这个任务主要关于表单元素，这个方面没有差别。其余是自己的一些想法，在任务中花费较多时间。

c. 任务中遇到哪些疑难问题，最终是如何解决的，有哪些值得分享的收获

1 进度条这种样式还要实现响应式，自己没有太多想法，就去找文章挑出来一篇感觉较合适。用ul/li组合实现进度条，上边框模拟进度条，css实现的图标定位到上边框。

2 改变默认radio和select的样式

改变默认radio

1 去掉默认样式

input[type='radio']{ display:none; }

2 label前添加模拟图标

label:before{

    content: "";

    display: inline-block;

    width: 17px;

    height: 16px;

    margin-right: 10px;

    position: absolute;

    left: 0;

    bottom: 0;

    background-color: #3797fc;

}

input[type='radio'] + label:before{

     border-radius: 8px;

}

3 选定状态时改变外观

input[type='radio']:checked+label:before{

    content: "\2022";

    color: #fff;

    font-size: 30px;

    text-align: center;

    line-height: 19px;

}

改变默认select

select{

    /*复写边框*/

    border:1px solid  green;

    /*清除默认样式*/

    appearance:none;

    -moz-appearance:none;

    -webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/

    background: url("arrow.png") no-repeat scroll right center ；

 }

 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand { display: none; }