html的总结

最近在做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()可以寻找孙子,

8.word文档里边有视图,视图那里有文档结构图,方便看word.