仿写天猫tmall首页

github地址

思路

1、划分每个版块，截取天猫首页到PS，拉取参考线（图片保存为jpg格式，才能保存参考线）。

针对每个版块，先写html，再写对应的css，重复往下写。

2、先写头部和尾部，再写中间的内容。

3、软件：PS、vscode

内容笔记

1、png等图片的切图流程：

通过矩形选框工具，选择指定的区域（alt 减少区域  shift 增加区域）

   ctrl + c : 复制图层

   ctrl + n : 新建图层

   ctrl + v : 粘贴图层

【文件】→【导出】→【快速导出为PNG】  

2、快捷导航栏—字体图标（https://blog.csdn.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、找整体的布局很重要，对于样式，尽量细化。

页面展示：