HTML学习（仿做LOL官网头部导航）

效果网站： 点击我跳转.

position中的值

值	描述
absolute（绝对定位）	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed（固定定位）	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative（相对定位）	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

采用position定位之后必须采用偏移属性定义偏移量，也就是相对包含块的偏移。注意应用于position值不是static的元素。
　　有时也需要定义width和heigth，但是可能会和偏移属性的定义冲突，因为四个偏移属性实际上已经定义了元素的大小。此时，根据width和left属性定义左右，根据top和height属性定义上下。
　　内容溢出overflow: visible/ hidden/ scroll /auto/ inherit，初始值是visible。
　　一个元素的大小固定，但是其内容放不下，就会导致溢出。overflow控制溢出部分的可见(visible)、不可见(hidden)、滚动可见(scroll)。
　　元素可见性visibility: visible/ hidden/ collapse/ inherit，初始值是visible。
　　visibility:hidden和display:none的区别：visibility:hidden设置元素不可见，但是元素依旧会影响布局，只是元素部分呈现为空白;display:none元素不显示并且从文档流中删除，对文档布局没有任何影响。

在做菜单鼠标浮动上去 会展示更多效果的时候 可以使用jquery来实现

// 鼠标移入id=menu_li_two的节点时,执行function中的代码功能
$("#menu_li_two").mouseover(function(){
// 滑出窗帘
$("#header_sunblind").slideDown(200);
});
// 鼠标移出id=header_sunblind的节点时,执行function中的代码功能
$("#header_sunblind").mouseleave(function(){
$("#header_sunblind").hide(); // 隐藏窗帘
});

效果像这样

但是这样写会有逻辑错误

我们是设置的是 鼠标移入id=menu_li_two的节点时,执行function中的代码功能 然后显示隐藏的菜单

但是我们隐藏却是鼠标移出菜单 在期间 我们的鼠标没有 放到菜单的话 就获取不到菜单 导致没有办法隐藏

所以我觉得应该写一个定时器 或者其他办法判断一下

然后再做这个的时候

我觉得简单的html5虽然可以实现 但是如果页面大小发生改变 这个展示就会错位
所以我用了js来实现

//获取元素相对与浏览器窗口的X位置
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
 return offset;
 }
//获取元素相对与浏览器窗口的Y位置
function getTop(e){
   var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
 return offset;
 }

有了这俩个函数就能简单的获取元素的位置
然后只需要将二维码的位置和这个元素的位置绑定就行了

setInterval(function(){
if (parseInt(head_phone_hover.style.left) !=(getLeft(menu_phone_btn) - 95)) {
	head_phone_hover.style.left = (getLeft(menu_phone_btn) - 95) + "px";
}

if (parseInt(head_user_hover.style.left) !=(getLeft(user_info) - 20)) {
	head_user_hover.style.left = (getLeft(user_info)-20) + "px";
}
},10);

我用了定时器来检查这个的位置是否发生改变 改变了就一起移动

可以看到即使我缩放了他还是再图标下面