Question

我还是初学者......

我第一次创建页面时一切运行良好。背景img涵盖了一切，导航是透明的。但是，只要我输入引导程序的链接，一切都改变了我错过了什么？

    <!DOCTYPE html>

<html lang=“en”>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/styles.css">

    <title>WILDA Designs</title>
    <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <div class="navbar transparent navbar-inverse">
        <div class="nav">
            <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </div> <!-- end nav here -->
</div> <!-- end navbar bar here -->

  <div class="jumbotron-contact">
  <div class="container">

        <div class="main">
      <h1>Contact</h1>
        <p class="main-text">If you have any inquires for WILDA please reach us at:
        </p>
        <p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
                <p><span class="glyphicon glyphicon-phone"></span>Phone:
        <strong>774.535.7475</strong></p>
        <p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire@gmail.com</span></strong>
        </p>
    </div> <!-- end main -->
  </div> <!-- end container here -->
</div> <!-- jumbotron -->

<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Can place script tags with JavaScript files here -->

</body>

</html>




 * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
    }


    .jumbotron-contact {
      height: 800px;
      background-image: url(../img/largecontactimg.jpg);
      background-size: cover;
      background-repeat: no-repeat;

    }

    .main {
      position: relative;
      top: 40px;
      text-align: left;
      font-family: freight-text-pro;

    }

    .main h1 {
      color: #333;
      font-family: freight-text-pro;
      font-weight: 600;
      font-size: 70px;
      margin-top: 0;
      margin-bottom: 10px;
      text-transform: capitalize;
    }

    .main p {
      font-size: 22px;
    }

    .main-text {
      font-weight: 550;
    }

    span {
        padding-right: 10px;
    }



     /*Navigation*/

     .nav ul li {
        display: inline-block;
        float: right;
     }

     .navbar .transparent .navbar-inverse .navbar-inner {
         border-width: 0px;
         -webkit-box-shadow: 0px 0px;
         box-shadow: 0px 0px;
         background-color: transparent;
             background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
         background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
         background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);

     }

     .nav ul li a {
            text-align: right;
            font-size: 16px;
            white-space: nowrap;
            color: white;
            text-transform: uppercase;
        text-decoration: none;
            transition: color 600ms;
            -webkit-transition: color 600ms;
            padding-right: 10px;
        font-family: freight-text-pro;
     }

     .nav a:hover {
        color: #FF3300;
            text-decoration: none;

     }

Answer 1

删除Navbar-inverse ..添加黑色背景。

* { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
    }


    .jumbotron-contact {
      height: 800px;
      background-image: url(../img/largecontactimg.jpg);
      background-size: cover;
      background-repeat: no-repeat;

    }

    .main {
      position: relative;
      top: 40px;
      text-align: left;
      font-family: freight-text-pro;

    }

    .main h1 {
      color: #333;
      font-family: freight-text-pro;
      font-weight: 600;
      font-size: 70px;
      margin-top: 0;
      margin-bottom: 10px;
      text-transform: capitalize;
    }

    .main p {
      font-size: 22px;
    }

    .main-text {
      font-weight: 550;
    }

    span {
        padding-right: 10px;
    }



     /*Navigation*/

     .nav ul li {
        display: inline-block;
        float: right;
     }

     .navbar .transparent .navbar-inverse .navbar-inner {
         border-width: 0px;
         -webkit-box-shadow: 0px 0px;
         box-shadow: 0px 0px;
         background-color: transparent;
             background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
         background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
         background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);

     }

     .nav ul li a {
            text-align: right;
            font-size: 16px;
            white-space: nowrap;
            color: white;
            text-transform: uppercase;
        text-decoration: none;
            transition: color 600ms;
            -webkit-transition: color 600ms;
            padding-right: 10px;
        font-family: freight-text-pro;
     }

     .nav a:hover {
        color: #FF3300;
            text-decoration: none;

     }

<!DOCTYPE html>

<html lang=“en”>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/styles.css">

    <title>WILDA Designs</title>
    <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <div class="navbar transparent">
        <div class="nav">
            <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </div> <!-- end nav here -->
</div> <!-- end navbar bar here -->

  <div class="jumbotron-contact">
  <div class="container">

        <div class="main">
      <h1>Contact</h1>
        <p class="main-text">If you have any inquires for WILDA please reach us at:
        </p>
        <p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
                <p><span class="glyphicon glyphicon-phone"></span>Phone:
        <strong>774.535.7475</strong></p>
        <p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire@gmail.com</span></strong>
        </p>
    </div> <!-- end main -->
  </div> <!-- end container here -->
</div> <!-- jumbotron -->

<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Can place script tags with JavaScript files here -->

</body>

</html>

Answer 2

现在应该是好的。

 * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
    }


    body {
      height: 800px;
      background-image: url(https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg);
      background-size: cover;
      background-repeat: no-repeat;

    }

    .main {
      position: relative;
      top: 40px;
      text-align: left;
      font-family: freight-text-pro;

    }

    .main h1 {
      color: #333;
      font-family: freight-text-pro;
      font-weight: 600;
      font-size: 70px;
      margin-top: 0;
      margin-bottom: 10px;
      text-transform: capitalize;
    }

    .main p {
      font-size: 22px;
    }

    .main-text {
      font-weight: 550;
    }

    span {
        padding-right: 10px;
    }



     /*Navigation*/

     .nav ul li {
        display: inline-block;
        float: right;
     }

     .navbar .transparent .navbar-inverse .navbar-inner {
         border-width: 0px;
         -webkit-box-shadow: 0px 0px;
         box-shadow: 0px 0px;
         background-color: transparent;
             background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
         background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
         background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);

     }

     .nav ul li a {
            text-align: right;
            font-size: 16px;
            white-space: nowrap;
            color: white;
            text-transform: uppercase;
        text-decoration: none;
            transition: color 600ms;
            -webkit-transition: color 600ms;
            padding-right: 10px;
        font-family: freight-text-pro;
     }

     .nav a:hover {
        color: #FF3300;
            text-decoration: none;

     }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang=“en”>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/styles.css">

    <title>WILDA Designs</title>
    <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <div class="navbar transparent ">
        <div class="nav">
            <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </div> <!-- end nav here -->
</div> <!-- end navbar bar here -->

  <div class="jumbotron-contact">
  <div class="container">

        <div class="main">
      <h1>Contact</h1>
        <p class="main-text">If you have any inquires for WILDA please reach us at:
        </p>
        <p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
                <p><span class="glyphicon glyphicon-phone"></span>Phone:
        <strong>774.535.7475</strong></p>
        <p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">touclaire@gmail.com</span></strong>
        </p>
    </div> <!-- end main -->
  </div> <!-- end container here -->
</div> <!-- jumbotron -->

<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Can place script tags with JavaScript files here -->

</body>

</html>

Answer 3

好吧，我试过重现你的问题，它看起来很好。黑色顶级菜单，底部没有黑条。确保styles.css正确加载

为什么页面顶部和底部有黑白条？

4 个答案: