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

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

知识点:

1.纵向列表
2.标签的默认样式
3.css派生选择器
4.css选择器的分组
5.纵向二级列表
6.相对定位和绝对定位
 
1)纵向列表
Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单
可以看出该列表四周都有很大的空隙,且每一行前面都有一个点,这是因为标签默认样式造成的,下面我们创建样式表时把列表的默认样式去掉。Web标准:四、纵向导航菜单及二级弹出菜单
 
 
Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单
list-style:none; 去掉id为main的div的列表样式。
 
下面丰富一下这个菜单,给菜单加上边框,给首页加上跳转,并且滑过时给个变色的样式。Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单
 
2)标签的默认样式
大多数标签都有默认样式,例如body默认外边距,h1-h6字体大小各不相同,em为斜体,strong为粗体。有时这些默认样式对我们没用,需要清除掉他们,建议用标签重定义方式。
Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四、纵向导航菜单及二级弹出菜单
首先看一下是未去除默认样式的
Web标准:四、纵向导航菜单及二级弹出菜单
然后显示一下按照上面方法去除了默认样式的
Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四、纵向导航菜单及二级弹出菜单Web标准:四、纵向导航菜单及二级弹出菜单
 
 
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)纵向二级列表Web标准:四、纵向导航菜单及二级弹出菜单
二级菜单即指当鼠标放到一级菜单上后,会弹出相应的二级菜单,移去鼠标后消失。
思路:可以给一级菜单加一个hover,滑过时二级菜单显示,鼠标移走后隐藏二级菜单。
Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四、纵向导航菜单及二级弹出菜单
 
上面的代码的意思是定义ID为menu的ul下的li,当鼠标滑过时ul的样式,这里设置为display:block;指的是鼠标滑过时显示这块内容。:hover属于伪类,但是IE6现在只支持a的伪类,不支持这个伪类,要是想在IE6下实现,需要借助JS,我们定义一个类.current,所以需要加上JS和样式#menu ul li.current ul{display:block;}。
Web标准:四、纵向导航菜单及二级弹出菜单 
 
或者直接通过js控制ul的style,去显示或隐藏
Web标准:四、纵向导航菜单及二级弹出菜单
Web标准:四、纵向导航菜单及二级弹出菜单
 
 
6)相对定位和绝对定位
定位标签:position
包含属性:relative(相对)、absolute(绝对)
 
Web标准:四、纵向导航菜单及二级弹出菜单
 Web标准:四、纵向导航菜单及二级弹出菜单
 
 
 
 
 
注:本章的代码

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

 
上一篇:Android权限申请


下一篇:【转载】CentOS 7部署ASP.NET Core应用程序