导航栏竖线 -利用background[display:block应用]

最新推荐文章于 2023-04-23 21:53:50 发布

blink555

最新推荐文章于 2023-04-23 21:53:50 发布

阅读量351

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_44325613/article/details/115534351

版权

前端基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现效果
在这里插入图片描述

思路：
其中导航栏的竖线不是用边框实现的，因为这个竖线属于渐变，所以可以利用背景颜色，

首先确定好顶部的跨度 hegiht:50px,确定安全区，保证导航栏内容在安全区中。
logo左浮动，ul不要设置宽度，右浮动(此时ul的宽度为内容撑开)
li也不要设置宽度，每个li需要左浮动排列
li中的a设置设display:block，然后行高为top导航栏高度，用line-height撑开a的高度，line-height:50px;宽度使用padding撑开（如果不设置display:block，因为是内联元素，line-height不起作用，不能撑开高度）【这里的a也可以不用display:block;使用浮动float是同样的效果】
给每个a设置背景图片，背景图片为截图的2px的竖线，背景图片的位置为靠右，居中。
最后一个li的a不要竖线，即不要背景图片
给每个li的a设置hover效果，hover时，除了背景颜色变为橙色外，记得背景图片也要使用(否则hover时，竖线不显示)

竖线的图片：
在这里插入图片描述
工商银行首页，导航竖线同样使用背景颜色，只不过单独添加了span

具体代码

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 安全区 */
        .safe {
            width: 975px;
            margin: 0 auto;
            height: 300px;
            /* background-color: teal; */
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .top {
            height: 50px;
            background-color: #232323;
        }


        /* logo 左浮动 */
        .top .logo {
            width: 157px;
            height: 50px;
            float: left;
            background-color: tomato;
        }


        /* 导航右浮动 */
        .top ul {
            float: right;
        }

        .top ul li {
            float: left;
        }

        .top ul li a {
            /* 只有block，line-height才起作用 ，高度才能撑开*/
            display: block;
            padding: 0 15px;
            /* 撑开的高度和导航栏高度一致 */
            line-height: 50px;
            /* 背景图片 竖线位于 right center */
            background: url(img/p1.png) no-repeat right;

            font-size: 14px;
            color: #fff;
        }

        /* 最后一个li的a 不要背景图片(数显) */
        .top ul .last a {
            background: none;
        }

        .top li a:hover {
            background: #f15a23 url(img/p1.png) no-repeat right;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="safe">
            <p class="logo">logo</p>
            <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>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li class="last"><a href="#">首页</a></li>
            </ul>
        </div>
    </div>
</body>

实现效果
在这里插入图片描述

总结

display:block；改变元素的类型，给a设置，使a变为块元素，可line-height撑开高度了
竖线使用背景图制作

blink555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航栏竖线 -利用background[display:block应用]

实现效果思路：其中导航栏的竖线不是用边框实现的，因为这个竖线属于渐变，所以可以利用背景颜色，首先确定好顶部的跨度 hegiht:50px,确定安全区，保证导航栏内容在安全区中。logo左浮动，ul不要设置宽度，右浮动(此时ul的宽度为内容撑开)li也不要设置宽度，每个li需要左浮动排列li中的a设置设display:block，然后行高为top导航栏高度，用line-height撑开a的高度，line-height:50px;宽度使用padding撑开（如果不设置display:bloc.
复制链接

扫一扫

专栏目录