Html-Css-06 导航栏

最新推荐文章于 2024-04-02 07:41:36 发布

Void_CM

最新推荐文章于 2024-04-02 07:41:36 发布

阅读量106

点赞数

分类专栏： Html+CSS+js 文章标签： html css

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113588314

版权

Html+CSS+js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

导航栏的实现方式

本例使用ul+li来实现导航栏

Html如下：

<body>
    <header>
   
        <nav>
            <ul>
                <li><a class="logo" href="#"></a>Logo</li>
                <li>Home</li>
                <li>Menu</li>
                <li>Address</li>
                <li>Contact</li>
                <li>Hello</li>
                <li>How</li>
                <li>Others</li>
            </ul>
        </nav>
        
    </header>

    <section>
        
    </section>

    <footer>I'm the footer</footer>
</body>

CSS如下

        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: Helvetica Neue, sans-serif;
            color: white;
            font-size: 24px;
        }
        header {
            width: 100%;
            height: 400px;
            background-color: black;
        }
        nav {
            width: 100%;
            height: 80px;
            background-color: brown;
        }
        section{
            text-align: center;
            line-height:200px ;
            width: 100%;
            height: 200px;
            background-color: cornflowerblue;
        }
        footer{
            text-align: center;
            width: 100%;
            height: 40px;
            background-color: black;
        }
        li{
            display: inline-block;
            width: 100px;
            height: 80px;
            line-height: 80px;    
            text-align: center;
            margin-right: 20px;        
            background-color: gray;
        }

        li:first-child{
            background-image: url(/images/1611902660.png);
            background-repeat: no-repeat;
            background-position: center;
            text-indent: -999999px;
            width: 200px;
            margin-right: 150px;
        }
        li:last-child{
            margin-right: 0;
            width: 200px;
            float: right;
        }

Tips

使用伪类指定特殊的li的位置和样式比如本例中的logo和others
可以使用text-intent，使文字缩进到看不见的地方（但仍旧存在，方便残障人士）
在li中使用图片需要大小适中，background-position:center,可显示图片中间内容
可以使用float:right使得元素靠右
text-aligh+line-height可使得文字居于正中央，注意，子容器的元素需要重新设置line-height,否则一律按父容器的line-height处理

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html-Css-06 导航栏

导航栏的实现方式本例使用ul+li来实现导航栏Html如下：<body> <header> <nav> <ul> <li><a class="logo" href="#"></a>Logo</li> <li>Home</li> &lt
复制链接

扫一扫

专栏目录