1：修改了任务10表单input和select按钮样式，完成整个页面的响应式布局。

       2：学习了less语言框架的基本用法，将任务4的样式重新使用less书写并编译，显示成功。

       3：思考问题：

                   8.1、使用bootstrap轮播图组件实现，也可以采用css动画模拟：设置图像div为全部图片的宽度之和，基于其父div绝对定位，父div设置溢出隐藏，然后使用动画改变不同时间段的定位位置，设置动画animation-iteration-count：infinite即可。

                   8.2、幻灯片效果同样用上面的动画模拟。

                   8.3、Trident/IE内核、Gecko/Firefox内核、WebKit内核、Presto内核。

                   8.4、外边距重叠是指两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

                   8.5、div+css可以改变网页的各种布局样式，代码便于维护修改，表格布局兼容性更好，但不便维护。

                   8.6、bootstrap常用组件：按钮组、下拉菜单、按钮时下拉菜单、输入框组、导航栏、列表组、面板、顶部底部、进度条、标签、副标题、面包屑导航、分页等。

                   8.7、css实现垂直居中：inline-block+vertical-align方法、flex方法、line-height方法、子元素相对父元素绝对定位设置百分比，负margin方法。

                   9.1、在html中引入bootstrap包中的bootstrap.min.css和bootstrap.min.js文件，在书写css样式时，元素应用bootstrap基本样式，加上代表每种效果的的类名，若要修改样式，为元素加上自己命名的类名进行修改，避免冲突。使用bootstrap响应式组件时，注意其关联元素要适应该组件的变化以免布局混乱。

                   9.2、使用link方法、xml方法、@import方法和@media方法指定不同设备下特定的样式，在<style></style>中使用@media screen and (宽度条件){选择器{属性：属性值}}可设定屏幕不同尺寸下的样式。

                   9.3、优点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。缺点：兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长。

                   10.1、参见遇到问题1.

                   10.2、设置页面元素为inline-block，屏幕宽度小时会换行，使用媒体查询控制显示大小，然后设置合适边距，调整位置对齐。使用flex布局可减少代码量，利用flex-wrap和flex属性控制换行和比例缩放，也可达成效果。

遇到问题：

       1：参考任务10资料：清除select下拉默认样式代码，将切出的下拉选项图标置入其中，删除appearance：none行，调整位置，在chorme中显示成功，最后面的清除ie默认样式代码貌似在ie中无效，原因不清楚。同样的方式应用在input中，将切出的图设为背景，调整宽高，设置合适的border-radius和outline，显示成功。

       2：下方信息区使用栅格写，右边内容和微信公众号设置float：right居右对齐，当屏幕小时float：none即可。

       3：使用less写任务4，less中有一个arguments参数，可以传入多个变量统一应用于定制样式中的各个属性中。有个疑问：能否使用arguments传入多个参数，使其中定制样式的属性仅使用其中的单个参数？也就是说，arguments的多参，分别应用于样式中各自的属性，师兄说要去查less高级语法，查了一下，里面的语句结构看的不是很明白，就此作罢。

明日计划：

       1：尽量简化自己写的less，学习sass。

       2：使用less书写任务5和6.