我跟着一个教程，试图找出如何使用css html和一点js为我的导航栏插入一个响应汉堡包图标。然而，我已经通过视频到一半的部分，我应该能够看到汉堡包图标，但由于某种原因，它没有显示在屏幕上。我能够看到它概述当我检查我的文件在firefox上。所以老实说，我不知道为什么它没有出现在屏幕上。我打算张贴我的代码如下，对不起，如果我做得不适当这是我第一次张贴在这里，所以我不确定的规范。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex no tutorial</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Oswald:wght@300;400&family=Roboto+Slab:wght@500;600&family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<div class="nav-content">
<p class="logo"><h3 class="logo">K13-News</h3></p>
<!--Hamburger nav-->
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-links">
<li><a href="#">Home</a> </li>
<li><a href="#">Trending</a></li>
<li><a href="#">Today</a></li>
<li><a href="#">Politics</a></li>
</ul>
</div>
</nav>
<div class="columns">
<div class="col col-50">
<p><h3>Trump found innocent on allegations of murder!</h3> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Nisl suscipit adipiscing bibendum est ultricies integer quis. Viverra justo nec ultrices dui sapien eget. Nisi vitae suscipit tellus mauris a diam maecenas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Donec ac odio tempor orci. Purus in massa tempor nec feugiat. Facilisi etiam dignissim diam quis. Dapibus ultrices in iaculis nunc sed augue lacus. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Libero id faucibus nisl tincidunt eget nullam non nisi. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. In cursus turpis massa tincidunt dui ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Diam maecenas sed enim ut sem viverra. Purus sit amet volutpat consequat.
</p>
</div>
<div class="col col-50">
<p>In nibh mauris cursus mattis molestie a iaculis. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Adipiscing elit ut aliquam purus sit. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Sed felis eget velit aliquet. Adipiscing elit ut aliquam purus sit. Nec feugiat in fermentum posuere urna nec tincidunt. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Donec adipiscing tristique risus nec feugiat in. Pharetra diam sit amet nisl suscipit adipiscing. Malesuada fames ac turpis egestas maecenas pharetra convallis. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Sagittis eu volutpat odio facilisis mauris sit amet massa. Mattis vulputate enim nulla aliquet porttitor lacus. Lacus vel facilisis volutpat est velit egestas dui id. Pharetra et ultrices neque ornare aenean euismod elementum. Orci eu lobortis elementum nibh tellus molestie nunc. Diam vulputate ut pharetra sit amet aliquam.</p>
</div>
</div>
<!--End of wrapper div-->
</div>
</body>/* this is so that padding doesn't effect the size of elements*/
*, *::before, ::after {box-sizing:border-box }
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Oswald:wght@300;400&family=Roboto+Slab:wght@500;600&family=Work+Sans:wght@300;400&display=swap');
body{
font-family: 'Work Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
/*obv the background color of whole page*/
background-color: #201D1D;
color: white;
}
.wrapper{
margin:auto;
margin:20px
}
/* logo section*/
h3.logo{
font-family: 'Fraunces', serif;
font-weight: 600;
color: #011213;
}
li, a{
text-decoration: none;
list-style-type: none;
font-family: 'Work Sans', sans-serif;
/*color of the nav font*/
color: #201D1D;
}
.nav-links li{
display: inline-block;
padding: 0px 10px;
}
.nav-links li a{
transition: all 0.3s ease 0s;
}
/*hover color for nav font*/
.nav-links li a:hover{
color:white;
text-decoration: underline #201D1D 2px ;
text-underline-offset: 5px;
}
/*flex container that controls the nav bar*/
.nav-content{
display:flex;
justify-content: center;
align-items: center;
background-color: #09ADC3;
border-radius: 25px ;
height: 8vh;
margin-bottom: 20px;
}
.columns{
display: flex;
flex-wrap:wrap;
align-items: center;
}
h3{
font-family: 'Roboto Slab', serif;
}
.col{
padding:10px;
}
.col-50{
width:50%
}
@media screen and (max-width:1000px) {
.col-50{
width:100%
}
}
/*style for the hamburger menu which isn't working for some reason*/
.toggle-button{
position:absolute;
top:2rem;
right:1rem;
display:flex;
flex-direction: column;
justify-content:space-between;
width: 31px;
height:21px;
}
.toggle-button .bar{
height:3px;
width:100%;
color:white;
border-radius:10px;
}
2条答案
按热度按时间pdkcd3nj1#
非常接近!!
只是缺少
.bar类的border属性：你已经设置了
color: white，它只适用于元素内部的文本，通过设置border（在我的答案border-bottom中），你可以看到有白线。从那里它将只是一个定位和点击行为的情况下...
x一个一个一个一个x一个一个二个x
kknvjkwl2#
这个问题的另一个解决方案是简单地将background-color属性应用于.bar元素，正如Harrison指出的，我的原始代码不起作用的原因是我使用了color：白色，而我应该使用background-color：white。