发表于: 2018-11-18 21:56:28

1 815


今天完成的事情:今天完成了任务十,主要针对响应式做了一些更改,

@media screen and (max-width:767px){
.top,.four-btn,.content-top,.content-main{
padding-left : 1rem;
padding-right: 1rem;
}
.box-style{
padding-right: 0;
}
}
@media screen and (max-width:575px){
.footer{
padding: 0 2rem 2rem 2rem;
}
.col-sm-6 select{
margin-bottom: 1rem;
}
.col-lg-2 select{
margin-bottom: 1rem;
}
.box-size{
display       : flex;
flex-direction: column;
}
.col-lg-8{
display        : flex;
justify-content: space-around;
}
.box-material{
text-align: center;
}
.box-size label{
top: 22px;
}
.box-material span{
position: relative;
}
.box-material label{
left: 17px;
top : 5px;
}
}
@media screen and (max-width:440px){
.four-btn{
flex-direction: column;
align-items   : center;
}
.four-btn button{
margin: 1rem 0;
}
.content-top{
padding: 2rem 0.5rem 3rem ;
}
.strip-little{
width: 76px;
}
.circle{
left: 30.5px;
}
.strip-word{
left: 4.5px;
}
}

如图改变flex主轴方向,或者缩小.container-fluid的padding,缩小.row内宽度。

明天计划的事情:学习sass。
遇到的问题:更改input样式设置::after时要加content,否则不会生效。
收获:熟练媒体查询。

进度:task10

任务总结:

任务名称:CSS=TASK10

成果链接:https://gu1354181433.github.io/learn/css10/task10-1.html

任务耗时:3天

技能脑图:

个人脑图:

官方脑图:


任务总结:

脑图对比,没有用到checkbox标签。

任务十没有什么新知识,大部分时间用在媒体查询和更改input select上,用到了更多的伪类/伪元素:

:checked 用在替换input圆点样式上,当点击input时,更改覆盖在其上的label的颜色;

:after 用在点击时label上添加一个圆点,注意要和content属性一起用 不然会不显示。




返回列表 返回列表
评论

    分享到