发表于: 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,了解导航栏的结构,和轮播图的原理

遇到的问题:

为了使用方便,在设置模块的时候设置了一个针对于某一行模块,样式比较具体的模块样式;结果在使用的时候,不仅

相应的模块布局的时候进行微调很不方便,用这个模块样式去套其他的布局的时候就更不好用了,因此总结在设置模块

的时候,不需要设置的太具体,大体样式和结构设置好就可以,等具体设置的时候可以再另行修改,这样的模块简洁轻便

,复用性也高


返回列表 返回列表
评论

    分享到