这是练习页面布局的时候做的模仿淘宝pc端做的的三个页面，虽然布局是前端开发中难度最低的部分，也就是前端攻城狮的必备技能，但是却很重要，就像是盖房子的地基，马虎不得，而pc端布局复杂度最高的也就是淘宝了，记得那时候做的呕心沥血的，也是没谁了~

淘宝PC端页面布局

1.淘宝pc首页 点击这里查看效果
2.搜索结果页 点击这里查看效果
3.宝贝详情页 点击这里查看效果

开发内容

淘宝PC端首页静态开发
淘宝PC端搜索结果页静态开发
淘宝PC端宝贝详情页静态开发

开发中遇到的问题及解决方案

问题一：首页“我常逛的”广告栏目标题和栏目内容根据位置划分在上下两个大模块中，从语义上分析，模块标题和模块内容是一体的，不应分开
解决方案：将“我常逛的”广告栏目标题和内容放在一个模块下，采用margin负值的方式让标题在上一个模块底端显示
问题二：部分div、ul及div、p标签包裹繁复问题，块级标签使用应当尽量简约，不应出现不必要包裹，浪费标签
解决方案：修改模块结构，利用语义化标签header、h2/h3/h4等标签使模块语义结构清晰
问题三：模块中很少使用html5语义化标签
解决方案：删除只包裹一个ul/p标签的多余div
问题四：a标签中包裹过多的标签
解决方案：解决方案：重新划分结构，将a标签中的内容根据语义、链接类别分别用a标签包裹
问题五：代码使用中文注释有兼容性问题
解决方案：尽量使用英文注释
问题六：搜索结果页鼠标悬停时图标出现的链接新地址小模块没有用单独的a标签包裹
解决方案：修改结构，分别用a标签包裹。在写结构之前做好分析，不同地址的链接不要写在同一标签下
-问题七：商品价格数字部分没有用单独标签包裹
解决方案：考虑到交互问题，为商品价格等动态变化的内容用span标签包裹

从项目中学到的经验和技巧

整个首页的大结构划分是没有问题的，但是模块上的划分应当注意从语义、结构两个方面去分析标签使用应当谨慎，精简。
注意使用html5语义化标签，提升可读性。
多用英文注释，中文注释可能会有兼容性问题。
通过淘宝PC端这三个页面的练习，我体会到在布局之前做好规划的重要性，毕竟这样复杂度较高的页面，修改起来难度很大，因此考虑清楚布局再去实现极为重要，用色块画个布局分割图或者书写伪代码都能很好的降低错误率。
记得第一次为自己做的静态网页添加js的时候，由于页面布局做的不好，遇到很多困难，因此在这次整站开发的时候尽量去考虑交互问题，比如为需要做动态改变的内容添加单独容器与静态内容分隔开，等等。

详细代码已经存在我的仓库中了，感兴趣可以看看~传送门