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，但在设计布局的时候我会给他定义一个边框，什么颜色的都好，只时为了让它给我们在页面中有个参考，方面我们进行布局，在布局好样式以后我们再把边框注释或者删掉。