为何纯css菜单不在顶部?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (56)

我无法使纯CSS样式工作,无法在我的网页左侧创建一个菜单。这是我打开文件时显示的。我在使用Flask以防万一。

我的网站就是这样的:

这是我用来创建这个文件的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> <!-- Check Compattibility with Pure CSS -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Check Compattibility with Pure CSS -->

        <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Check Compattibility with Pure CSS -->

        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  -->

        <title>Home</title>

    </head>
<style>
.custom-restricted-width {
    /* To limit the menu width to the content of the menu: */
    /* display: inline-block; */
    /* Or set the width explicitly: */
    width: 10em; 
}
</style>
<div class="pure-menu custom-restricted-width">
    <!-- <a href="#" class="pure-menu-link pure-menu-heading">Home</a> -->
    <span class="pure-menu-heading">My Site</span>

    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="newuser/register" class="pure-menu-link">Register</a></li>
    </ul>
</div>
<body bgcolor="black" text="white">
    <div class="container">
        <div class="pure-u-24-24">
            <img src="/static/images/Logo.png" class="pure-img" />
            <h1>Welcome Home</h1><br><br><br>
            <p>Please continue to check back for updates!</p><br><br>
            <p>More comming soon...</p>
        </div>
    </div>
</body>

</html>

我正在尝试创建一个位于页面的一侧的菜单,类似于在他们的网站上的菜单页面那样:https://purecss.io/menus/

提问于
用户回答回答于

首先,你的菜单需要在<body></body>标签:

<body bgcolor="black" text="white">
    <div class="pure-menu custom-restricted-width">
        <span class="pure-menu-heading">My Site</span>
        <ul class="pure-menu-list">
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">Home</a>
            </li>
            <li class="pure-menu-item">
                <a href="newuser/register" class="pure-menu- 
                    link">Register</a>
            </li>
        </ul>
    </div>
    <div class="container">
        <div class="pure-u-24-24">
            <img src="/static/images/Logo.png" class="pure-img" />
            <h1>Welcome Home</h1>
            <br>
            <br>
            <br>
            <p>Please continue to check back for updates!</p>
            <br>
            <br>
            <p>More comming soon...</p>
        </div>
    </div>
</body>

要用纯CSS创建在菜单一边类似的侧栏菜单,只需添加以下内容:

.custom-restricted-width {
    width: 10em;
    height: 100vh;
    position: fixed;
    z-index: 9;
    bottom: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

对于容器,你可以添加:

.container {
    padding-left: 15em;
 }

下面是完整的代码:

<head>
    <meta charset="utf-8">
    <!-- Check Compattibility with Pure CSS -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Check Compattibility with Pure CSS -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Check Compattibility with Pure CSS -->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  -->
    <title>Home</title>
    <style>
    body {
        background-color: black;
        color: white;
    }

    .pure-menu {
        width: 10em;
        height: 100vh;
        position: fixed;
        z-index: 9;
        bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        background: #191818;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container {
        padding-left: 15em;
    }
    </style>
</head>

<body>
    <div class="pure-menu custom-restricted-width">
        <!-- <a href="#" class="pure-menu-link pure-menu-heading">Home</a> -->
        <span class="pure-menu-heading">My Site</span>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="newuser/register" class="pure-menu-link">Register</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="pure-u-24-24">
            <img src="/static/images/Logo.png" class="pure-img" />
            <h1>Welcome Home</h1>
            <br>
            <br>
            <br>
            <p>Please continue to check back for updates!</p>
            <br>
            <br>
            <p>More comming soon...</p>
        </div>
    </div>
</body>

</html>

扫码关注云+社区

领取腾讯云代金券