当我在本地主机上运行所有内容时，一切正常，但我无法弄清楚它为什么不能在网络服务器上运行。旋转木马甚至没有显示，按钮也不起作用。但这一切都完全在localhost上运行？
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta name="description" content="">
<meta charset="utf-8">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<style>
.carousel-indicators {
foreground-color:#;
}
.carousel-indicators {
background-color:#;
}
.greenbutton, btn {
border:2px solid #0099cc;
color: #0099cc;
background:none;
}
span.glyphicon-home {
font-size:1.6em;
color:orange;
}
.navbar {height:80px; }
.navbar {
margin-bottom:0px !important;}
.carousel {
margin-top:70px !important
}
.footer {
background-color: #F90;
font-color: white;
font-size: 12px;
padding: 15px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open
.dropdown-menu {
background-color: #ffffff;
color:#F90;
}
.navbar {
background-repeat:no-repeat;
border-bottom: 1px solid #186ACC;
box-shadow: 0px 1px 10px rgba(0.0.0.0.1);
border-radius: 0px;
}
.navbar-default {
background-color: #ffffff
}
</style>
</head>
<body>
<div class="container" id="main">
<div class="navbar navbar-default navbar-fixed-top navbar">
<div class="container-fluid">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
<a href"#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-home"></span> "Your Roof Now" <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="..\public/clogin/login.php"
<span class="glyphicon glyphicon-dashboard"></span> Log-In</a>
</li>
<li>
<a href="http//www.theweathernetwork.com">
<span class="glyphicon glyphicon-pencil"></span> Weather Network</a>
</li>
</ul>
</li>
</ul><!-- end nav pull-right -->
<div class="nav-collapse collapse navbar-responsive-collapse pull-right">
<ul class="nav navbar-nav">
<li class="active">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Sorry, this section is being updated</a>
</li>
<li class="divider"></li>
<li>
<a href="#"></a>
</li>
<li class="divider"></li>
<li>
<a href="#"></a>
</li>
</li>
</ul>
</li>
</li>
</ul><!-- end dropdown-menu-->
</div><!--end nav-collapse -->
</div><!--end container -->
</div><!-- end navbar-->
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
<div class="item " id="slide2">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
<div class="item" id="slide4">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
</div><!--carousel-inner -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div><!-- end myCarousel -->
<div class="row" id="bigCallout">
<div class="col-12">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Answer</h4>
<h4>'Monier Tile' and 'Columbia Tile'. If you own a tiled roof chances are your tiles are from one of these two manufacturers. <p class="lead">In most cases we find matches for tiles that are no longer being manufactured but require replacement.</p> Click the 'x' to close</h4>
</div><!-- end alert -->
<!-- visible only on small devices -->
<div class="well well-small visible-sm">
<a href="tel:+1-855-336-6772" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"></span> 1-855-336-6772</a>
</div><!-- end well-small -->
<div class="well">
<div class="page-header">
<h2>Its ok. We Know A lot About Tile. <small><hr>Which two tile brands are most commonly found on homes throughout the lower mainland? Click the answer button.</small></h2>
</div><!-- end page-header -->
<a href="" class="btn btn-small btn-warning" id="alertMe">Answer</a>
<hr>
<div>
<a href="form.php" class="greenbutton btn btn-small btn-success btn-responsive text-center">Request Estimate</a> <hr>
</div>
<div>
<p class="lead"style="text-center">Can't use the phone? -Submit a request for an estimate here instead!</p>
</div>
</div><!--end well -->
</div><!-- end column 12 this is the section right below carousel -->
</div><!-- end bigCallout -->
<div class="row" id="featuresHeading">
<div class="col-12">
<h4>We're making some improvements just below in order to better serve our customers.</h4>
<p class="lead">Sorry for any inconvenience. Please scroll down.</p>
</div><!-- end col-12 -->
</div><!-- end featuresHeading -->
<div class="row" id="features">
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div><!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="HTML5" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-warning btn-block">Being updated</a>
</div><!-- end panel -->
</div><!-- end feature -->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div><!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="CSS3" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-danger btn-block">Being updated</a>
</div><!-- end panel -->
</div><!-- end feaauture -->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div><!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="Bootstrap 3" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-info btn-block">Being updated</a>
</div><!-- end panel -->
</div><!-- end feaauture -->
</div><!-- end features -->
<div class="row" id="moreInfo">
<div class="col-sm-6">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab"><strong>Introducing our 'Your Roof Now Portal' </strong><br></h4>-Another first for our customers.</a></li>
<li><a href="#tab2" data-toggle="tab">'Water Shortage Update'</a></li>
</ul>
<div class="tab-content>
<div class="tab-pane active" id="tab1">
<img src="images/untitled-20.png" class="thumbnail pull-left img-responsive text-center"> <small>As a customer you'll automatically recieve access to 'Your Roof Now'.</small>
<small><br>With 'Your Roof Now' while the surface of your concrete or terra-cotta roof tiles is being restored you can monitor the restoration process by logging onto your account. Whether your half way around the world doing business, or taking a vacation. At home or at work, via laptop, tablet, or smartphone, you'll see the changes, any time of day, anywhere you are.</small> You know what they say...seeing is believing!<br><p>Call today and discover how easy it is. 1-855-336-6772</p>
</div><!-- end tab-pane -->
<div class="tab-pane" id="tab2">
<h4>More about water restrictions </h4>
<p>In the event that water restrictions are in place, cleaning with water is permitted
when done so for the purpose of painting or surface treatments. We take pride in our work and in providing our customers with the information they need when they need it. Click the link below for current water restrictions in the lower mainland.</p>
<hr>
<a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Vancouver Water Restriction Table </a>
<div class="modal fade" id="myModal">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div><!--end modal-header -->
<div class="modal-body">
<h4>Greater Vancouver Water Restriction Plan.</h4>
<p>Guidelines we follow.</p>
<a href="#" class="btn btn-danger pop" data-toggle="popover" data-placement="top" data-original-title="Current Restriction" data-content="Level 1">Click for current water restriction level</a>
<img src="images/gvrd.png" class="thumbnail pull-left img-responsive text-center">
<hr>
<div class="modal-footer">
<button class="btn btn-default pull-left" data-dismiss="modal" type="button">Close</button>
</div><!-- end modal-footer -->
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialogue -->
</div><!-- end myModal -->
</div><!-- end tab-pane -->
</div><!-- end tab-content :this is content tabs will toggle!-->
</div><!-- end tabbable -->
</div><!-- end col-sm-6 -->
<div class="col-sm-3">
<div class="well">
<h4>September 2015 <br>'Question of the Month'</h4>
<div class="list-group">
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Question</h4>
<p class="list-group-item-text">"Why do the eavestroughs on our house clog every eight months even though we have <strong>no</strong> trees on our property."</p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Answer</h4>
<p class="list-group-item-text">Moss builds up on roof tiles where there is shade (usually along the tile edges). Over time once the buildup reaches a certain size pieces will continuously break off and get washed down into the gutters when its windy or raining. Once you remove dirt and debris from your roof tiles you eliminate a major contributing source of dirt and debris being fed to your homes gutter system.</p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading"></h4>
<p class="list-group-item-text"></p>
</a>
</div><!-- end list-group-->
</div><!-- end well -->
</div><!-- end col-sm-3 -->
<div class="col-sm-3">
<div class="well">
<h4>October 2015 <br>'Question of the Month'</h4>
<div class="list-group">
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Question</h4>
<p class="list-group-item-text">"What do you mean when you say, 'Low Pressure' cleaning?"</p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Answer</h4>
<p class="list-group-item-text">'We use approximately 1600 psi when cleaning tiles. Other companies use between 3000 and 5000 psi. Some reputable tile manufacturers reccommend lower pressure when cleaning their tiles. </p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading"></h4>
<p class="list-group-item-text"></p>
</a>
</div><!-- end list-group-->
</div><!-- end well -->
</div><!-- end col-sm-3 -->
</div><!-- end moreInfo -->
<div class="row" id="moreCourses">
</div><!-- end moreCourses -->
</div><!-- end container -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>Copyright © 2015 {TerraCottaClean}</h6>
</div><!-- end col-sm-2 -->
<div class="col-sm-4">
<h6>About Us</h6>
<p>Located in Vancouver, Canada. Specializing in concrete tile, terra-cotta tile restoration.</p>
</div><!-- end col-sm-4 -->
<div class="col-sm-2">
<h6>Navigation</h6>
<ul class="unstyled">
<li><a href="#">Home</a></li>
<li><a href="..\public/clogin/login.php">Login Page</a></li>
<li><a href="form.php">Contact</a></li>
</ul>
</div><!-- end col-sm-2 -->
<div class="col-sm-2">
<h6>Gotta Clean Your TerraCotta?</h6>
<h6>1-855-336-6772</h6>
<div>
</div>
</div><!-- end col-sm-2 -->
</div><!-- end row -->
</div><!-- end container -->
</footer>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
<script>
$('#send_btn').popover({content: 'Thank you'},'click');
</script>
</body>
</html>
答案 0 :(得分：2)
这是一个示例（您需要将自定义CSS和JS文件添加到服务器中）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Website Title & Description for Search Engine purposes -->
<title>Some Title</title>
<meta name="description" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<style>
.carousel-indicators {
background-color: #;
}
.greenbutton,
btn {
border: 2px solid #0099cc;
color: #0099cc;
background: none;
}
span.glyphicon-home {
font-size: 1.6em;
color: orange;
}
.navbar {
height: 80px;
}
.navbar {
margin-bottom: 0px !important;
}
.carousel {
margin-top: 70px !important
}
.footer {
background-color: #F90;
font-color: white;
font-size: 12px;
padding: 15px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a,
.navbar-default .navbar-nav .open .dropdown-menu {
background-color: #ffffff;
color: #F90;
}
.navbar {
background-repeat: no-repeat;
border-bottom: 1px solid #186ACC;
box-shadow: 0px 1px 10px rgba(0.0.0.0.1);
border-radius: 0px;
}
.navbar-default {
background-color: #ffffff
}
</style>
</head>
<body>
<div class="container" id="main">
<div class="navbar navbar-default navbar-fixed-top navbar">
<div class="container-fluid">
<ul class="nav navbar-nav pull-left">
<li class="dropdown"> <a href "#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-home"></span> "Your Roof Now" <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="..\public/clogin/login.php"> <span class="glyphicon glyphicon-dashboard"></span> Log-In</a>
</li>
<li>
<a href="http//www.theweathernetwork.com"> <span class="glyphicon glyphicon-pencil"></span> Weather Network</a>
</li>
</ul>
</li>
</ul>
<!-- end nav pull-right -->
<div class="nav-collapse collapse navbar-responsive-collapse pull-right">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> <a href="#">Sorry, this section is being updated</a>
</li>
<li class="divider"></li>
<li>
<a href="#"></a>
</li>
<li class="divider"></li>
<li>
<a href="#"></a>
</li>
</ul>
</li>
</ul>
<!-- end dropdown-menu-->
</div>
<!--end nav-collapse -->
</div>
<!--end container -->
</div>
<!-- end navbar-->
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption"></div>
<!-- end carousel caption -->
</div>
<!-- end item -->
<div class="item " id="slide2">
<div class="carousel-caption"></div>
<!-- end carousel caption -->
</div>
<!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption"></div>
<!-- end carousel caption -->
</div>
<!-- end item -->
<div class="item" id="slide4">
<div class="carousel-caption"></div>
<!-- end carousel caption -->
</div>
<!-- end item -->
</div>
<!--carousel-inner -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div>
<!-- end myCarousel -->
<div class="row" id="bigCallout">
<div class="col-12">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Answer</h4>
<h4>'Monier Tile' and 'Columbia Tile'. If you own a tiled roof chances are your tiles are from one of these two manufacturers.
<p class="lead">In most cases we find matches for tiles that are no longer being manufactured but require replacement.</p>
Click the 'x' to close</h4>
</div>
<!-- end alert -->
<!-- visible only on small devices -->
<div class="well well-small visible-sm"> <a href="tel:+1-855-336-6772" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"></span> 1-855-336-6772</a>
</div>
<!-- end well-small -->
<div class="well">
<div class="page-header">
<h2>Its ok. We Know A lot About Tile. <small>
<hr>
Which two tile brands are most commonly found on homes throughout the lower mainland? Click the answer button.</small></h2>
</div>
<!-- end page-header -->
<a href="" class="btn btn-small btn-warning" id="alertMe">Answer</a>
<hr>
<div> <a href="form.php" class="greenbutton btn btn-small btn-success btn-responsive text-center">Request Estimate</a>
<hr>
</div>
<div>
<p class="lead" style="text-center">Can't use the phone? -Submit a request for an estimate here instead!</p>
</div>
</div>
<!--end well -->
</div>
<!-- end column 12 this is the section right below carousel -->
</div>
<!-- end bigCallout -->
<div class="row" id="featuresHeading">
<div class="col-12">
<h4>We're making some improvements just below in order to better serve our customers.</h4>
<p class="lead">Sorry for any inconvenience. Please scroll down.</p>
</div>
<!-- end col-12 -->
</div>
<!-- end featuresHeading -->
<div class="row" id="features">
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div>
<!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="HTML5" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-warning btn-block">Being updated</a>
</div>
<!-- end panel -->
</div>
<!-- end feature -->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div>
<!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="CSS3" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-danger btn-block">Being updated</a>
</div>
<!-- end panel -->
</div>
<!-- end feaauture -->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div>
<!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="Bootstrap 3" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-info btn-block">Being updated</a>
</div>
<!-- end panel -->
</div>
<!-- end feaauture -->
</div>
<!-- end features -->
<div class="row" id="moreInfo">
<div class="col-sm-6">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab"><strong>Introducing our 'Your Roof Now Portal' </strong><br>
-Another first for our customers.</a>
</li>
<li><a href="#tab2" data-toggle="tab">'Water Shortage Update'</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<img src="images/untitled-20.png" class="thumbnail pull-left img-responsive text-center" alt=""> <small>As a customer you'll automatically recieve access to 'Your Roof Now'.</small> <small><br>
With 'Your Roof Now' while the surface of your concrete or terra-cotta roof tiles is being restored you can monitor the restoration process by logging onto your account. Whether your half way around the world doing business, or taking a vacation. At home or at work, via laptop, tablet, or smartphone, you'll see the changes, any time of day, anywhere you are.</small> You
know what they say...seeing is believing!
<br>
<p>Call today and discover how easy it is. 1-855-336-6772</p>
</div>
<!-- end tab-pane -->
<div class="tab-pane" id="tab2">
<h4>More about water restrictions </h4>
<p>In the event that water restrictions are in place, cleaning with water is permitted when done so for the purpose of painting or surface treatments. We take pride in our work and in providing our customers with the information they need when
they need it. Click the link below for current water restrictions in the lower mainland.</p>
<hr>
<a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Vancouver Water Restriction Table </a>
<div class="modal fade" id="myModal">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<!--end modal-header -->
<div class="modal-body">
<h4>Greater Vancouver Water Restriction Plan.</h4>
<p>Guidelines we follow.</p>
<a href="#" class="btn btn-danger pop" data-toggle="popover" data-placement="top" data-original-title="Current Restriction" data-content="Level 1">Click for current water restriction level</a>
<img src="images/gvrd.png" class="thumbnail pull-left img-responsive text-center"
alt="">
<hr>
<div class="modal-footer">
<button class="btn btn-default pull-left" data-dismiss="modal" type="button">Close</button>
</div>
<!-- end modal-footer -->
</div>
<!-- end modal-body -->
</div>
<!-- end modal-content -->
</div>
<!-- end modal-dialogue -->
</div>
<!-- end myModal -->
</div>
<!-- end tab-pane -->
</div>
<!-- end tab-content :this is content tabs will toggle!-->
</div>
<!-- end tabbable -->
</div>
<!-- end col-sm-6 -->
<div class="col-sm-3">
<div class="well">
<h4>September 2015 <br>
'Question of the Month'</h4>
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Question</h4>
<p class="list-group-item-text">"Why do the eavestroughs on our house clog every eight months even though we have <strong>no</strong> trees on our property."</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Answer</h4>
<p class="list-group-item-text">Moss builds up on roof tiles where there is shade (usually along the tile edges). Over time once the buildup reaches a certain size pieces will continuously break off and get washed down into the gutters when its windy or raining. Once you
remove dirt and debris from your roof tiles you eliminate a major contributing source of dirt and debris being fed to your homes gutter system.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading"></h4>
<p class="list-group-item-text"></p>
</a>
</div>
<!-- end list-group-->
</div>
<!-- end well -->
</div>
<!-- end col-sm-3 -->
<div class="col-sm-3">
<div class="well">
<h4>October 2015 <br>
'Question of the Month'</h4>
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Question</h4>
<p class="list-group-item-text">"What do you mean when you say, 'Low Pressure' cleaning?"</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Answer</h4>
<p class="list-group-item-text">'We use approximately 1600 psi when cleaning tiles. Other companies use between 3000 and 5000 psi. Some reputable tile manufacturers reccommend lower pressure when cleaning their tiles.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading"></h4>
<p class="list-group-item-text"></p>
</a>
</div>
<!-- end list-group-->
</div>
<!-- end well -->
</div>
<!-- end col-sm-3 -->
</div>
<!-- end moreInfo -->
<div class="row" id="moreCourses"></div>
<!-- end moreCourses -->
</div>
<!-- end container -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>Copyright © 2015 {TerraCottaClean}</h6>
</div>
<!-- end col-sm-2 -->
<div class="col-sm-4">
<h6>About Us</h6>
<p>Located in Vancouver, Canada. Specializing in concrete tile, terra-cotta tile restoration.</p>
</div>
<!-- end col-sm-4 -->
<div class="col-sm-2">
<h6>Navigation</h6>
<ul class="unstyled">
<li><a href="#">Home</a>
</li>
<li><a href="..\public/clogin/login.php">Login Page</a>
</li>
<li><a href="form.php">Contact</a>
</li>
</ul>
</div>
<!-- end col-sm-2 -->
<div class="col-sm-2">
<h6>Gotta Clean Your TerraCotta?</h6>
<h6>1-855-336-6772</h6>
<div></div>
</div>
<!-- end col-sm-2 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</footer>
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
<script>
$('#send_btn').popover({
content: 'Thank you'
}, 'click');
</script>
</body>
</html>
在下面的第一个样式表CDN链接中，HREF后缺少等号。
<link rel="stylesheet" href"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
正确链接：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
*您还在CDN和本地服务文件之间加载了重复的Bootstrap CSS，JS和jQuery;你只需要一个或另一个（jQuery后备可能是例外）。
**作为旁注，您还有大量无效的HTML，最突出的是href"#"（同样，在HREF之后需要有一个等号。）
答案 1 :(得分：0)
旋转木马没有内容 - 尝试添加一些图像;）我通过Firebug运行它的一些内容，它工作正常。整理代码并修复其他人指出的所有错误并不会有什么坏处。
您还缺少以下文件，因此请删除链接或添加文件：
"NetworkError: 404 Not Found - /includes/css/bootstrap-glyphicons.css"
"NetworkError: 404 Not Found - /includes/css/styles.css"
"NetworkError: 404 Not Found - /includes/js/modernizr-2.6.2.min.js"
"NetworkError: 404 Not Found - /includes/js/script.js"
"NetworkError: 404 Not Found - /images/untitled-20.png"
答案 2 :(得分：0)
设置bootstrap css和javascript文件的路径。
.carousel-indicators {
foreground-color:#;
}
.carousel-indicators {
background-color:#;
}
.greenbutton, btn {
border:2px solid #0099cc;
color: #0099cc;
background:none;
}
span.glyphicon-home {
font-size:1.6em;
color:orange;
}
.navbar {height:80px; }
.navbar {
margin-bottom:0px !important;}
.carousel {
margin-top:70px !important
}
.footer {
background-color: #F90;
font-color: white;
font-size: 12px;
padding: 15px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open
.dropdown-menu {
background-color: #ffffff;
color:#F90;
}
.navbar {
background-repeat:no-repeat;
border-bottom: 1px solid #186ACC;
box-shadow: 0px 1px 10px rgba(0.0.0.0.1);
border-radius: 0px;
}
.navbar-default {
background-color: #ffffff
} <!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" id="main">
<div class="navbar navbar-default navbar-fixed-top navbar">
<div class="container-fluid">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
<a href"#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-home"></span> "Your Roof Now" <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="..\public/clogin/login.php"
<span class="glyphicon glyphicon-dashboard"></span> Log-In</a>
</li>
<li>
<a href="http//www.theweathernetwork.com">
<span class="glyphicon glyphicon-pencil"></span> Weather Network</a>
</li>
</ul>
</li>
</ul><!-- end nav pull-right -->
<div class="nav-collapse collapse navbar-responsive-collapse pull-right">
<ul class="nav navbar-nav">
<li class="active">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Sorry, this section is being updated</a>
</li>
<li class="divider"></li>
<li>
<a href="#"></a>
</li>
<li class="divider"></li>
<li>
<a href="#"></a>
</li>
</li>
</ul>
</li>
</li>
</ul><!-- end dropdown-menu-->
</div><!--end nav-collapse -->
</div><!--end container -->
</div><!-- end navbar-->
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
<div class="item " id="slide2">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
<div class="item" id="slide4">
<div class="carousel-caption">
</div><!-- end carousel caption -->
</div><!-- end item -->
</div><!--carousel-inner -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div><!-- end myCarousel -->
<div class="row" id="bigCallout">
<div class="col-12">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Answer</h4>
<h4>'Monier Tile' and 'Columbia Tile'. If you own a tiled roof chances are your tiles are from one of these two manufacturers. <p class="lead">In most cases we find matches for tiles that are no longer being manufactured but require replacement.</p> Click the 'x' to close</h4>
</div><!-- end alert -->
<!-- visible only on small devices -->
<div class="well well-small visible-sm">
<a href="tel:+1-855-336-6772" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"></span> 1-855-336-6772</a>
</div><!-- end well-small -->
<div class="well">
<div class="page-header">
<h2>Its ok. We Know A lot About Tile. <small><hr>Which two tile brands are most commonly found on homes throughout the lower mainland? Click the answer button.</small></h2>
</div><!-- end page-header -->
<a href="" class="btn btn-small btn-warning" id="alertMe">Answer</a>
<hr>
<div>
<a href="form.php" class="greenbutton btn btn-small btn-success btn-responsive text-center">Request Estimate</a> <hr>
</div>
<div>
<p class="lead"style="text-center">Can't use the phone? -Submit a request for an estimate here instead!</p>
</div>
</div><!--end well -->
</div><!-- end column 12 this is the section right below carousel -->
</div><!-- end bigCallout -->
<div class="row" id="featuresHeading">
<div class="col-12">
<h4>We're making some improvements just below in order to better serve our customers.</h4>
<p class="lead">Sorry for any inconvenience. Please scroll down.</p>
</div><!-- end col-12 -->
</div><!-- end featuresHeading -->
<div class="row" id="features">
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div><!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="HTML5" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-warning btn-block">Being updated</a>
</div><!-- end panel -->
</div><!-- end feature -->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div><!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="CSS3" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-danger btn-block">Being updated</a>
</div><!-- end panel -->
</div><!-- end feaauture -->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Under renovation</h3>
</div><!--end panel-heading-->
<img src="images/squaretwo200x200.jpg" alt="Bootstrap 3" class="img-circle img-responsive centre-block">
<p></p>
<a href="#" target="_blank" class="btn btn-info btn-block">Being updated</a>
</div><!-- end panel -->
</div><!-- end feaauture -->
</div><!-- end features -->
<div class="row" id="moreInfo">
<div class="col-sm-6">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab"><strong>Introducing our 'Your Roof Now Portal' </strong><br></h4>-Another first for our customers.</a></li>
<li><a href="#tab2" data-toggle="tab">'Water Shortage Update'</a></li>
</ul>
<div class="tab-content>
<div class="tab-pane active" id="tab1">
<img src="images/untitled-20.png" class="thumbnail pull-left img-responsive text-center"> <small>As a customer you'll automatically recieve access to 'Your Roof Now'.</small>
<small><br>With 'Your Roof Now' while the surface of your concrete or terra-cotta roof tiles is being restored you can monitor the restoration process by logging onto your account. Whether your half way around the world doing business, or taking a vacation. At home or at work, via laptop, tablet, or smartphone, you'll see the changes, any time of day, anywhere you are.</small> You know what they say...seeing is believing!<br><p>Call today and discover how easy it is. 1-855-336-6772</p>
</div><!-- end tab-pane -->
<div class="tab-pane" id="tab2">
<h4>More about water restrictions </h4>
<p>In the event that water restrictions are in place, cleaning with water is permitted
when done so for the purpose of painting or surface treatments. We take pride in our work and in providing our customers with the information they need when they need it. Click the link below for current water restrictions in the lower mainland.</p>
<hr>
<a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Vancouver Water Restriction Table </a>
<div class="modal fade" id="myModal">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div><!--end modal-header -->
<div class="modal-body">
<h4>Greater Vancouver Water Restriction Plan.</h4>
<p>Guidelines we follow.</p>
<a href="#" class="btn btn-danger pop" data-toggle="popover" data-placement="top" data-original-title="Current Restriction" data-content="Level 1">Click for current water restriction level</a>
<img src="images/gvrd.png" class="thumbnail pull-left img-responsive text-center">
<hr>
<div class="modal-footer">
<button class="btn btn-default pull-left" data-dismiss="modal" type="button">Close</button>
</div><!-- end modal-footer -->
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialogue -->
</div><!-- end myModal -->
</div><!-- end tab-pane -->
</div><!-- end tab-content :this is content tabs will toggle!-->
</div><!-- end tabbable -->
</div><!-- end col-sm-6 -->
<div class="col-sm-3">
<div class="well">
<h4>September 2015 <br>'Question of the Month'</h4>
<div class="list-group">
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Question</h4>
<p class="list-group-item-text">"Why do the eavestroughs on our house clog every eight months even though we have <strong>no</strong> trees on our property."</p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Answer</h4>
<p class="list-group-item-text">Moss builds up on roof tiles where there is shade (usually along the tile edges). Over time once the buildup reaches a certain size pieces will continuously break off and get washed down into the gutters when its windy or raining. Once you remove dirt and debris from your roof tiles you eliminate a major contributing source of dirt and debris being fed to your homes gutter system.</p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading"></h4>
<p class="list-group-item-text"></p>
</a>
</div><!-- end list-group-->
</div><!-- end well -->
</div><!-- end col-sm-3 -->
<div class="col-sm-3">
<div class="well">
<h4>October 2015 <br>'Question of the Month'</h4>
<div class="list-group">
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Question</h4>
<p class="list-group-item-text">"What do you mean when you say, 'Low Pressure' cleaning?"</p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading">Answer</h4>
<p class="list-group-item-text">'We use approximately 1600 psi when cleaning tiles. Other companies use between 3000 and 5000 psi. Some reputable tile manufacturers reccommend lower pressure when cleaning their tiles. </p>
<a href"#" class="list-group-item">
<h4 class="list-group-item-heading"></h4>
<p class="list-group-item-text"></p>
</a>
</div><!-- end list-group-->
</div><!-- end well -->
</div><!-- end col-sm-3 -->
</div><!-- end moreInfo -->
<div class="row" id="moreCourses">
</div><!-- end moreCourses -->
</div><!-- end container -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>Copyright © 2015 {TerraCottaClean}</h6>
</div><!-- end col-sm-2 -->
<div class="col-sm-4">
<h6>About Us</h6>
<p>Located in Vancouver, Canada. Specializing in concrete tile, terra-cotta tile restoration.</p>
</div><!-- end col-sm-4 -->
<div class="col-sm-2">
<h6>Navigation</h6>
<ul class="unstyled">
<li><a href="#">Home</a></li>
<li><a href="..\public/clogin/login.php">Login Page</a></li>
<li><a href="form.php">Contact</a></li>
</ul>
</div><!-- end col-sm-2 -->
<div class="col-sm-2">
<h6>Gotta Clean Your TerraCotta?</h6>
<h6>1-855-336-6772</h6>
<div>
</div>
</div><!-- end col-sm-2 -->
</div><!-- end row -->
</div><!-- end container -->
</footer>
答案 3 :(得分：0)
我在自己的网站上发现的问题是，您的首页（本例中为index.html）必须通过其完整路径链接CSS文件。
引用CSS文件的本地路径所需的所有其他文件（如果它们与CSS位于同一文件夹中，则只需链接至sample.css）。
供参考，该网站为imaginr.me。使用检查元素检查<head>。