当前位置: 首页 > CSS+DIV > 正文

用CSS+DIV制作纵向和横向菜单、Tab菜单

纵向菜单效果如下:

横向菜单效果如下:

1、纵向菜单CSS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
<!--
body{
    background-color:#ffdee0;
}
#navigation {
    width:200px;
    font-family:Arial;
}
#navigation ul {
    list-style-type:none;               /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    border-bottom:1px solid #ED9F9F;    /* 添加下划线 */
}
#navigation li a{
    display:block;                      /* 区块显示 */
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
    border-left:12px solid #711515;     /* 左边的粗红边 */
    border-right:1px solid #711515;     /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
    background-color:#c11136;
    color:#FFFFFF;
}
#navigation li a:hover{                 /* 鼠标经过时 */
    background-color:#990020;           /* 改变背景色 */
    color:#ffff00;                      /* 改变文字颜色 */
}
-->
</style>

2、纵向菜单body部分:

1
2
3
4
5
6
7
8
9
<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">My Blog</a></li>
        <li><a href="#">Friends</a></li>
        <li><a href="#">Next Station</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</div>

保持完全相同的HTML项目列表结构,即body部分不变,将纵向菜单转换为横向菜单,CSS部分改为如下:

1、横向菜单CSS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#navigation {
    font-family:Arial;
}
#navigation ul {
    list-style-type:none;               /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    float:left;                         /* 水平显示各个项目 */
}
#navigation li a{
    display:block;                      /* 区块显示 */
    padding:3px 6px 3px 6px;
    text-decoration:none;
    border:1px solid #711515;
    margin:2px;
}
#navigation li a:link, #navigation li a:visited{
    background-color:#c11136;
    color:#FFFFFF;
}
#navigation li a:hover{                 /* 鼠标经过时 */
    background-color:#990020;           /* 改变背景色 */
    color:#ffff00;                      /* 改变文字颜色 */
}

知识点:

通过设置<Li>的浮动属性float后,项目按水平方向排列到了一起。

本文固定链接: https://www.ouchaoman.com/2013/12/07/create-menu-with-css/ | 欧阳博客

该日志由 欧阳 于2013年12月07日发表在 CSS+DIV 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 用CSS+DIV制作纵向和横向菜单、Tab菜单 | 欧阳博客

用CSS+DIV制作纵向和横向菜单、Tab菜单:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter