365

来源：百度文库编辑：神马文学网时间：2024/05/02 04:57:14

无序列表UL在网页中除显示树状结构外，最常用的用途就是作为导航栏的菜单使用，而它的样式通过CSS来设定，这种把样式与数据分离的做法既能有丰富多彩的效果，又易于变换，值得好好研究一下。

无序列表的默认效果

无序列表的代码

菜单001

菜单002

菜单003

菜单004

菜单005

菜单006

菜单007

菜单008

竖向导航栏的实现效果

上边是竖向导航栏的效果，这在许多网站上很常见

取消无序列表的列表效果

如前页，如果不加设置，无序列表的li子项前会出现圆点效果，这对导航栏来说是需要取消的。
取消列表效果使用对ul进行列表样式设置就可以了，代码如下：
list-style-type:none;
无序列表菜单项的按钮效果实现

设置无序列表子项的背景，就能使无序列表子项出现方块效果。代码举例如下：
background:#efb57c;
使无序列表子项出现按钮的效果，对边框设置进行特殊设置即可，具体如下：
border:2px outset #efb57c;
无序列表菜单项的动态效果实现

实现动态效果，对ul中的链接状态进行设置即可，代码如右。

ul a:link{
background:#efb57c;
border:2px outset #efb57c;
}

ul a:visited{
background:#efb57c;
border:2px outset #efb57c;
}

ul a:focus{
background:#daa670;
border:2px outset #daa670;
color:black;
}

ul a:hover{
background:#daa670;
border:2px outset #daa670;
color:black;
}

ul a:active{
background:#bb8e60;
border:2px outset #bb8e60;
}
实现上述效果的全体代码
ul{
    margin:0;
    padding:0;
    list-style-type:none;
}

ul a{
    display:block;
    padding:2px;
    text-align:center;
    text-decoration:none;
    width:130px;
    margin:2px;
    color:#8d4f10;
}

ul a:link{
    background:#efb57c;
    border:2px outset #efb57c;
}

ul a:visited{
    background:#efb57c;
    border:2px outset #efb57c;
}

ul a:focus{
    background:#daa670;
    border:2px outset #daa670;
    color:black;
}

ul a:hover{
    background:#daa670;
    border:2px outset #daa670;
    color:black;
}

ul a:active{
    background:#bb8e60;
    border:2px outset #bb8e60;
}

li{
    padding-left:10px;
}
横向菜单的实现效果

使用无序列表制作横向菜单也很常见，例图如下：

将无序列表默认的纵向改为横向

无序列表子项默认是纵向的，需要将它改为横向，要实现这里只要让子项li浮动起来即可，如同设置一行内放置多个div一样。代码如下：
#menubar li{
     float:left;
}
其它颜色，背景设置等不再赘述。

横向菜单CSS设置代码

#menubar{
margin:0px;
width:100%;
text-align:right;
}

#menubar ul{
margin:0;
padding:0;
list-style-type:none;
}

#menubar li{
float:left;
}

#menubar li a{
    color:#000000;
    text-decoration:none;
    padding-top:4px;
    display:block;
    width:70px;
    height:22px;
    text-align:center;
    background-color:#eefaec;
    margin-left:2px;
}

#menubar li a:hover{
    color:#b9ecae;
}

365 365天，365句 365天，365句 365个健康365 大全365 365句 365天英语365 英语365 365天365句与您共勉 365天365句经典英文句子写在365kit边上 365Key新功能保健格言集锦365 李阳365句中日商桥365 英语口语365句 2007中国科技365 保健格言集锦365 保健格言集锦365 365句经典英语。。。。保健格言集锦365 365保健格言集锦