首先是公共页面的学习，有页头、页脚和搜索框。
一、页头就是天猫网站的置顶导航栏：
看似简单，实际做起来也不容易。
写html还是比较简单的，撸起袖子就可以写完。可要想做到上图的样式就难了，难就难在CSS，有绝对定位、相对定位、浮动，背景颜色的选择，字体大小和颜色，这些我都是直接跟着站长的写。这里面用到了html5、jquery库、bootstrap框架、css。
写完纯html后，浏览器上的效果是这样的：
我自己尝试加上CSS后，效果是这样的：
（这个是看过站长的代码后，再自己写出来的，第一次自己写不出来(╥╯^╰╥)）
二、搜索栏
纯html写完后，是这样的：
开始用CSS布局和装饰，自己简单添加了一些CSS代码后，样子变得好看一些：
三、简单搜索栏
上面的搜索栏是首页用的，有一些界面搜索栏比较简单，因此有必要做一个简单搜索栏。和上面的搜索栏一样，左边的图片绝对定位，不同的是：搜索框这次右浮动，上面的搜索框是居中的。
四、页脚一
因为页脚内容多，所以分为两部分。
纯html时候的页面效果：
加上自己的CSS样式后的效果：
自己做的效果并不是很好，下面的购物指南没有居中。但是发现站长的也没有居中，后来自己加上一句text-align:center就可以居中了。
五、页脚2
自己编写的纯html页面：
自己尝试加上CSS后的页面效果：
这个页脚2很简单，自己做出来的效果也看得过去。
总结：
1.图中的两个图标是套用bootstrap框架的，进行class的套用
2.同样也是bootstrap，让div的class等于pull-left和pull-right就能实现左浮动和右浮动
3.天猫红：#C40000；字体颜色：#999；背景颜色：#f2f2f2；边框颜色：#e7e7e7
4.<input type="text" placeholder="扫地机器人 夏装" />中的placeholder很有意思