纯CSS菜单不在顶部
纯CSS菜单不在顶部
提问于 2018-07-14 06:33:22
我有问题让我的纯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/
回答 1
Stack Overflow用户
发布于 2018-07-14 06:55:56
首先，您的菜单需要在<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>要创建一个与PureCSS类似的侧边栏菜单，只需添加以下内容：
.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51333593
复制相关文章
相似问题