婴姿坊微商城前端开发总结

1、当图标与文字在一起的时候，最快捷的方法是将连个元素设置为display:inline-block;vertical-align:middle;这就可以了，当图标元素显示的比较小或大的时候，可以设为其width和height；设置了这两项后可能会出现图标与文本对不齐的情况，可以设置图标元素的margin，这样基本可以解决

2、当设置一个文本元素在图片元素上定位时，可以将图片元素width=100%，但是这样的话会出现一个问题，就是当手机横屏幕或者关掉浏览器的手机预览模式时，会出现错位的情况，尤其是文本元素的定位为百分比数值的时候，这样可以将文本元素的定位设置为px等绝对的单位，基本可以解决这样的问题。还有就是当着两个元素在同一父元素的情况下，可以设置父元素的padding，这样可以保证元素不会错位。

3、移动端布局中最好用的布局方式是display:flex；这样会大大提高布局速度，尤其是为父元素设置相关的参数。flex布局方法可以参考http://www.runoob.com/w3cnote/flex-grammar.html

4、文字布局方式，文字可能会出现超出一定范围显示省略号的情况，使用的方法如下

　　为父元素设置overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

5、当有元素需要固定定位，尤其是顶部或底部导航栏，需设置position:fixed；但是这样会出现一个问题，就是该元素已经不占据文档流了，会导致文档错位，这样可以用一个元素进行站位，或者设置上下margin

6、微商城开发需要注意的问题之一就是要隐藏页面滚动条，但是还需要保持页面的滚动效果，可以选择jquery插件（jquery.mCustomScrollbar.min），当然，该插件需配合jquery使用，具体操作可以百度查看

7、该商城涉及到轮播不需要太多的自定义，但是仍需要对所引用的插件进行一定的修改，本项目中采用的是swiper插件，对分页器的样式做了修改。修改分页器的样式百度了很多方法，均无效。也可能是自己没有找到，在思索后，直接在浏览器调试中找到分页器里面type对应的class，然后去swiper的css中进行修改。由于本项目只有该插件需要修改，所以未做深入研究，但是值得一提的是swiper插件确实是一款好用的轮播插件

8、该项目有很多的点击效果，可以用jquery实现

9、本项目最大的问题就是移动端页面究竟该如何开发布局，暂停...