超链接导航栏案例

Posted 2020-11-08 askzyl

tags:

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

设置一个基本网页的导航栏就是可以在居中显示并且是浏览的时候可以变颜色的

技术分享图片

就是这种样式的

<body>
<div class="nav">
    <ul>
        <li>
            <a href="">百度搜索</a>
        </li>
        <li>
            <a href="">知识问答</a>
        </li>
        <li><a href="">网站导航</a></li>
        <li>
            <a href="">网站导航</a>
        </li>
        <li>
            <a href="">网站导航</a>
        </li>
        <li>
            <a href="">网站导航</a>
        </li>
    </ul>

</div>
</body>

写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面

首先我们要做导航栏，并排显示元素，第一想浮动，想到使用浮动之后，一定记得清除浮动元素。

css代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;  /*去除li前的黑点*/
        }
        .nav{
            width:1000px;
            overflow: hidden;/*清空浮动*/
            margin:100px auto;/*居中*/
            background-color: gray;
            border-radius:5px;  /*圆角*/

        }
        .nav ul li{
            float:left;
            width:160px;
            height:40px;
            line-height:40px;
            text-align: center; /*字体居中*/
        }
        .nav ul li a{
            display:block; /*转化为块标签*/
            width:160px;
            height:40px;
            color:white;
            font-size: 20px;
            text-decoration: none;
            font-family: "宋体";
        }
        /*设置经过时的a的颜色字体*/
        .nav ul li a:hover{
            background-color:yellow;
            font-size:22px;
        }
    </style>
</head>

以上是关于超链接导航栏案例的主要内容，如果未能解决你的问题，请参考以下文章

带有 url 更新和超链接支持的 Flutter web 底部导航栏

超简单，几行代码搞定Android底部导航栏

CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

使用底部导航栏防止片段刷新

单击超链接后更改屏幕位置[重复]

删除在状态栏中显示超链接的超链接/鼠标悬停按钮