仿写天猫tmall首页

2024-05-14 09:11:39

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、找整体的布局很重要，对于样式，尽量细化。

页面展示：

仿写天猫tmall首页相关推荐

2022仿写b站首页
仿写b站首页 ```html <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
css+html5仿写淘宝首页
问题定义为了锻炼自己原生的能力,我决定仿写一下淘宝的首页.一下记录,仿写的全部步骤.按照软件工程的方法来实现.(ps,纯为学习,没有什么不良居心~~) 可行性研究技术采用原生js+html5+cs ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页中间部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页产品导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...
*{ margin:0; padding:0; } body{ font-family: "微软雅黑"; font-size:16px; } ul,ol,li{ list-styl ...
div+css+jquery仿写HTML京东首页的练习及一些关于oo css的总结
整个工程: https://download.csdn.net/download/weixin_43388844/10864383 前言前几天看b站上极客学院的web前端开发第二部分时了解到OO C ...
第一次仿写小米官方首页总结
自学前端有一个多月了,学完HTML+CSS基础部分也有一些时间了,于是就想着通过仿制网站来掌握和提高基础技能. 仿制页面是一种不错的学习方式,通过敲代码就能发现很多存在的问题,加以改进,并总结成自己的 ...
实现在不同宽度设备中等比缩放的网页效果(仿写哔站首页)
项目目录及文件: <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
仿写淘宝首页(静态)
历时半年整理出了十多万字的学习笔记,目前依旧在更新欢迎点赞和支持-

最新文章

热门文章