TL; DR
这是我的CSS代码和HTML代码
<div class="navbar">
<nav>
<span id="logo">
<a href="index.html">Logo</a>
</span>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
</div>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
结果:https://imgur.com/a/c6rWS3V(第二张图片)
如果我将*替换为.navbar类,则会得到以下结果(图像2,谢谢!) https://imgur.com/a/c6rWS3V(第一张图片)
以下较长版本:(如果将*交换为.navbar,它将无法正常工作)问题是为什么?
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
nav {
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
}
nav #logo {
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
}
nav #logo a {
color: #fff;
transition: all 0.3s ease-out;
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
nav .menu {
float: left;
left: 50%;
position: relative;
}
nav .menu li {
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
}
nav .menu li a {
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 200;
}
#toggle {
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#toggle .span {
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
}
#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}
@media(max-width: 768px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
}
nav #logo {
margin-left: 18px;
}
.menu a {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 20px;
}
nav .menu {
display: none;
}
}
@media only screen and (max-width: 1366px) and (min-width: 1024px)
{
.menu a {
position: relative;
margin-left: -30px;
font-size: 2vw;
}
}
@media only screen and (width: 812px) and (min-width: 375px)/* IPHONE X */
{
.menu a {
position: relative;
margin-left: -80px;
font-size: 2vw;
}
}
@media only screen and (width: 823px) and (min-width: 411px) /*GOOGLE PIXEL 2XL */
{
.menu a {
position: relative;
margin-left: -120px;
font-size: 2vw;
}
}
<div class="navbar">
<nav>
<span id="logo">
<a href="index.html">Logo</a>
</span>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
</div>
谢谢! 附:我尽力使用这个编辑器,但还是新的!尽管我认为我做的很好:D
答案 0 :(得分:1)
始终将text-decoration:none
添加到a
标签
.navbar #logo a{
text-decoration:none;
}
*{
css rules
}
适用于所有内容(包括a
标记),这就是为什么您不会对徽标加下划线。
* {
margin: 0;
padding: 0;
/* text-decoration: none;*/ /* Comeented for sake of answer*/
list-style: none;
}
nav {
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
}
nav #logo {
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
}
nav #logo a {
color: #fff;
transition: all 0.3s ease-out;
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
nav .menu {
float: left;
left: 50%;
position: relative;
}
nav .menu li {
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
}
nav .menu li a {
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 200;
}
#toggle {
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#toggle .span {
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
}
#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}
@media(max-width: 768px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
}
nav #logo {
margin-left: 18px;
}
.menu a {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 20px;
}
nav .menu {
display: none;
}
}
@media only screen and (max-width: 1366px) and (min-width: 1024px)
{
.menu a {
position: relative;
margin-left: -30px;
font-size: 2vw;
}
}
@media only screen and (width: 812px) and (min-width: 375px)/* IPHONE X */
{
.menu a {
position: relative;
margin-left: -80px;
font-size: 2vw;
}
}
@media only screen and (width: 823px) and (min-width: 411px) /*GOOGLE PIXEL 2XL */
{
.menu a {
position: relative;
margin-left: -120px;
font-size: 2vw;
}
}
.navbar #logo a{
text-decoration:none;
}
<div class="navbar">
<nav>
<span id="logo">
<a href="index.html">Logo</a>
</span>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
</div>