发表于: 2017-04-11 21:11:51
2 662
今日所做:
1.进行任务14,开始拆分自己的组件
2.观察了一下这三个页面,发现三个页面中的header和footer是相同的,可以重复使用,因此一定要拆出来
3.第一个页面内容比较多,而且内容部分有三行都要有响应式的布局变化,因此打算做出一个类似于bootstrap网格
系统的,能够随着屏幕布局发生变化的div模块
4.布局的时候flex非常好用,可以让一行的div垂直居中,水平的排布方式也可以进行设置,因此打算通过flex进行
响应式的设计
5.flex有一个flex-wrap的功能,即让一行的元素如果宽度过大,一行容不下的时候可以自动换行;在设定flex-wrap
的情况下,再去设定每个div的宽度,宽度用百分比来设置,这样就可以控制一行中要放置几个div
6.使用响应式设计模块的时候,可能要根据响应式的布局变化再去进行细节调整,为了方便使用,仿照bootstrap的思路
设置了一个container容器和row,container为100%宽度,row为80%的宽度,然后同样设置col去进行响应式变化;
给页面布局的时候为了进行细节调整,就在col里面进行具体的元素布局和设置
明日计划:
继续进行任务14,了解导航栏的结构,和轮播图的原理
遇到的问题:
为了使用方便,在设置模块的时候设置了一个针对于某一行模块,样式比较具体的模块样式;结果在使用的时候,不仅
相应的模块布局的时候进行微调很不方便,用这个模块样式去套其他的布局的时候就更不好用了,因此总结在设置模块
的时候,不需要设置的太具体,大体样式和结构设置好就可以,等具体设置的时候可以再另行修改,这样的模块简洁轻便
,复用性也高
评论