blocks|key|4129742|text|首先，您的菜单需要在<body></body>标记内。请在此处查看：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4129743|<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>|code-block|syntax|javascript|4129744|要创建一个与PureCSS类似的侧边栏菜单，只需添加以下内容：|4129745|.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;
}|4129746|对于容器，您可以添加：|4129747|.container+{
++++padding-left:+15em;
+}|4129748|下面是完整的代码：|4129749|<head>
++++<meta+charset="utf-8">
++++
++++<meta+http-equiv="X-UA-Compatible"+content="IE=edge">
++++
++++<meta+name="viewport"+content="width=device-width,+initial-scale=1">
++++
++++<link+rel="stylesheet"+href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"+integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"+crossorigin="anonymous">
++++
++++<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">
++++++++
++++++++<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>|4129750|entityMap^0|A|D|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|16|8|@]|D|@]|E|$]]|$1|U|3|V|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

<p>First of all your menu needs to be within the <code>&lt;body&gt;&lt;/body&gt;</code> tags. See it here:</p>

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

<p>To create a similar sidebar menu as PureCSS has just add the following:</p>

<pre><code>.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;
}
</code></pre>

<p>and for the container you can add:</p>

<pre><code>.container {
    padding-left: 15em;
 }
</code></pre>

<p>Here's the full code:</p>

<p>
    </p>

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

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

&lt;/html&gt;
</code></pre>


<p>I am having trouble getting my Pure CSS styling to work so that I can create a Menu on the left side of my webpage. This is what I get when I open the file. I am using Flask also just in case that is relevant. </p>

<p>This is what my site looks like:<a href="https://i.stack.imgur.com/yH8mZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yH8mZ.png" alt="My Site (in Firefox Quantum 61.0.1)"></a></p>

<p>And this is the code that I am using to create this file:</p>

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

        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;!-- Check Compattibility with Pure CSS --&gt;

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

        &lt;title&gt;Home&lt;/title&gt;

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

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

&lt;/html&gt;
</code></pre>

<p>I am new to Pure CSS and I am trying to create an elegant menu that is on the side of the page similar to what you will find on the Menu Page on their website: <a href="https://purecss.io/menus/" rel="nofollow noreferrer">https://purecss.io/menus/</a></p>


Pure CSS Menu not on side on the top

我有问题让我的纯CSS样式的工作，以便我可以创建一个菜单在我的网页左侧。这是我打开文件时得到的结果。我也在使用Flask，以防万一。这是我的网站的样子：​这是我用来创建这个文件的代码：<!DOCTYPE html><html>    <head>        <meta charset="utf-8"> <!-- C...

问纯CSS菜单不在顶部
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯CSS菜单不在顶部EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯CSS菜单不在顶部
EN