本次界面的布局主要采用定位流的方式来进行布局。因为界面具有很多透视效果，以及背景图片的重叠。接下来我将详细讲解布局

 此图片作为总体背景应该放在第一层，因为其他的元素都应该在其上面，否则背景图会覆盖其他元素。

 中间有一条竖线，是通过定义宽度为1px的容器加上背景色制作而成。

到了这一步基本上大功告成了，剩下的就是html页面的常规布局。

 分别可以分为左边部分，中间部分，底部部分。

身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁.虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。

当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。

 上面的静态网页加入了部分动态效果，可以让自己的网页显得更厉害。

国庆七天，悄悄练一手，回到学校耍耍酷，或者在女朋友面前露两手。让对象不仅爱原神，更爱你！

同时附上详细代码以及图片素材：

详细代码https://download.csdn.net/download/qq_60614034/86732367?spm=1001.2014.3001.5501