一、今天完成的事情

1、完成任务10：制作主体表单。

2、学习【洗髓换骨】第四讲—CPU/总线/IO。

3、分院大扫除。

4、任务10深度思考问题：

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

a)     在网页代码的头部，加入一行viewport元标签。

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

b)    不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

c)     相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em或rem）

d)    流动布局（fluid grid）

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

e)     选择加载CSS

“自适应网页设计”的核心，就是CSS3引入的Media Query模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

f)      CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

g)    图片的自适应（fluid image）

除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。

二、明天计划的事情

1、完成任务10的提交及完成任务11。

2、思考任务11深度思考问题：

 1)    如何使用less?

 2)    如何使用sass?

 3)    less和sass有什么区别？

 4)    如何使用gulp编辑less？

三、遇到的问题

关于如何改变默认radio和select的样式？在网上查到解决：

首先上效果图：

纯CSS

此方法需借助CSS3，关键CSS代码如下

.demo1 input[type='radio'],.demo1 input[type="checkbox"]{

    display:none;

}

.demo1 label:before{

    content: "";

    display: inline-block;

    width: 17px;

    height: 16px;

    margin-right: 10px;

    position: absolute;

    left: 0;

    bottom: 0;

    background-color: #3797fc;

}

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

     border-radius: 8px;

}

.demo1 input[type='checkbox'] + label:before{

     border-radius: 3px;

}

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

    content: "\2022";

    color: #fff;

    font-size: 30px;

    text-align: center;

    line-height: 19px;

}

.demo1 input[type='checkbox']:checked+label:before{

    content: "\2713";

    font-size: 15px;

    color: #f3f3f3;

    text-align: center;

    line-height: 17px;

}

select

/*select*/

 .select select{

    /*复写Chrome和Firefox里面的边框*/

    border:1px solid  green;

    /*清除默认样式*/

    appearance:none;

    -moz-appearance:none;

    -webkit-appearance:none;

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

    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

    /*为下拉小箭头留出一点位置，避免被文字覆盖*/

  padding-right: 14px;

 }

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

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

该方法关键在于清除默认样式，使用css3的appearance属性，但是兼容性较差，仅支持IE9+。若要兼容低版本浏览器，可以使用Div进行模拟。

四、收获

    1、学会如何改变默认radio和select的样式。

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

3、规范自己的代码。