最近在做html.
1导航固定:
position:fixed (相当于当前窗口的定位)
bottom:0px
2.鼠标放在一级菜单上显示二级菜单:
#nav_ul>li>ul{ /*二级菜单隐藏*/
display: none;
}
#nav_ul>li:hover
ul{ /*当鼠标放在一级菜单上,显示二级菜单*/
display:block
}
3.二级菜单会被下方的内容盖住:
1、必须是同级；
2、二者分别设定了position:relative 或 absolute 或 fixed；
这时候通过设置z-index才有效
1.下方的内容设置成为z-index: -1;二级菜单就不会被盖住.
2.第二种情况（z-index无论设置多高都不起作用情况）：
这种情况发生的条件有三个：
(1)父标签 position属性为relative；
(2)问题标签无position属性（不包括static）；
(3)问题标签含有浮动(float)属性。
解决办法有三个（任一即可）：
(1)position:relative改为position:absolute；
(2)浮动元素添加position属性（如relative，absolute等）；
(3)去除浮动。
如下代码:
#haiyang_one_right{
z-index: -1;
position: relative;
float: right;
}
4.当a溢出:
标签内容过长时,并不会截取字,overflow:hidden; /*溢出隐藏*/
5.清除浮动:
父元素加上class属性clearfix,然后css中写如下内容:
.clearfix{
zoom: 1;
}
6.让div中的img垂直居中:
div{
display:inline-block;
margin:0 auto;
text-align:center;
}
img{
padding-top:30px;
}
7.标签变化,标题和图片都变化
//当鼠标经过a标签时,对应的标题变化,对应的图片img也改变.
$("#one_li a").hover(function(){
$(this).parents("#one_li").find(".show_title").text($(this).attr("value"));
vardata=$(this).attr("data_img");
$(this).parents("#one_li").find("img").attr("src",data);
})
find()可以寻找孙子,
