1
我的網站中間有一個灰盒子。我仔細檢查了所有的代碼，我無法弄清楚是什麼造成了這種情況。我很抱歉提出這樣一個愚蠢的問題，我對此很陌生。下面的代碼 -屏幕上的大灰盒子
.nav a {
color: black;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhoood-guides {
border-bottom: 1px solid #dbdbdb
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#fff;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
transition:all linear 0.15s;
color:black;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:dodgerblue;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:11px;
}
.menu > ul > li > a {
padding:10px 10px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-transform:uppercase;
font-weight:bold;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#fff;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#fff;
}
.sub-menu li {
display:block;
font-size:11px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-transform: uppercase;
font-weight:bold
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
.neighborhood-guides h2 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.neighborhood-guides p {
font-size: 24px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.socialmedia {
background: #498FCC;
}
.neighborhood-guides {
padding: 20px 20px;
}
.allrights li p {
color: white;
font-family: 'Shift', sans-serif;
}
.whole {
background-image:url('http://i.imgur.com/3ay8hjS.jpg');
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html>
<div class="whole">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#"> Contact Us</a></li>
<li>
<a href="#">Destinations <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#">Airlines</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</li>
<li><a href="#">Cruiselines</a></li>
<li><a href="#">Weddings & Honeymoons</a></li>
<li>
<a href="#">Useful Information <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#">Travel Insurance</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
</div>
</div>
<center>
<h2></h2>
<p></p>
<h1></h1>
<div class="row">
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<image src="">
</div>
</div>
</div>
</center>
<center>
<div class="learn-more">
\t <div class="container">
\t \t <div class="row">
\t <div class="col-md-4">
\t \t \t <h3></h3>
\t \t \t <p></p>
\t \t \t <p><a href="#"></a></p>
\t </div>
\t \t <div class ="col-md-4">
\t \t \t <h3></h3>
\t \t \t <p>.</p>
\t \t \t <p><a href="#"></a></p>
\t \t </div>
\t \t <div class ="col-md-4">
\t \t \t <h3></h3>
\t \t \t <p></p>
\t \t \t <p><a href="#"></a></p>
\t \t </div>
\t </div>
\t </div>
</center>
</div>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
</ul>
</nav>
</div>
<center>
<h2></h2>
<h2></h2>
<h2></h2>
</center>
<h2></h2>
<h2></h2>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
<div class="allrights">
<center><li><p>Travel Away Corporation All Rights Reserved 2015</p></li></center>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
我看不出有什麼：https://jsfiddle.net/eugensunic/kphe5fbL/16/ –