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、找整体的布局很重要,对于样式,尽量细化。
页面展示: