所以，我正在做这个前端导师挑战。我已经做了移动优先设计。我的问题是我如何让我的导航栏像这个
。我已经尝试使用显示Flex与Flex方向行，但移动设计导航栏没有改变它的形状和大小。
我的代码生成的导航栏如下所示
有谁能告诉我，我在媒体询问中做错了什么，我没有得到我想要的输出。
我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<script src="https://kit.fontawesome.com/572b4fce3c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Shortly URL shortening API Challenge</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<main>
<section class="header">
<!-------- Header Section -------->
<nav>
<img src="/images/logo.svg" alt="logo"></a>
<div class="nav-links" id="navLinks">
<!-- <i class="fa fa-solid fa-xmark"></i> -->
<ul>
<li><a href="">Features</a></li>
<li><a href="">Pricing</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Login</a></li>
<li><a href="">Sign Up</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showHideMenu()"></i>
</nav>
<img class='illustration' src="/images/illustration-working.svg" alt="illustration">
<div class="first-section-content">
<h1>More than just <span class="short">shorter links</span></h1>
<p>Build your brand's recognition and get detailed insights on how your links are
performing.</p>
<button class="get-started">Get Started</button>
</div>
</section>
<!-- URL shortening -->
<article class="shorten-details">
<section class="shorten">
<div class="shorten-link">
<input type="text" placeholder="Shorten a link here....">
</div>
<span class="error-msg">Please add a link</span>
<button class="short-it">Shorten It!</button>
</section>
</article>
<!-- URL Copy -->
<article class="url-copy">
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link"><a href="" target="_blank">shrtco.de/8RPDKD</a></p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<!-- <div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link"><a href="" target="_blank">shrtco.de/8RPDKD</a></p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link"><a href="" target="_blank">shrtco.de/8RPDKD</a></p>
<button class="copy">Copy</button>
</div>
</div>
</section> -->
<section class="advanced-stats">
<h2>Advanced Statistics</h2>
<p class="perform">Track how your links are performing across the web with our advanced statistics
dashboard.</p>
<div class="stats">
<div class="stat">
<img class="brand-img" src="/images/icon-brand-recognition.svg" alt="brand-recognition">
<h3>Brand Recognition</h3>
<p class="stat-desc">Boost your brand recognition with each click. Generic links don’t mean a thing.
Branded links help instil confidence in your content.</ class="boost">
</div>
<div class="stat-1">
<img class="brand-img" src="/images/icon-detailed-records.svg" alt="detailed-records">
<h3>Detailed Records</h3>
<p class="stat-desc">Gain insights into who is clicking your links. Knowing when and where people
engage with your content helps inform better decisions.</p>
</div>
<div class="stat-2">
<img class="brand-img" src="/images/icon-fully-customizable.svg" alt="fully-customizable">
<h3>Fully Customizable</h3>
<p class="stat-desc">Improve brand awareness and content discoverability through customizable
links, supercharging audience engagement.</p>
</div>
</div>
</section>
</article>
<article class="boost-links">
<section class="boost">
<h2>Boost your links today</h2>
<button class="get-started-2">Get Started</button>
</section>
</article>
<article class="last-footer">
<section class="footer">
<div class="footer-links">
<div class="footer-link">
<h2>Shortly</h2>
<h3>Features</h3>
<ul>
<li>Link Shortening</li>
<li>Branded Links</li>
<li>Analytics</li>
</ul>
</div>
<div class="footer-link">
<h3>Resources</h3>
<ul>
<li>Blog</li>
<li>Developers</li>
<li>Support</li>
</ul>
</div>
<div class="footer-link">
<h3>Company</h3>
<ul>
<li>About</li>
<li>Our Team</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="socials">
<div class="social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
</section>
</article>
</main>
<script src="script.js"></script>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
</div>
</body>
</html>标题/导航栏部分的CSS代码：
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
@import url('css-reset.css');
:root {
--color-cyan: hsl(180, 66%, 49%);
--color-dark-violet: hsl(257, 27%, 26%);
--color-red: hsl(0, 87%, 67%);
--color-gray: hsl(0, 0%, 75%);
--color-grayish-violet: hsl(257, 7%, 63%);
--color-grayish-violet-op: hsl(257, 7%, 63%, 0.3);
--color-very-dark-blue: hsl(255, 11%, 22%);
--color-very-dark-violet: hsl(260, 8%, 14%);
--color-second-bg: hsl(230, 25%, 95%);
--color-white: hsl(0, 0%, 100%);
--font-weight-five: 500;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
}
main {
overflow: hidden;
/* border: 1px solid green; */
max-width: 390px;
height: auto;
margin: 0 auto;
}
/* -------Header Section--------- */
.header {
display: flex;
flex-direction: column;
padding: 30px;
max-width: 350px;
}
.nav {
display: flex;
position: relative;
}
.nav-links {
background-color: var(--color-dark-violet);
width: 330px;
height: 370px;
border-radius: 10px;
position: absolute;
z-index: 2;
transition: 0.3s;
top: 100px;
right: 63px;
visibility: hidden;
}
nav .fa {
display: block;
color: var(--color-grayish-violet);
font-size: 30px;
cursor: pointer;
right: 63px;
top: 30px;
position: absolute;
}
.nav-links ul li {
list-style: none;
padding: 14px;
text-align: center;
display: block;
}
.nav-links ul li a {
text-decoration: none;
color: var(--color-white);
font-weight: var(--font-weight-seven);
font-size: 1.2rem;
padding: 10px 100px;
border-radius: 25px;
}
.nav-links ul li a:hover {
background-color: var(--color-cyan);
color: var(--color-white);
}
.nav-links ul li:nth-child(3) {
border-bottom: 1px solid var(--color-grayish-violet-op);
padding-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
}
.illustration {
position: relative;
right: -50px;
transform: scale(1.6);
margin-top: 100px;
right: -90px;
z-index: 1;
display: block;
}
.first-section-content {
margin-top: 100px;
transition: 0.3s;
}
.first-section-content.menu-open {
margin-top: 130px;
transition: 0.3s;
}
.first-section-content h1 {
font-size: 2.67rem;
font-weight: var(--font-weight-seven);
color: var(--color-very-dark-blue);
margin-bottom: 20px;
margin-left: 9px;
width: 350px;
line-height: 1.2;
}
.short {
margin-left: 15px;
}
.first-section-content p {
font-size: 1rem;
color: var(--color-grayish-violet);
font-weight: var(--font-weight-five);
margin-bottom: 35px;
margin-left: 6px;
width: 350px;
line-height: 2;
letter-spacing: 0.7px;
overflow: hidden;
}
.get-started {
background-color: var(--color-cyan);
color: var(--color-white);
border: none;
padding: 14px;
font-weight: var(--font-weight-seven);
width: 190px;
border-radius: 30px;
cursor: pointer;
margin-left: 70px;
}
@media (min-width:768px) {
body {
overflow-y: scroll;
min-height: 100vh;
overflow-x: hidden;
}
main {
height: 100vh;
max-width: 100%;
overflow: scroll;
}
.header {
display: flex;
/* align-items: center; */
/* flex-direction: row; */
width: 100%;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 2.3rem;
padding: 2.9rem 9.2rem;
position: relative;
}
.nav-links {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.nav-links ul li {}
.nav-links ul li a {
display: flex;
display: inline;
flex-direction: row;
background-color: transparent;
visibility: visible;
color: var(--color-gray);
}
nav .fa {
display: none;
}
}
1条答案
按热度按时间ql3eal8s1#
display: flex;需要位于.nav-linksdiv内的ul上-ul是包含导航项的元素。