发表于: 2017-03-31 23:44:41
3 778
今天完成:
完成任务10,明天修改下细节的问题。昨天解决了主要问题,今天在修改样式使符合psd。
明天计划:
提交任务10 ,开始任务11.
遇到困难:
1.按钮部分由于为了使排列整齐,都是用了display:inline-block,所以在小屏幕的时候会出现无序的自动换行。所以使用媒体查询是按钮在小屏幕时变为display:block,利用块级元素的特点,使排列整齐,
@media screen and (max-width: 1240px){
p{
display: block;
}
}
2.select的more样式改变,与处理radio的思路一样,先隐其默认样式,再用背景图片替换,调整下位置就好了。
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
}
收获:学会了修改默认select的样式。对于display的集中值有了更深的理解。
评论