5.7 王者荣耀官网页眉及导航栏

导航栏，分一级导航和二级导航，两个导航透明度不同

一级导航：

一级导航分三部分：logo区，导航区和登录区

首先一级导航整体：

id="first"，设置宽度100%，背景色rgba(0, 0, 0, .8)，字体颜色white

左边logo区：

logo盒子里面给img，设置宽度100px，距左边80px 距顶部25px

中间导航区：navigation

用ul li，七个li，两排字，p标签写class=big/small。

ul设置宽850px，文字居中，距左边60px，弹性布局，平均分配对齐

li 先去掉前面的点 list-style: none; ，设置宽80px，居中对齐，行高line-height: 13px;

li的文字：.big：字体大小18px，.small：字体大小10px

然后写一级导航移入事件li:hover ：

/* 线性渐变linear-gradient 给三个参数 */

改背景色 background: linear-gradient(rgba(255,208,0,0),rgba(255,208,0,.3),100%);

底部给条线border-bottom: 3px rgba(255,208,0) solid;

光标变成手指，字体颜色变成rgba(255,208,0)

右边登录区：

分两块,左边login图片，右边两排字 class="text/sub"

登录区整体设置宽170px，距右边120px

左边：宽高42，给个圆角边框 border-radius: 42px; border: rgba(255,208,0) solid; ，左浮动，距顶部30

右边：文字居左，距左边55

右边文字：.text：字体大小15，距顶部35

.sub：字体大小12，距顶部-10，颜色darkgray

二级导航

鼠标移入对应li显示，鼠标移出隐藏，slide up和slide down

二级导航就是ul li嵌套ul li，写多个就是第一个ul下面多个li，小图标是用span标签写class=hot/new

首先二级导航整体：

id="second"，设置宽100%，背景色rgba(0,0,0,0.8)，隐藏overflow: hidden;display: none;

second下面的ul：#second>ul

宽900px，距左边230px，弹性布局，平均分配对齐

下面的li：#second>ul>li

去掉前面的点，宽140px，居中对齐

然后再是下面嵌套的ulli：#second>ul>li>ul>li

去掉前面的点，字体颜色白色，字体大小12，行高27px，清除所有的浮动clear: both;

li里的小图标：#second .hot,#second .new

宽25高25，垂直对齐vertical-align: middle; ，background-image引入图标，转换块级元素display: inline-block; ，距左边-5px

第一个小图标：#second .hot

偏移background-position: -165px -65px;

第二个小图标：#second .new

偏移background-position: -140px -65px;

导入jquery库 ---> 新建index.js ---> 引入index.js

index.js里面实现 当鼠标移动进入到一级导航中，二级导航显示；当鼠标离开二级导航，二级导航隐藏 这个效果

mouseenter（鼠标移入），mouseleave（鼠标移出），slideDown（显示），slideUp（隐藏）

完整代码：

$(function(){

    $("#first li").mouseenter(function(){

        $("#second").stop().slideDown(1000);

    });

    $("#second").mouseleave(function(){

        $("#second").stop().slideUp(1000);

    });

})

或许可以加.stop()强行终止，就不会发生抖动

页眉完整代码：