滑塊和導航欄合爲一個

我的CSS有問題。我想讓我的導航欄像這樣（正如你所看到的，它在導航欄上沒有背景，並且與滑塊連接）。我已經嘗試了YouTube教程中的所有建議，但沒有成功。滑塊和導航欄合爲一個

這是我想向你展示的鏈接： http://theme.ridianur.com/alamak/

我能夠在記事本中打開bootstrap.min.css改變我的導航欄的背景顏色，搜索「導航欄默認」，並改變顏色代碼。但是，我無法讓它像我想要的那樣沒有背景。

我的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 }

任何幫助，將不勝感激。謝謝！

來源

2017-01-02 Fauzy Nur Noviansyah

我會用僞代碼解釋這個。如果你需要幫助，你需要在你的文章中包含html和css的相關位，而不是整個網站的存檔。

你要找的這個效果無非是：

<div class="wrapper"> 

    <div class="navigation"> 

    </div> 

    <div class="banner"> 

    </div> 

</div>

和

.wrapper{background:url('your_image.jpg');} 
.navigation, .banner{background:transparent;}

應用於父容器和導航/旗幟透明背景的圖形。

來源

2017-01-02 22:46:04

我已編輯帖子。我混淆了我應該改變的部分。 –

滑塊和導航欄合爲一個

回答

相關問題