我的横幅只需要针对这个特定页面变小,当我尝试使用 css 内联时,它确实将高度更改为我需要的高度,但我的链接停止工作。
这是我的 css 文件中的代码:
/* Nav User Page*/
.nav-borders .nav-link.active {
text-decoration-color: #dc3030;
border-bottom-color: #dc3030;
color: #dc3030;
}
.nav-borders .nav-link.active b {
color: #dc3030;
}
.nav-borders .nav-link {
color: #222222;
border-bottom-width: 0.125rem;
border-bottom-style: solid;
border-bottom-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0;
padding-right: 0;
margin-left: 1rem;
margin-right: 1rem;
}
/*Banner and Header*/
.overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.banner-area {
background: url(../img/header-bg.jpg) center;
background-size: cover;
}
.banner-area .overlay-bg {
background-color: rgba(0, 0, 0, 0.7);
}
.banner-content {
margin-top: -90px;
text-align: center;
}
#header {
padding: 0px 0px 14px 0;
position: fixed;
left: 0;
top: 0;
right: 0;
transition: all 0.5s;
z-index: 997;
}
#header hr {
border-color: rgba(255, 255, 255, 0.3);
margin-top: 5px;
}
.header-top {
height: 24px;
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-top a {
color: #fff;
font-size: 15px;
}
这是 HTML 代码,在我更改横幅高度之前,该代码运行良好:
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="codepixer">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>User Page</title>
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="header" id="home" >
<div class="container header-top">
<div class="logo">
<div id="logo">
<a href="index.html"><img src="img/logo.png" alt="" title="" /></a>
</div>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="index.html">Home</a></li>
<li><a href="about.html">Sobre nós</a></li>
<li><a href="gallery.html">Eventos</a></li>
<li><a href="event.html">Doações</a></li>
<li><a href="ticket.html">Propostas</a></li>
<li><a href="blog-home.html">Contactos</a><li>
<li class="menu-has-children"><a href="">Artistas</a>
<ul>
<li><a href="blog-single.html">Adriana Bárbara</a></li>
<li><a href="category.html">Maria Venceslau</a></li>
<li><a href="elements.html">Laura Gonçalves</a></li>
<li><a href="category.html">Concha carvalho</a></li>
<li><a href="category.html">Zé Dias </a></li>
<li><a href="category.html">André Vaz</a>
</li></li>
</ul>
<li><a
<div class="navbar-user">
<a href="index.html">
<img src="img/Simbolo.svg" alt="Usuário" />
</a>
</div>
</ul>
</nav><!-- #nav-menu-container -->
</div>
</div>
</header><!-- #header -->
<!-- start banner Area -->
<section class="banner-area relative" id="home" style="height: 150px;">
<div class="overlay overlay-bg" style="height: 150px;"></div>
<div class="container">
<div class="row d-flex align-items-center justify-content-center">
<div class="about-content col-lg-12">
</div>
</div>
</div>
</section>
<!-- End banner Area -->
<!-- Start Page Content Area -->
<!-- Nav Profile: Options -->
<div class="container px-3 mt-3">
<nav class="nav nav-borders">
<a class="nav-link active ms-0" href="perfil.html" target="__self" > <b>Perfil</b></a>
<a class="nav-link" href="propostas_perfil.html" target="__self" > <b>Propostas</b></a>
<a class="nav-link" href="doacoes_perfil.html" target="_self" > <b>Doações</b></a>
</nav>
如果有人可以提供帮助,我将非常感激!如果需要,我将提供完整的代码,但我确信错误就在这里。
在我做出这个小改变之前,链接工作得很好。
提前谢谢您!
您提供的代码中似乎有一个 HTML 片段搞砸了。这一部分多了一个
<li><a
,不知道如何向你指出。它位于我的代码编辑器的第 68 行。
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="index.html">Home</a></li>
<li><a href="about.html">Sobre nós</a></li>
<li><a href="gallery.html">Eventos</a></li>
<li><a href="event.html">Doações</a></li>
<li><a href="ticket.html">Propostas</a></li>
<li><a href="blog-home.html">Contactos</a><li>
<li class="menu-has-children"><a href="">Artistas</a>
<ul>
<li><a href="blog-single.html">Adriana Bárbara</a></li>
<li><a href="category.html">Maria Venceslau</a></li>
<li><a href="elements.html">Laura Gonçalves</a></li>
<li><a href="category.html">Concha carvalho</a></li>
<li><a href="category.html">Zé Dias </a></li>
<li><a href="category.html">André Vaz</a>
</li></li>
</ul>
<li><a
<div class="navbar-user">
<a href="index.html">
<img src="img/Simbolo.svg" alt="Usuário" />
</a>
</div>
</ul>
</nav>