主页 / 问题 / 979557
Accepted
return
Asked:2020-05-09 15:10:43 +0000 UTC2020-05-09 15:10:43 +0000 UTC

导航：元素未显示之前

  • 772

问题

这是html代码：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" />
    <link href="~/styles/style.css" rel="stylesheet" />
</head>
<body>
    <nav class="menu">
        <ul>
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
        </ul>
    </nav>
</body>
</html>

这是css文件中的代码~/styles/style.css：

@import url('https://fonts.googleapis.com/css?family=Roboto|Suez+One');

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', serif;
    background: #fff;
    color: #000;
    outline: none;
    border: none;
}

body {
    width: 100%;
    height: 100%;
}

nav.menu {
    width: 500px;
    margin: 0 auto;
}

nav.menu:before {
    content: "";
    display: block;
    height: 50px;
    width: 100%;
    background: #0d0d0d;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

nav.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 50px;
}

nav.menu ul li {
    float: left;
}

nav.menu ul li a {
    color: #f2f2f2;
    display: block;
    height: 50px;
    padding: 0 30px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 50px;
    transition: 0.5s;
}

nav.menu ul li a:hover {
    background: #909;
}

如果有人不理解这些文件中的水平菜单代码。我在网站cssdeck/labs（http://cssdeck.com/labs）上对其进行了测试，那里一切正常，但在浏览器中却无法正常显示：没有黑条。如果z-index设置为0及以上，则不会显示任何文本。

如何解决？

html

1 个回答

  1. Best Answer

    background: #fff;从转移*到body 

    @import url('https://fonts.googleapis.com/css?family=Roboto|Suez+One');
* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', serif;
    color: #000;
    outline: none;
    border: none;
}

body {
    width: 100%;
    height: 100%;
    background: #fff;
}

nav.menu {
    width: 500px;
    margin: 0 auto;
}

nav.menu:before {
    content: "";
    display: block;
    height: 50px;
    width: 100%;
    background: #0d0d0d;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

nav.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 50px;
}

nav.menu ul li {
    float: left;
}

nav.menu ul li a {
    color: #f2f2f2;
    display: block;
    height: 50px;
    padding: 0 30px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 50px;
    transition: 0.5s;
}

nav.menu ul li a:hover {
    background: #909;
}
    <!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" />
    <link href="~/styles/style.css" rel="stylesheet" />
</head>
<body>
    <nav class="menu">
        <ul>
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
        </ul>
    </nav>
</body>
</html>

    • 1

相关问题