今天完成的事情：修改任务十一，完成任务十二
明天计划的事情：进行任务十三
遇到的问题：暂无
收获：对less的变量，混合，嵌套，更加熟悉。

修改任务十一：

去掉任务十一的bootstrap的框架；

采用“顶宽”来控制内容的宽度；

修改input输入框的模式，只能数字，并限制字数长度。

通过任务十二

今天学了less的混合属性。

任务十总结

通过任务十，有继续加深了bootsrap的运用，因为任务八九是用bootstrap的3.3.1做的，所以到任务十用了4.1的版本，感觉他们大同小异。做任务时感觉不是很痛快，没觉得框架用完是很轻松感觉，反而更觉得代码繁琐复杂。另外通过任务十，学习到了一些新的知识，比如利用栅格系统的offset使末位容器靠右边，同样也可以用push使首位容器靠左，他们的原理是把row剩余的空间以margin的形式添加到元素上，使整个row被铺满，而达到效果。学习了如何用input做单选按钮自定义样式。学习到一种新的下拉菜单

脑图：

深度思考：

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

这个主要对应的是用input元素制作按钮。

<div class="m5-choose">
   <input type="radio" id="m5-1" name="box1"/>
   <label for="m5-1">三层A瓦优质</label>
</div>

一、form元素

        form元素定义 HTML 表单,HTML 表单是一个包含表单元素的区域。

        表单元素是允许用户在表单中输入内容,比如：文本输入、下拉列表、单选按钮、复选框等等。多数情况下被用到的表单标签是输入标签input。

二、radio

       先介绍一下input元素，input元素是最重要的表单元素。

       input元素在 form元素中使用，用来声明允许用户输入数据的 input 控件。

       输入类型是由类型属性（type）定义的，输入类型至少包含23种，

                     大多数经常被用到的输入类型如下：text（文本输入）、password（密码输入）、submit（提交按钮）、button（按钮）

        、image（图像作为提交按钮）以及checkbox（复选框）和今天的重点radio（单选按钮）。

三、label

       label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。

      "for" 属性可把 label 绑定到另外一个元素。只需把 "for" 属性的值设置为相关元素的 id 属性的值。

四、select

select标签用来创建下拉列表。select标签中的 option 标签定义了列表中的可用选项

五 修改radio默认样式

     需要用到的工具如下：label标签；

                                    :checked 选择器,匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

     兄弟选择器：

                       1、+ 选择器（相邻兄弟选择器），可选择紧接在另一元素后的元素，且二者有相同父元素。

                       2、~ 选择器，作用是查找某一个指定元素的后面的所有兄弟结点。

六 修改select默认样式

    appearance 属性，可以让元素看上去像标准的用户界面元素。

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

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

"自适应网页设计"

首先：在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

          所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

第二：不使用绝对宽度

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

         具体说，CSS代码不能指定像素宽度：width:xxx px;

                                    只能指定百分比宽度：width: xx%; 或者 width:auto;

第三：相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。

           body {font: normal 100% Helvetica, Arial, sans-serif;}上面的代码指定，字体大小是页面默认大小的100%，即16像素。

           h1 {font-size: 1.5em;}设置1rem为10pxhtml {font-size: 62.5%;}h1 {font-size: 1rem;}

第四、流动布局（fluid grid）

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

第五、选择加载CSS（媒体引入、媒体查询）

           "自适应网页设计"的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

             @import url("tinyScreen.css") screen and (max-device-width: 400px);

             媒体查询@media screen and (max-device-width: ***px)

第六、图片的自适应（fluid image）

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

           这只要一行CSS代码：img { max-width: 100%;}这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img, object { max-width: 100%;}

                                                                                   老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

            此外，windows平台缩放图片时，可能出现图像失真现象。

                    这时，可以尝试使用IE的专有命令：img { -ms-interpolation-mode: bicubic; }或者，Ethan Marcotte的imgSizer.js。addLoadEvent(function() {var imgs = document.getElementById("content").getElementsByTagName("img");imgSizer.collate(imgs);});

            不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。