日度归档:2020年6月2日

chrome浏览器中“查看源代码”和“检查”的区别


摘要:
下文讲述在chrome浏览网页时,右键“查看源代码”和“检查”的区别,如下所示:


右键“查看源代码”和“检查”的区别

“查看源代码”:
     为运行当前网页的html代码(服务器返回的html代码),
     不包括 js生成的html代码

检查:
    返回当前浏览器中显示内容的实际html代码信息,
   包括js生成的html,
   也包含js修改的css样式信息,都会体现在html代码上

如何实现一个纯css和html下拉菜单呢?


摘要:
下文讲述实现一个纯css的下拉菜单的方法分享,如下所示:

实现思路: 
    利用hover伪类实现对象可见,离开菜单区域则隐藏

例:

<meta charset='utf-8' />
<p>
 maomao365.com <br />
 使用html和css实现下拉菜单
</p>
<hr />

<div class="a">
  <a id="TakeAction">菜单</a>
  <ul id="b">
    <li>子菜单--1</li>
    <li>子菜单--2</li>
  </ul>
</div>

<style>
ul#b
{
    display:none;
}
.a:hover ul#b
{
    display: block;
}
</style>
css html实现下拉菜单

css html实现下拉菜单

CSS visibility 属性功能简介说明


摘要:
下文讲述“CSS visibility属性”的功能说明,如下所示:


“CSS visibility属性”的功能:

设置html元素是否可见
注意事项:
元素在浏览器上不可见,但是还会占据页面空间
CSS visibility属性值说明:

属性值

备注
visible

默认值,元素可见
hidden

元素不可见
collapse

当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”
inherit

从父元素继承 visibility 属性的值


“CSS visibility属性”的举例说明

<html>
<head>
<style>
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
</head>

<body>
<h1 class="visible">猫猫教程---内容可见</h1>
<h1 class="invisible">猫猫教程---内容不可见</h1>
</body>
</html>