发表于: 2017-03-28 21:05:01
1 671
今天完成的事情:
1、重做了一遍,但格式还是不对,和PS对不上,接着改。
字体用了相对于HTML的rem不过这样就不懂怎么做自适应了。
2、看了下bootstrap,就是一个格栅系统,默认分为12列。
2个要点:
第1个要点是容器(container),行(row)和列(column)之间的层级关系。
<div>
<div>
<div></div>
<div></div>
</div>
</div>
感觉就是table的格式写法
第2个要点,是不同的断点类型的意义及其搭配。
Bootstrap栅格的column对应的类名形如.col-xx-y。y是数字,表示该元素的宽度占据12列中的多少列。而xx只有特定的几个值可供选择,分别是xs、sm、md、lg,它们就是断点类型。
感觉就是自己在12列中做排列组合,什么元素用什么类型的,占几列。
别的还有Foundation栅格(了解),他写法是
<div>
<div class="medium-6 columns"></div>
<div class="medium-6 columns"></div>
</div>
明天计划的事情:接着改。
遇到的问题:用了rem的情况下怎么做自适应,头像图怎么调整白色背景和头像的相对位置。
收获:对不用table的td换了用li也可以做到在第二列中换行而不会跑到第一列去。就是设了个宽度。
评论