我的 CSS 有问题。我想像这样制作我的导航栏(如您所见，它在导航栏上没有背景并且与 slider 连接)。我已经尝试了 youtube 教程中的所有建议，但没有任何效果。
这是我想给你看的链接: http://theme.ridianur.com/alamak/
我可以通过在记事本中打开 bootstrap.min.css 来更改导航栏的颜色背景，搜索“navbar-default”，然后更改颜色代码。但是，我没能像我想要的那样让它没有背景。
我的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="boot/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Image Slider</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="logo">
<img src="kets.png">
</div>
</div>
</nav>
<div class="container-fluid hero-slide">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="Cats1">
<div class="carousel-caption">
<div class="tekslide1">
<h1>Hewan yang mainstream</h1>
<p>Kita juga gatau kenapa milih topik kucing</p>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="Cats2">
</div>
<div class="item">
<img src="img/3.jpg" alt="Cats3">
</div>
<div class="item">
<img src="img/4.jpg" alt="Cats4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
和我的CSS:
@charset "utf-8";
@font-face{
font-family: 'custom';
src: url('OpenSans-Regular.ttf') format('truetype'); //<-- semicolon
}
@font-face{
font-family: 'custom1';
src: url('Alternate.ttf') format('truetype'); //<-- semicolon
}
@media (min-width: 768px){
.navbar .navbar-nav{
display: inline-block;
float: none;
vertical-align: top;
font-family: 'custom';
letter-spacing: 5px;
padding-top: 12px;
margin-bottom: -20px;
}
.tekslide1{
font-size: 25px;
padding-left: 300px;
padding-bottom: 500px;
font-family: 'custom1';
}
.navbar .navbar-collapse{
text-align: right;
padding-right: 120px;
}
.navbar-default .navbar-collapse .nav >li >a {
color: #EEEEEE;
margin-left: 10px;
margin-right: 5px;
font-size: 13px;
}
.navbar-default .navbar-collapse .nav >li >a:hover, .navbar-default .navbar-collapse .nav >li >a:focus{
color: #BDBDBD;
background: none;
}
.logo{
float: left;
padding: 2px;
margin: 2px;
margin-bottom: -15px;
margin-left: 5%;
border: none;
border-radius: 100px;
}
.hero-slide{
margin-top: -20px;
}
.navbar li { color: #000 }
如有任何帮助，我们将不胜感激。谢谢!
最佳答案
我将用伪代码解释这一点。如果您需要帮助，您需要在帖子中包含相关的 html 和 css，而不是整个站点的存档。
你要找的这个效果无非就是:
<div class="wrapper">
<div class="navigation">
</div>
<div class="banner">
</div>
</div>
和
.wrapper{background:url('your_image.jpg');}
.navigation, .banner{background:transparent;}
应用于具有透明背景的父容器和导航/横幅的图形。
关于css - slider 和导航栏合二为一，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41433948/