问题描述
我是 html 和 css 的新手,我只是在 xd adobe 上设计了示例网站。附上它的图像。 html 可以工作,但是当我处理 css 部分时不是 workink,我没有在网站上显示。我在 scss 文件而不是 css 文件中编码。我将不胜感激任何帮助!您可以看到我在 css 文件中写道,徽标应该没有下划线,但仍然无法正常工作
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> <a href="#">Home</a> </li>
<li> <a href="#">FAQ</a> </li>
<li> <a href="#">Pricing</a> </li>
</ul>
<ul class="secondary-nav">
<li> <a href="#">Contact</a> </li>
<li class="GoPremiumBtn"><a href="#">Buy Now</a> </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="fighet Plane Image">
</div>
</section>
</body>
</html>
在 XD 中设计:
输出:
解决方法
尝试将 a.logo2:link,a:logo2:visited
作为该 CSS 规则的选择器。这应该比浏览器默认的 a:link
和 a:visited
更具体并否决它们。