新浪导航栏

最新推荐文章于 2022-12-29 19:28:52 发布

weixin_38602083

最新推荐文章于 2022-12-29 19:28:52 发布

阅读量522

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_38602083/article/details/103719728

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图：

要点思路：

1.5个a 标签转换为行内快模式

2.div盒子设置上边框为3px 下边框为1px

3.不给a设置宽只设置高，padding为padding：0 10px;

4.解决行内块之间的留白问题https://www.cnblogs.com/agansj/p/7192340.html

出现留白的原因是因为body里面a标签之间有换行或空白（不是br 或 ) 导致转化为行内快模式的时候出现留白，除了上述链接的解决办法外，还可以设置a的margin为负值；

可以试着像我上图这样，第一个a和第二个a 之间敲一个空格会出现下面效果

其实问题很好解决，要么a和a之间紧挨着，什么都没有；要么把a的父标签的 font-size设为0；（这是最常用的方法之一）；

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            font-size: 0px;





        }

        .nav a {

            display: inline-block;
            font-size: 14px;
            text-decoration: none;
            background-color: pink;
            color: #4c4c4c;
            padding: 0px 10px;
            height: 41px;
            line-height: 41px;






        }

        a:hover {
            background-color: #686161;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">微博</a>
    </div>
</body>

</html>

学习小总结，有引用原创链接，欢迎指正~