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

2021-07-27 01:49:28

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（绝对）

注：本章的代码

</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>

/*使用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标准：四、纵向导航菜单及二级弹出菜单

相关文章