发表于： 2017-03-29 22:23:53
2 815
今天完成的事情：
去掉bootstrap框架后将页面布局进行分拆，分拆出轮播、导航、头部、底部、栅格布局等组件，然后利用组件组合起来写页面。
不用bootstrap之后才发现一些小的细节要自己一点一点去调试、设置是多么麻烦，赞美一下框架的伟大~
明天计划的事情：
开始做第二个和第三个页面，完成任务15的提交。然后开始学习javascript，看其他几个同学都开始学了，并且感觉开始有一定难度，得加快进度敢上去了。
遇到的问题：
没有bootstrap框架，因为没有学习js的缘故，比如导航的点击弹出、轮播的自动手动结合等暂时还做不出来，只能先写成静态的了。希望学习完js之后结合起来再自己写一个可以动态响应的轮播图、导航切换、下拉菜单等。
收获：
之前flexbox用的较少，这次做第一个页面专门学习、运用了一下，主要用的几个方面：
垂直居中：
display: flex;
justify-content: center;
align-items: center;
行内flexbox:
display: inline-flex;
justify-content: center;
align-items: center;
垂直方向排列：
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
less及css文件里面@import引入文件的用法及写法：
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
返回列表
评论