基于bulma.css框架的响应式网站切图
本人兼职的公司网站需要进行改版,设计小徐同志出了平面图,很漂亮,不过本人以前都是偷懒,也是出于成本考虑,基本都是采用修改模板与仿站的方式来制作网站,好久没有从无到有的切图做网站了,回想起以前切图从TABLE到div+css,很是享受 配合zen coding,是段美好的回忆...
没有经历响应式网站的从无到有编码,还是有很多的未知,响应式实现,全屏滚动,滚屏动画,需要在编码中逐一突破解决。
预备知识的学习,阅读bulma.css框架文档手册,深入了解flex布局,全屏滚动插件fullpage.js,动画实现原理,开始编码
几点收获、经验记录与分享
- 导航的实现,汉堡菜单实现,需要配合JS实现
- 注意自写CSS的干扰性,影响框架和插件的实现
- 页面设计尺寸,字体大小
- bulma.css框架的经验技巧 类名还是很容易记
- 设计注意事项,响应式细节调整
- 灵活运用CSS属性实现各种排版 定位技巧及负数的应用
- flex布局的技巧
- 纯CSS动画及交互动作的实现
- fullpage及WOW的应用
需要不断的突破自己的未知,多编码多尝试,才能有更多的经验收获,才能更好的理解技术概念、活学活用