Web标准：四、纵向导航菜单及二级弹出菜单

知识点：

1.纵向列表
2.标签的默认样式
3.css派生选择器
4.css选择器的分组
5.纵向二级列表
6.相对定位和绝对定位
 
1）纵向列表
可以看出该列表四周都有很大的空隙，且每一行前面都有一个点，这是因为标签默认样式造成的，下面我们创建样式表时把列表的默认样式去掉。
 
 
list-style:none; 去掉id为main的div的列表样式。
 
下面丰富一下这个菜单，给菜单加上边框，给首页加上跳转，并且滑过时给个变色的样式。
 
2）标签的默认样式
大多数标签都有默认样式，例如body默认外边距，h1-h6字体大小各不相同，em为斜体，strong为粗体。有时这些默认样式对我们没用，需要清除掉他们，建议用标签重定义方式。
首先看一下是未去除默认样式的
然后显示一下按照上面方法去除了默认样式的
 
 
3）派生选择器
派生选择器可以帮助我们节约大量的class定义，大大提高效率。
比如上面用到的#menu ul和#menu ul li就是派生选择器。
如果直接对ul进行定义，就是对ul标签进行了重定义，重定义的属性将应用到全局。
而前面加上#menu，将是定义ID为menu元素内ul的样式，只对#menu下的ul生效。
 
4）css选择器的分组
对选择器进行分组，这样被分组的选择器就可以共享相同的声明，用逗号将需要分组的选择器分开。
例如：
h1,h2,h3,h4,h5,h6{
     color:green;
}
p,div,span{
     font-size:20px;
}
 
5）纵向二级列表
二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后消失。
思路：可以给一级菜单加一个hover，滑过时二级菜单显示，鼠标移走后隐藏二级菜单。
 
上面的代码的意思是定义ID为menu的ul下的li，当鼠标滑过时ul的样式，这里设置为display:block;指的是鼠标滑过时显示这块内容。：hover属于伪类，但是IE6现在只支持a的伪类，不支持这个伪类，要是想在IE6下实现，需要借助JS，我们定义一个类.current，所以需要加上JS和样式#menu ul li.current ul{display:block;}。
 
 
或者直接通过js控制ul的style，去显示或隐藏
 
 
6）相对定位和绝对定位
定位标签：position
包含属性：relative（相对）、absolute（绝对）
 
 
 
 
 
 
 
注：本章的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
#menu{
border:solid 1px #CCC;
width: 100px;
}
#menu ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li{
background-color: #eee;
height: 26px;
padding: 0px 8px;
line-height: 26px;
border-bottom: solid 1px #CCC;
position: relative;
}
#menu ul li ul{
display: none;
position: absolute;
left: 100px;
top: 0px;
width: 100px;
height: 26px;
background: #eee;
line-height: 26px;
border:1px solid #ccc;
}
/*下面的选择器的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block*/
#menu ul li:hover ul{
display: block;
}
#menu ul li.current ul{
display: block;
}
#menu a{
text-decoration: none; /*去掉a的样式，下划线*/
color: #000; /*a标签默认颜色是蓝色，给他一个黑色*/
}
#menu a:hover{
color: #F00;
}
body{
font-family: Verdana;
font-size: 12px;
line-height: 1.5; /*行高1.5倍*/
}
}
</style>

</head>
<body>
<div id="menu">
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="#">网页版本布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li>固定宽度</li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li>新手入门</li>
<li>视频教程</li>
<li>常见问题</li>
</ul>
</li>
<li>div+css实例</li>
<li>常用代码</li>
<li>站长杂谈</li>
<li>技术文档</li>
<li>资源下载</li>
<li>图片素材</li>
</ul>
</div>

<script type="text/javascript">
window.onload=function(){
//if (document.all&&document.getElementById) {
var lis=document.getElementById("menu").children[0].children;
for (i = 0; i < lis.length; i++) {
lis[i].onmouseover=function(){this.className="current"};
lis[i].onmouseout=function(){this.className=""}
};
//};
}

/*使用js去控制style的显示和隐藏
window.onload=function(){
if (document.all&&document.getElementById) {
var lis=document.getElementById("menu").children[0].children;
for (i = 0; i < lis.length; i++) {
lis[i].onmouseover=function(){
if(this.children[1]){
this.children[1].style.display='block';
}

};
lis[i].onmouseout=function(){
if(this.children[1]){
this.children[1].style.display='none';
}
}
};
}
*/

</script>

</body>

</html>

 

Web标准：四、纵向导航菜单及二级弹出菜单的更多相关文章

  1. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  2. 关于MFC主菜单和右键弹出菜单

    一.主菜单.弹出菜单和右键菜单的概念: 主菜单是窗口顶部的菜单,一个窗口或对话框只能有一个主菜单,但是主菜单可以被更改(SetMenu()更改): 创建方式:CMenu::CreateMenu(voi ...

  3. 【转】 教你如何创建类似QQ的android弹出菜单

    原文地址:http://www.apkbus.com/android-18034-1-1.html 大家可能看到android的自带的系统菜单比较难看,如图: 2011-12-4 23:13 上传 下 ...

  4. Android开发技巧——使用PopupWindow实现弹出菜单

    在本文当中,我将会与大家分享一个封装了PopupWindow实现弹出菜单的类,并说明它的实现与使用. 因对界面的需求,android原生的弹出菜单已不能满足我们的需求,自定义菜单成了我们的唯一选择,在 ...

  5. Mui --- 弹出菜单

    mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...

  6. 解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题

    前言 最近公司的项目转向使用Hbuilder开发移动端项目,其中想要通过在顶部标题栏加入弹出菜单的方式,来定位长列表的位置,如图所示. 问题 Mui的功能貌似还不是很完善,在使用这个弹出菜单的时候,发 ...

  7. Web标准：八、下拉及多级弹出菜单

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

  8. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  9. 移动端web禁止长按选择文字以及弹出菜单

    /*如果是禁用长按选择文字功能,用css*/ * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select: ...

随机推荐

  1. Qt 随机数

    相关函数    #include <QtGlobal> qsrand(unsigned seed); qrand(); 以上函数产生的随机数为伪随机数.之所以称为伪随机数,有以下两点原因: ...

  2. bzoj4385 Wilcze doły

    Description 给定一个长度为n的序列,你有一次机会选中一段连续的长度不超过d的区间,将里面所有数字全部修改为0.请找到最长的一段连续区间,使得该区间内所有数字之和不超过p. Input 第一 ...

  3. bzxoj1090 字符串折叠

    Description 折叠的定义如下: 1. 一个字符串可以看成它自身的折叠.记作S  S 2. X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S)  SSSS…S(X个S). ...

  4. pig概述

    pig概述pig是一个用于并行计算的高级数据流语言和执行框架:类sql.文件处理框架:有一套和sql类似的执行语句,处理的对象是HDFS上文件.Pig的数据处理语言是数据流方式的,一步一步的进行处理: ...

  5. 探究CSS中border-top属性的使用

    上一节我们介绍了CSS top属性的用法,那么这节关于CSS border-top属性用法学习起来就会轻松一些,border-top 简写属性把上边框的所有属性设置到一个声明中. 本文向大家描述一下C ...

  6. UVA699-落叶-二叉树

    1:用一根数轴,根结点是坐标index,左结点-1,右结点+1 还有一个0ms的不知道怎么过的 #include<stdio.h> #include<iostream> #in ...

  7. HTML5 Canvas ( 圆和切点曲线的绘制 ) arc, arcTo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. net 编译报错:编辑器或项目正在尝试签出在内存中修改的文件，这将导致保存该文件

    1,报错提示: 编辑器或项目正在尝试签出在内存中修改的文件,这将导致保存该文件. 在生成过程中保存文件是危险的,这可能会在将来导致不正确的生成输出. 是否仍然继续签出? 2,原因:licenses.l ...

  9. java ee7 配置文件

    java ee7 配置文件 1. 项目目录 # ee pom.xml      Maven构建文件 /src/main/java      Java源文件 /src/main/resource     ...

  10. VBA 公式中使用相对位置

    .Cells(3, 4).FormulaR1C1 = "=sum(r[-" & a & "]c[0]:r[-3]c[" & b & ...