html+css复刻NIKE官网静态页面(一)

nike的官网比较简洁,是我喜欢的风格,那么,复刻nike官网要怎么入手呢?

html部分

对一个网页进行复刻,我们应该先从结构下手。
在这里插入图片描述
这是初步的结构的分析,在html中我们可以用div或者section定义这些模块。
然后我们在对每一个模块再进行细分。比如最顶上的模块:
在这里插入图片描述
这一个模块又由这些小模块嵌套构成。
对每个模块做好分析规划,给每一个模块取好类名。
这样就形成了我们的html结构,css可以用选择器对html的模块进行样式的调整。

css部分

把页面的结构分析好以后就可以给每个模块定义布局和样式啦。
在官网页面可以右键点击页面选择检查,查看页面的结构,各模块的大小样式等等。
我们可以以此作为参考。但不要过于依赖页面给我们的数据,照搬代码达不到我们学习的作用。
在这里插入图片描述
在这里插入图片描述
重点来了
css的关键点在于布局
“如何用好浮动,如何处理好样式”
这里其实也关系到html,在html中尽可能的划分清楚模块,可以使得css布局的时候更加简单一些。
如果很多元素堆积到一个模块中,布局起来容易出现问题。
所以尽量给元素们划分好结构关系,让他们在布局中不会彼此干扰。

小技巧

  • vscode分屏
    在css编码的部分我常常需要参照html的结构来进行样式的编辑,那么我会给vscode进行分屏,一边是html文件,一边是css文件,这样就可以参照着html文件编辑css文件啦。结构非常清晰,比较方便,不容易出错。
    在这里插入图片描述

  • 在给模块布局时,给模块定义border
    即使有些模块没有border,但在设计布局的时候我会给他定义一个边框,什么颜色的都好,只时为了让它给我们在页面中有个参考,方面我们进行布局,在布局好样式以后我们再把边框注释或者删掉。
    在这里插入图片描述

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值