zjy3173925204的博客

原创 可视化背景图

原创 项目实战(王者荣耀官网)侧方悬浮部分

将悬浮区利用固定定位将其固定到浏览器右侧,将悬浮区分成两个部分:上面的妲己图片部分和下面的列表部分(ul,li),其他的部分利用相对定位进行移动,对于图片的选取也利用了偏移的属性,下面的列表用hover实现鼠标移入移出替换里面图片的效果。

原创 项目实战(王者荣耀官网)核心区域部分

然后各个标题对应其内容其中overflow: hidden;表示文本溢出的部分写为...,white-space:nowrap;核心区域的轮播、公告、下载游戏等功能。然后，通过观察轮播区域，发现它是一个无序列表，可以分为图片区域和标题区域。在图片区域，存放的是对应的照片，标题区域存放的是对应的标题。最后使用SuperSlide插件,bd来控制图片,hd控制标签最后实现滚动的效果。最后根据标题切换对应内容的原理和banner的原理一样。分为三个板块轮播图,公告,游戏下载。分为标题和内容两个部分。

原创 项目实战(王者荣耀官网)导航部分

将二级导航隐藏 overflow:hidden,display:none。background: rgba(0,0,0,0.8) , 字体颜色。// 列表风格取消掉。左: 宽高42 外面的圆圈 border-redius : 42。图片做偏移 h: -165 -65 N: -140 -75。logo区域: 距离左边有一定距离 距离顶部一定距离。

原创 项目实战(王者荣耀官网)页眉部分

先是给了页眉部分整体一个弹性布局让他横向排列和一个justify-content: space-between让两部分向两边分开;左边是两个图片给了左浮动和文本居中的样式,右边是两个文本同理给了右浮动和右外边距还有行高的样式控制他们的位置。核心区分为三部分,banner图,新闻咨询区,按键区。其中还有多盒子分别跳转到不同的页面,并给了一个移入变色的样式。分为一级导航和二级导航,用ul和li组成,会给他一个移入下滑移出上滑的样式。为了留出页眉的位置先让body整体向下移动,然后给背景图片一个不重复的样式。