web前端入门到实战：来做一个简单的蔚来汽车官网首页

首先来看看蔚来官网长什么样子

不会做动图，所以具体效果可以去蔚来官网看

HTML

根据效果，我们来分析一下

页面加载进去后会有黑色的背景，然后慢慢地图片和文字动画加载出来说明背景图不是在父亲节点加背景图片，否则不会有黑色背景和图片的动画那么就需要一个单独的子盒子来做背景切换动画，中间居中的内容也需要盒子来包，可以得出的HTML结构是

.container>.items>.item>(.context>inner-box)+(.pic>img.bgp)

好了背景的盒子分析完了，再来观察一下内容
F12 发现
是一张logo，

，是一个p标签，这里可以观察到，p标签的长度和logo的长度一样大，如果用letter-spacing，把他撑开很明显不太理智，所以这里选择用text-align-last justify这个样式，那么就需要img和p标签都包在一个盒子里

，是两个a标签。都需要居中对其，而且两个a标签中间留有空白，可以考虑使用弹性布局，