Question

我无法使我的Pure 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>

我是Pure CSS的新手，我正在尝试创建一个优雅的菜单，该菜单位于页面的侧面，类似于您在其网站上的菜单页面上找到的菜单：https://purecss.io/menus/

Answer 1

首先，您的菜单必须位于<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Fallout Meeples</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">  <script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script> <script src="public/application.js" type="text/javascript" charset="utf-8" defer></script> </head> <body> <main id="apoc" class="game-area"> <section class="player-start-area border yellow"> <h2>Player One</h2> <section id="playerOne-dice"> <div class="dice"> <img class="die-start-icon dice-size" src="./assets/img/perspective-dice-six-faces-random.svg">  </div> </section> </section> <section class="player-start-area border blue"> <h2>Player Two</h2> <section id="playerTwo-dice"> <div class="dice"></div> </section> </section> <div class="dice"></div> </main>  </body> </html>标记内。在这里查看：

Private Sub Command6_Click()
     On Error GoTo Err_cmdDuplicate_Click
     DoCmd.RunCommand acCmdSelectRecord
     DoCmd.RunCommand acCmdCopy

     Exit_cmdDuplicate_Click:
     Exit Sub

     Err_cmdDuplicate_Click:
         MsgBox Err.Description
         Resume Exit_cmdDuplicate_Click

 End Sub

要创建与PureCSS类似的侧边栏菜单，只需添加以下内容：

<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>

这是完整的代码：

.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;
}

纯CSS菜单不在顶部

1 个答案: