美文网首页
html的总结

html的总结

作者: hahaha每天都要开心啊 | 来源:发表于2018-03-19 08:36 被阅读0次

最近在做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.

相关文章

  • H5标签回顾与整理(总结)

    HTML总结

  • html的总结

    最近在做html. 1导航固定: position:fixed (相当于当前窗口的定位) bottom:0px 2...

  • bootstrap导航条常用属性总结

    bootstrap导航条常用属性总结 @(5 - html)[html|总结] [toc] 导航条的可访问性 务必...

  • HTML基础

    html简介: HTML学习总结慕课网 一、html介绍 (一)html和Css的关系 HTML是网页内容的载体。...

  • HTML总结

    css字体样式 字体大小:font-size 网页默认大小为16px 正常网页支持大...

  • HTML总结

    一两个月的时间,转眼即逝,我的html阶段也走了这么长时间。 html见证我由学妹变成学姐,可怕! html相对于...

  • html总结

    html是什么:超文本标记语言 html的唯一作用就是:给指定的文本添加语义。 html的标准格式:

  • HTML总结

    HTML的基本结构 一些常用的标签及属性 文本内容 p标签表示段落: This is a paragragh h1...

  • HTML总结

    1.doctype的意义? 1)让浏览器以标准模式渲染;(css盒模型有标准和IE模式,造成不兼容)2)让浏览器知...

  • HTML总结

网友评论

      本文标题:html的总结

      本文链接:https://www.haomeiwen.com/subject/turuqftx.html