制作导航栏并用CSS美化

1. 纵向导航栏

  • 用到伪类来做鼠标悬停的变色，伪类的关键字是：开头。
  • 用到display:block;来块化超链接，不然超链接文本看起来就是简单的文字效果。
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <html>
        <head>
            <!--Ctrl+S保存后就可以刷新浏览器预览-->
            <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
            <title>纵向菜单</title>
            <style type="text/css">
                /*消除小黑点并设置列表样式*/
                ul li{
                    list-style: none; /*列表项无编号*/
                    width: 100px;/*列表宽度*/
                    height: 30px;/*列表高度*/
                    line-height: 30px;/*行高*/
                    margin-bottom: 1px;/*列表项之间的底部间距*/
                    text-align: center;/*文本居中*/
                }
                /*消除下划线，设置文字大小颜色*/
                ul li a{
                    display: block;/*超链接显示为块元素*/
                    text-decoration: none;/*超链接无下划线*/
                    font-size: 14px;/*文字尺寸*/
                    color: #FFCC00;/*颜色*/
                    background-color: #000066;/*背景色*/
                    border-left-width: 10px;/*超链接左边框宽度为10，预览黄色那个就是左边框*/
                    border-left-style: solid;/*左边框为实线*/
                    border-left-color: #FF9900;/*左边框颜色*/
                }
                /*鼠标移动使文字颜色变化并加粗*/
                ul li a:hover{/*hover伪类：开头用“：”作为关键字。它用于选择处于特定状态的元素，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护*/
                    color: #FFFFFF;
                    background-color: #000033;
                    border-left-width: 10px;
                    border-left-style: solid;
                    border-left-color: #d8d803;
                }   
            </style>
        </head>
        <body>
            <ul>
                <li><a href="#">首页</a></li>
            <li><a href="#">菜单1</a></li>
            <li><a href="#">菜单2</a></li>
            <li><a href="#">菜单3</a></li>
            <li><a href="#">菜单4</a></li>
            <li><a href="#">菜单5</a></li>
        </ul>
        </body>
    </html>

2. 横向导航栏

  • 用到float: left;来把列表横向。
  • 用到<div>及其id
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
    <head>
        <!--Ctrl+S保存后就可以刷新浏览器预览-->
        <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
        <title>横向菜单</title>
        <style type="text/css">
            /*设置div中的样式*/
            #topmenu{
                background: #515151;
                font-size: 14px;
                color:#ffffff;
                height: 27px;
            }
            /*列表标签样式*/
            #topmenu ul{
                list-style-type:none;/*去掉列表编号*/
            }
            /*列表项标签样式*/
            #topmenu li{
                float: left;/*横向*/
                text-align: center;
                line-height: 27px;
            }
            #topmenu li a{
                display: block;
                width: 100px;
                color: #fff;
                text-decoration: none;/*去掉超链接下划线*/
            }
            #topmenu li a:hover{
                background: #ff0;/*鼠标悬停变色*/
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="topmenu">
        <ul>
            <li><a href="#">首页</a></li>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
        <li><a href="#">菜单5</a></li>
    </ul>
</div>
    </body>
</html>

3. 下拉菜单设置

  • 用到通配符*
  • 用到类class
  • 用到嵌套做对特定标签下的子标签设置，语法规则是父标签 子标签 孙标签 曾孙标签 .. {}
  • 用到设置一级标签``和二级标签的方法，就是ul,li,ul,li嵌套使用
  • 用到显示二级标签方法，用display:block;做二级标签显示
  • 不管一级标签还是二级标签，都用伪类做鼠标悬停效果
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>

<head>
    <!--Ctrl+S保存后就可以刷新浏览器预览-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
    <title>下拉菜单</title>
    <style type="text/css">
        /*通配符*/
        *{
            margin: 0;/*页面标签外边距*/
            padding: 0;/*页面标签内边距*/
        }
        /*列表项样式*/
        li{
            list-style: none;
            text-align: center;/*居中，居网页的中*/
            line-height: 24px;
        }
        /*超链接效果*/
        a{
            text-decoration: none;
            color: #333333;
            font-size: 12px;
            line-height: 24px;
            display: block;
        }
        /*div容器内ul下的li元素调整,没打“，”不是集体声明*/
        .nav ul li{
            width: 120px;
            float: left;
            border: 1px #333 dashed;/*设置li边框粗细颜色线型*/
            background: #ffd2d2;
        }
        /*设置二级菜单隐藏*/
        .nav ul li ul{
            display: none;
        }
        /*设置显示被隐藏的二级菜单*/
        .nav ul li:hover ul,.nav ul li a:hover ul{
            display: block;/*设置为块即可显示*/
            width: 120px;
            height: 24px;
        }
        /*设置鼠标悬停效果*/
        .nav ul li a:hover{
            color: #fff;
            background-color: #BB0916;
        }
        /*设置二级菜单*/
        .nav ul li ul li{
            background-color: #FEE;
            width: 120px;
        }
        /*设置二级菜单悬停效果*/
        .nav ul ul li a:hover{
            background: #F7F7B9;
            color: #666666;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">菜单1</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li><a href="#">菜单2</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">菜单3</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li><a href="#">子菜单4</a></li>
                </ul>
            </li>
            <li><a href="#">菜单4</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
            <li><a href="#">菜单5</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li><a href="#">子菜单4</a></li>
                    <li><a href="#">子菜单5</a></li>
                    <li><a href="#">子菜单6</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>
Front-end application > basic notes
#html #css #js
制作导航栏并用CSS美化
http://example.com/2024/07/21/制作导航栏并用CSS美化/
作者
xiao cuncun
发布于
2024年7月21日
许可协议