今天完成的事情：修改任务十，写任务十一
明天计划的事情：完成任务十一
遇到的问题：

去除外边距后，右边有空白，发现是bootstrap自带的媒体查询的问题。

收获：

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

 .radio input {

        display: none;/*取消默认样式*/

    }   

    .radio input+label {    /*紧接input出现的label，要有相同父元素*/

        display: inline-block;

        position: relative;

        border-radius: 50%;

        border: 1px #aaa solid;

        width: 14px;   /*外圈圆高度、宽度*/

        height: 14px; 

    }

    .radio input+label::after {  /*伪元素制作内部的圆*/

        content: " ";

        border-radius: 50%;

        position: absolute;/*居中方法*/

        top: 50%;

        left: 50%;

        width: 6px; /*中心圆的宽度、高度*/

        height: 6px;

        margin-top: -3px;

        margin-left: -3px;

    }

    .radio input:checked+label {

        background-color: blue;/*选中后外圈圆颜色*/

        border-color: blue;   

    }  

    .radio input:checked+label::after {   

        background-color: white;/*选中radio中心圆的颜色*/

    }

select::-ms-expand { display: none; }/*IE,将默认的select选择框样式清除*/

    select {

        /*将默认的select选择框样式清除*/

            appearance: none;

            -moz-appearance: none;

            -webkit-appearance: none;

            background: url("自定义图片.xxx") no-repeat scroll right  center transparent;

            background-size: 18px 26px;

    } 

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

           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)等。

           3.引入Media Query模块。