HTML 渐变导航栏-百越白狼社区-弘客联盟新手区-弘客联盟

HTML 渐变导航栏

现如今我们都会搭建一个属于自己的网站(个人博客…)

具体要怎么搭建一个个人网站呢?

我在这里简单给大家介绍:导航栏

导航栏是指位于页面顶部或侧边区域的,在页眉横幅图片上边或者下边的一排水平导航栏按钮

他起着链接站点或软件内各个页面的作用。

有人想问怎么做?

小编已经给大家写好放在下面啦!

HTML代码(内包含css)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>渐变导航栏</title>
        <style>
            /* 初始化样式 */
            *{
                margin: 0;
                padding: 0;
                /* 去掉没必要的样式 */
                list-style: none;
                text-decoration: none;
            }
            .nav{
                height: 60px;
                /* 渐变导航栏(不喜欢这个渐变,自行修改) */
                background: linear-gradient(rgb(2, 155, 132),rgb(0, 254, 207));
            }
            .navlist li{
                /* 左浮动;让文本变成横排 */
                float: left;
                height: 60px;
                width: 100px;
                /* 让文本水平垂直居中 */
                line-height: 60px;
                text-align: center;
            }
            .navlist a{
                /* 超链改颜色 */
                color: black;
                /* 把超链接变成块 */
                display: block;
            }
            .navlist{
                /* 列表宽800,居中 */
                width: 800px;
                margin: auto;
            }
            .navlist a:hover{
                /* 鼠标悬停颜色变化 */
                background: rgb(2, 180, 109);
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <!--列表-->
            <ul class="navlist">
                <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>
</html>

效果图

d2b5ca33bd192536

  • 以上就是小编带来关于导航栏的全部内容,有什么不对的地方或者需要改进的地方,可以在下方评论区留下您的建议,谢谢。
请登录后发表评论

    没有回复内容