今天折腾了一天，总算是把那个“口袋购物”的首页给大概弄出来了。一开始真有点没头绪，但做着做着也就那么回事儿了。
先琢磨了下这首页上都该有啥
我寻思着，一个购物首页，打开来总得有几个固定的东西：
- 最顶上，肯定得有个搜索框，不然人家想买啥都找不到，那还搞个
- 然后，得有几张能晃来晃去的大图，就是那种广告位，放点促销活动啥的，吸引眼球嘛
- 再往下，应该就是各种商品分类了，比如女装、男装、家电、零食啥的，点一下就能进去看。
- 肯定是一堆推荐商品，乱七八糟啥都有，让你看着看着就想买。
差不多就这些主要模块，先把架子搭起来再说。
动手开干，先搭骨架
我先弄了个空白的页面，然后就开始一块一块地往上堆东西。最上面，放了个输入框和一个按钮，搜索栏有了。一开始巨丑，光秃秃的，先不管它，占个位置。
接着是广告图，我随便找了几张图片先塞进去，想着以后再让它们动起来。现在就是几张图并排在那儿，也挺傻的。
商品分类那块，我就想着用一堆小方块，每个方块里放个图标再加点文字。捣鼓了一阵子，用最笨的办法，一个一个排列一开始对不齐，歪歪扭扭的，调了好半天。
最麻烦的就是下面的商品列表了。一个商品一个小卡片，里面要有图，要有商品名，还要有价格。我先做了一个卡片的样式，然后复制粘贴了好几个，用假数据和假图片填上，看看效果。
给骨架穿上“衣服”
光有架子不行，太难看了。然后就开始调样式，也就是让它好看点。这部分最花时间，也最烦人。
先是那个搜索框，我给它加了个边框，调了调颜色，让它看着稍微顺眼一点。按钮也得跟着改，不能太突兀。
然后是整体的颜色搭配。口袋购物嘛我想着用点暖色调，让人有购物的欲望，但又不能太刺眼。试了好几种颜色，选了个自己瞅着还行的。
字体也稍微调整了一下，选了个比较常见的，至少保证能看清楚字。
那些商品卡片，得让它们排列整齐。我费了老大劲，才让它们一行一行地对齐，间距也差不多。有时候这边调好了，那边又乱了，真是头大。尤其是图片大小不一样的时候，整个布局就容易乱套，我干脆把图片都规定成差不多大小了。
遇到的一些小麻烦
中间还遇到个事儿，就是底部的导航栏，有时候内容少了，它就飘到中间去了，巨难看。后来查了半天，才知道怎么让它老老实实待在最底下，不管内容多少。
还有就是，一开始没考虑到手机上看会是啥样。在电脑上看着还行，一到小屏幕上，全挤到一块儿去了。没办法，又得返工，调整了好一阵子，让它在小屏幕上也能看得过去。这个真是每次都头疼。
有时候为了让一个东西挪过去一点点，或者居中显示，真是能把人气死。明明觉得应该这样，但它就是不听话，得各种尝试。
总算有了个样子
来来回回折腾了大半天，各种调整、修改，总算是让这个首页看起来有模有样了。虽然还有很多细节不完美，比如那些广告图还不会自己动，商品也都是假的，但至少一眼看过去，知道这是个购物首页了。
累是真累，不过看到出来的效果，心里也还算踏实。今天就先到这，剩下的功能，比如点进去真的能买东西啥的，那又是后面的事儿了。先让我歇会儿。
