重生之我开始深度学习前端了第二天

导航部分：

1.一级导航：
透明度不一样看出他是分为一级导航和二级导航
一级导航:
一个大容器中分为三个区域来划分
logo区:一个容器中放入img标签
导航区:无序列表ul,li li中用p标签一个放中文一个放英文
登录区:分为左右两个部分 左边是一个图片,右边是两排文字用p标签。

样式部分:大容器给宽高,背景色,透明度  使用
background: rgba(0,0,0,0.8)  , 字体颜色
里面那层:  宽 高 距离顶部有一定的距离 弹性布局
logo区域: 距离左边有一定距离  距离顶部一定距离
导航区域: 宽850  文字居中,弹性布局 
li: list-style: none;    // 列表风格取消掉
宽80  文本居中 设置行高为13 
鼠标移入事件
background : linear-gradient(rgba(0,0,0,0.8),rgba(255,288,0,0.3),100%); // 转变透明色
底部的线 border-bottom 
鼠标移入变成手 cursor: pointer
里面的p标签 中文字体要大一点18英文10
登录区域: 宽170  距离右边120  
左: 宽高42  外面的圆圈 border-redius : 42
设置颜色 左浮动
右: 设置为块级元素 
对齐方式左对齐 text-align left 
下面的字体缩小

2.二级导航：
ul li 无序列表 再嵌套ulli
background rgba0000.8；
overflow：hidden；
display：none；

ul宽度与中间导航宽度一致
与左边的距离margin-left230px；
弹性布局

最里面的li设置行高line-height：27px；
clear：both；（清除浮动），

hot 和 new共同属性
垂直对齐vertical-align：middle；
display:inline-block;
margin-left:-5px;

hot的偏移；
background-position：-165px -65px；

new的偏移；
background-position：-140px -75px；

js部分
script src=“js/min。js”
script src=“index.js"
index。js
一级导航的送鼠标移入移出事件的jquery
$(function () {
    $("#first li").mouseenter(function () {
        $("#second").slideDown(1000);
    });
    $("#second").mouseleave(function () {
        $("#second").slideUp(1000);
    });
});
 

感谢大佬们的观看