javascript - 为什么我的页面顶部和底部有黑白条？

标签 javascript jquery html css twitter-bootstrap

我还是个初学者...

我第一次创建页面时一切正常。背景 img 覆盖了所有内容，导航是透明的。但是一旦我放入 Bootstrap 的链接，一切都变了，我错过了什么？

    <!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;

     }

最佳答案

现在应该没问题了。

 * { 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>

关于javascript - 为什么我的页面顶部和底部有黑白条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39751200/

上一篇：javascript - 两侧的 CSS 垂直菜单

下一篇：javascript - 启用禁用 Font Awesome 图标

相关文章：

javascript - 应用内浏览器不会关闭

javascript - 如果动态分配验证模式，setValidators 不起作用

javascript - 如何在编号列表中引用特定元素编号？

javascript - 使用 $(this) 对象获取 DropDownList 的选定项目

javascript - 滚动时有多个动画

javascript - 寻找类的下一次出现

html - 登录屏幕 - 覆盖

html - 在 Bootstrap 3 的容器流体类中嵌套容器类？

javascript - (HTML + JS) 桌面客户端框架

javascript - Jquery悬停，突出显示除最后一个单元格之外的表格行

©2024 IT工具网  联系我们