为什么页面顶部和底部有黑白条？
我还是初学者......
我第一次创建页面时一切运行良好。背景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;
}
4 个答案:
答案 0 :(得分：0)
删除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>
答案 1 :(得分：0)
现在应该是好的。
* { 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>
答案 2 :(得分：0)
好吧，我试过重现你的问题，它看起来很好。黑色顶级菜单，底部没有黑条。确保styles.css正确加载
答案 3 :(得分：-1)
{{1}}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？