因此，我的打开菜单/汉堡包图标始终显示在导航徽标下，我不知道如何根据最佳做法在桌面和桌面标题菜单的最右侧显示它应实际显示的位置移动时没有正确执行：-220或其他任何操作。必须有更好的方法。
*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing: inherit;
}
html {
font-size:18px;
box-sizing: border-box;
}
a {text-decoration: none;}
h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;
}
.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;
}
.nav-list, .nav-item a{
font-size:13px;
font-family:'Montserrat', sans-serif;
font-weight:400;
color:white;
text-decoration: none;
}
li {
list-style:none;
}
img {width:100%;
max-width:100%;
height:auto;
}
section {
padding:5rem 0;
}
.mobile-open {
width:26px
}
.nav-list{
width:20px;
}
header {
width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}
container {
width: 100%;
max-width: 98rem;
margin:0 auto;
padding: 0 1.5rem;
}
.nav-brand {width:14rem;}
.mobile-open {
cursor:pointer;
}
.nav-list{width:25rem;
height:100vh;
background-color:#D64C31;
position:fixed;
top:0;
right:-26rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
z-index:1500;
transition: all 650ms ease-in-out;
}
.nav-list.active {
right:0;
}
.close {position:absolute;}
.nav-list img {width:1.5rem;
height:1.5rem
}
.mobile-close {
position: absolute;
top:1rem;
left:1.5rem;
}
.nav-item {
margin: 1.5rem;
color:white;
}
.nav-link {
color:white;
text-transform: uppercase;
}
.nav-list.active {
right:0;
}
.close {
position:absolute;
top:1rem;
bottom: 1.5rem;
}
.open {
position:absolute;
top:1rem;
bottom: 1.5rem;
right:-220px;
}*,
*::before,
*::after {
margin:0;
padding:0;
box-sizing: inherit;
}
html {
font-size:18px;
box-sizing: border-box;
}
a {text-decoration: none;}
h1 {
font-size:48px;
font-weight:200;
font-family: 'Cormorant', 'Garamond', sans-serif;
}
.main-message p {
font-weight:400;
font-family: 'Montserrat', sans-serif;
}
.nav-list, .nav-item a{
font-size:13px;
font-family:'Montserrat', sans-serif;
font-weight:400;
color:white;
text-decoration: none;
}
li {
list-style:none;
}
img {width:100%;
max-width:100%;
height:auto;
}
section {
padding:5rem 0;
}
.mobile-open {
width:26px
}
.nav-list{
width:20px;
}
header {
width=100%;
height:5rem;
position:absolute;
top:90;
left:200;
z-index: 1;}
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem 0;
border-bottom: none;
}
container {
width: 100%;
max-width: 98rem;
margin:0 auto;
padding: 0 1.5rem;
}
.nav-brand {width:14rem;}
.mobile-open {
cursor:pointer;
}
.nav-list{width:25rem;
height:100vh;
background-color:#D64C31;
position:fixed;
top:0;
right:-26rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
z-index:1500;
transition: all 650ms ease-in-out;
}
.nav-list.active {
right:0;
}
.close {position:absolute;}
.nav-list img {width:1.5rem;
height:1.5rem
}
.mobile-close {
position: absolute;
top:1rem;
left:1.5rem;
}
.nav-item {
margin: 1.5rem;
color:white;
}
.nav-link {
color:white;
text-transform: uppercase;
}
.nav-list.active {
right:0;
}
.close {
position:absolute;
top:1rem;
bottom: 1.5rem;
}
.open {
position:absolute;
top:1rem;
bottom: 1.5rem;
right:-220px;
}<!doctype html>
<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<title> Juno College </title>
<meta-http-equiv="X-UA-COMPATIBLE" content="ie-edge">
<!--GGL FONTS-->
<link herf="https://fonts.google.com/specimen/Cormorant+Garamond"
rel="stylesheet">
<link href="https://fonts.google.com/specimen/Montserrat"
rel=stylesheet">
<link rel="stylesheet" link href="style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="nav-brand">
<a href="site.html">
<img src="assets/juno-logo.png" alt="">
</a>
</div>
<div class="mobile-open open">
<i class="mobile-open">
<img src="assets/mobile-open.png"> </i>
</div>
<ul class="nav-list">
<div-class="mobile-close close">
<i class="mobile-close">
<img src="assets/mobile-close.png"> </i>
<li class="nav-item">
<a href="#" class="nav-link">Course</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Alumni</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Blog</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section class="dog-main">
<div class="container">
<div class="main-message">
<h1> Tech challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet. Tristique risus nec feugiat in fermentum posuere urna. Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida Nascetur ridiculus mus mauris vitae ultricies leo integer. Augue interdum velit euismod in pellentesque massa placerat. Vitae suscipit tellus mauris a diam maecenas sed enim. Egestas purus viverra accumsan in nisl nisi. At volutpat diam ut venenatis tellus in metus vulputate. In massa tempor nec feugiat. Curabitur gravida arcu ac tortor dignissim. Tristique nulla aliquet enim tortor at auctor. Quam id leo in vitae turpis massa. Tellus mauris a diam maecenas sed enim. </p>
<div class="cta">
<a href="#" class="btn"> Begin Your Journey at Juno </a>
</div>
<script type="text/javascript" src="scripts.js" ></script>
</section>
</body>
</html>
答案 0 :(得分：0)
您的视口元标记存在一些问题：
my_list =['aa','bg','cr','dn']
if 'a' in or.join(my_list):
#do something
在上述问题的代码片段中，您有<style>
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.2em;
height: 2.2em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.3s infinite ease-in-out;
animation: load7 1.3s infinite ease-in-out;
}
.loader {
color: #888;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.2em 0 -1.3em;
}
40% {
box-shadow: 0 2.2em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.2em 0 -1.3em;
}
40% {
box-shadow: 0 2.2em 0 0;
}
}
</style>
<div class="loader">Loading...</div>
。应该是<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
，但不建议这样做，因为它限制了缩放功能，这是可访问性。
出于缩放原因，user-scale=no也被拒之门外。
首选视口元标记为：
user-scalable=no有关视口元标记的更多信息，请参见此：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
您也不会在CSS中显示任何media queries。