Fatal编程技术网
  • css/
  • css中的徽标重叠？

css中的徽标重叠？

css

css中的徽标重叠？,css,Css,为什么这里的徽标在底部有轻微重叠？CSS和HTML如下所示。我已经尝试覆盖logo元素各自的css属性。但它不起作用 HTML <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet.css" rel="stylesheet" type="text/css"

为什么这里的徽标在底部有轻微重叠？CSS和HTML如下所示。我已经尝试覆盖logo
    • 元素各自的css属性。但它不起作用

    HTML

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <ul id="nav">
            <li><a href="#">WORK</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
            <li class="logo">
                    <a href="#" style="padding:0;">
                        <img src="logo.png" />
                    </a>
            </li>
        </ul>
    </div>
</body>
</html>
    取决于你想要完成什么

    这使得你可以调整你的标志到任何你想要的。菜单项可能在div外部浮动。在这种情况下，您需要浮动父项、使用溢出隐藏父项或清除浮动

    重构
    我重构了一些东西，比如父对象上的阴影和背景色。这允许大多数效果依赖于父div，而不是单个项。不过我只是在这里假设。你有你想要的photoshop模型吗？让我们更好地了解CSS所需的内容。

    在此处演示：但在此处，徽标的
  • 元素减少。缺少徽标图像。我们如何发现徽标重叠？不仅仅是徽标。标志本身的li>a元素要么重叠，要么缩小。 
    body {
    margin: 0;
}

#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    #nav li {
        width: 20%;
        float: right;
        text-align: center;
    }

        #nav li a {
            display: block;
            padding: 0.5em 5px;
            text-decoration: none;
            font-weight: bold;
            color: #F2F2F2;
            -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
            box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
        }

    #nav a:link, #nav a:visited {
        background-color: #071726;
    }

    #nav a:hover, #nav a:active, #nav a:focus {
        background-color: #326773;
    }

    #nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
    box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
    background: #000;
    float: left;
    width: 100%;
}

#nav li {
    margin: 0;
    padding: 0;
    width: 19%;
    text-align: center;
    display: inline-block;
    float: right;
}

#nav li a {
    display: block;
    padding: 0.5em 5px;
    text-decoration: none;
    font-weight: bold;
    color: #F2F2F2;
}

#nav a:link, #nav a:visited {
}

#nav a:hover, #nav a:active, #nav a:focus {
    background-color: #326773;
}