导航栏制作

Posted 竹石君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航栏制作相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>导航栏</title>
    <style>
    .nav{
        text-align: center;
        }
        .nav a{
        width: 120px;
        height: 50px;
        display: inline-block;
        background-image: url(images/bg1.png);
        text-align: center;
        color: #fff;
        line-height: 50px;
        text-decoration: none;

    }

    .nav a:hover{
        background-image: url(images/bg2.png);
    }    

    </style>
</head>
<body>
     <div class="nav">
         <a href="#">网站导航</a>
         <a href="#">网站导航</a>
         <a href="#">网站导航</a>
         <a href="#">网站导航</a>
         <a href="#">网站导航</a>
         <a href="#">网站导航</a>

     </div>



</body>
</html>

实现效果如下:

注意点:

1.background image :url(),相对路径,文件夹名称最好用英文。

2.选择器的使用;

3.文本居中对齐,text-align

4.行内元素 display:inline-block

 

 

以上是关于导航栏制作的主要内容,如果未能解决你的问题,请参考以下文章

通过底部导航栏更改片段时恢复片段状态

如何在主片段中单击按钮时打开导航抽屉?

在底部导航栏中保存片段状态

带有片段和底部导航栏的 Android FloatingActionButton

底部导航片段应用程序不断崩溃

底部应用栏在使用片段导航时向上/向下滑动(导航架构组件)