原 !神静态网页布局详解,html+css布局实战,附详细代码

代码整体效果展示

 1页面布局思路

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

第一层定位流:

素材:原 !神静态网页布局详解,html+css布局实战,附详细代码_第1张图片

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

第二层定位流:

素材:

原 !神静态网页布局详解,html+css布局实战,附详细代码_第2张图片

 原 !神静态网页布局详解,html+css布局实战,附详细代码_第3张图片

 第三层:

素材

注意: 

原 !神静态网页布局详解,html+css布局实战,附详细代码_第4张图片

 中间有一条竖线,是通过定义宽度为1px的容器

加上背景色制作而成。

第四层:

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

原 !神静态网页布局详解,html+css布局实战,附详细代码_第5张图片原 !神静态网页布局详解,html+css布局实战,附详细代码_第6张图片

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

左边部分代码块

​
​
 
  • 蒙德城
     蒙德城
  • 璃月城
     璃月城
  • 稻妻城
     稻妻城
  • 须弥城
     须弥城
  •  敬请期待
​ ​

中间部分代码段

 
CV: 林溯
 

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

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

底部部分代码块 

  
安珀
丽莎
凯亚
芭芭拉
迪卢克

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

最后附上原神cos区静态页面展示

原 !神静态网页布局详解,html+css布局实战,附详细代码_第7张图片

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

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

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

你可能感兴趣的:(html,css,前端)