今天完成的事情：

基本完成任务10页面布局。

input   type=radio定义单选按钮，type=text定义单行输入字段。

clip剪裁属性（0,0,0,0）使元单选按钮隐藏，clip剪裁属性只在position： absolute；下有效。

隐藏原样式按钮：

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

添加按钮样式：

input[type="radio"] + label::before {
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 1rem;
    height: 1rem;
    border: .6px solid #b3b3b3;
    border-radius: 50%;
    margin-right: .4rem;
    text-indent: .15rem;
    line-height: 1;
}

给按钮勾选状态添加不同样式：

input[type="radio"]:checked + label::before {
    background-clip: content-box;
    border: .3em solid #1d7ad9;
    border-radius: 50%;
}

模拟下拉框使用select标签去除下拉框原样式后更改，按钮使用背景图片。

.box-put select {
-webkit-appearance: none;
display: block;
padding: .5rem 2.5rem .5rem 1rem;
margin: auto;
background-image: url("arrow.png");
background-repeat: no-repeat;
background-position: 7rem;
color: #999999;
outline: none;
}

使用@media screen and （min/max-width：屏幕宽度）{}更改不同页宽下的内容布局。

明天计划的事情：

解决页面头部按钮自动显示hover效果问题。

了解less/sass

收获：