仿写天猫tmall首页
思路
1、划分每个版块，截取天猫首页到PS，拉取参考线（图片保存为jpg格式，才能保存参考线）。
针对每个版块，先写html，再写对应的css，重复往下写。
2、先写头部和尾部，再写中间的内容。
3、软件：PS、vscode
内容笔记
1、png等图片的切图流程：
通过矩形选框工具，选择指定的区域（alt 减少区域 shift 增加区域）
ctrl + c : 复制图层
ctrl + n : 新建图层
ctrl + v : 粘贴图层
【文件】→【导出】→【快速导出为PNG】
2、快捷导航栏—字体图标（https://blog.****.net/qq_42458302/article/details/105494638）
3、区分padding、margin
看是针对哪个对象：
box1与box2的间距
对于box1，应设置margin-top:10px;
对于box2，应设置padding-top:10px;
4、兼容问题（主要是ie下）
ie不兼容webp格式的图片 → webp转jpg
ie下图片不显示 →在画图下另存一次即可
注意点
1、先写html，然后写css，对于html和css不是很熟悉的，建议写之前查询对应标签的含义与用法。
2、尝试自己写，写不出来再看视频。
3、找整体的布局很重要，对于样式，尽量细化。
页面展示：