发表于: 2018-06-22 23:49:35
1 657
今天完成的事情:
第一天来到修真院正式学习,感觉蛮不错,shang做了自我介绍,认识了不少师兄师姐~
下午和晚上的时间大致做完了任务10并且学习了下命名规范
今天的收获
BEM命名规范
B(block,块)E(element,元素)M(modifier,修饰符)
块与块之间使用-链接,块与元素使用_链接,一个元素或块的不同状态或版本使用--链接
block-block_element--modifier
block代表更高级别的抽象或组件
block_element代表block的后代
element--modifier代表元素的不同状态
举例子:
命名footer中间的块:footer--mid;中间块的span元素:footer--mid_span
使用css模拟下拉框
原理:外层div嵌套select标签,将select默认样式全部none掉,然后更改外层的div样式来达到效果
清理样式代码:
select{ //清除select的边框样式
border: none;
//清除select聚焦时候的边框颜色
outline: none;
//将select的宽高等于div的宽高
width: 100%;
height: 40px;
line-height: 40px;
//隐藏select的下拉图标
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
//通过padding-left的值让文字居中
padding-left: 60px;
}
今天遇到的问题:
已解决:
1.隐藏IE下select图标,其他浏览器可以加前缀然后appearance:none,IE下方法:select::-ms-expand(display:none)
2.栅格布局不能直接使用flex布局会冲突,比如.row使用flex方法两端对齐,会发现达不到效果,解决方法:再嵌套层div
明天的计划:
上午:解决任务10自适应问题,完成任务11
剩余时间:完成任务12
评论