首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >纯CSS菜单不在顶部

纯CSS菜单不在顶部
EN

Stack Overflow用户
提问于 2018-07-14 06:33:22
回答 1查看 145关注 0票数 0

我有问题让我的纯CSS样式的工作,以便我可以创建一个菜单在我的网页左侧。这是我打开文件时得到的结果。我也在使用Flask,以防万一。

这是我的网站的样子:

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

代码语言:javascript
复制
<!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/

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51333593

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档