我的CSS在我的所有页面上都正常工作,然后突然停止工作。它几乎似乎不再链接CSS文件了。奇怪的是我只是复制并粘贴我以前页面中的标题,工作正常。我在我的自定义CSS之前加载了bootstrap,这似乎很好。
工作网址:http://www.pslink.ca/alliance/interior-electrical.php
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Alliance Lighting</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- Font Awesome -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php include_once ("navbar.html"); ?>
<div class="interior-section">
<div class="interior-description">
<h1 class="service-h1">Interior Electrical</h1>
<img src="img/pic09.jpeg" class="service-image">
<p><span class="service-span">Are you using the right people for the right jobs?</span></p>
<p>In today’s economy are
you finding that your contractors are less interested in attending to your smaller jobs?
Alliance team will attend to your service calls form one light out to a full re-lamp
of your facility quickly and effectively.</p>
<p>Alliance is one of few companies that provides a FREE comprehensive lighting audit
and analysis for your business or commercial facility. We strive to educate our clients
about all the aspects of their LED lighting projects - we specifically explain all the
benefits of high efficiency, environmentally-friendly, lighting solutions.
Alliance is proud to be able to offer high-efficiency LED lights for virtually all lighting
applications, from retrofit and remodeling to brand new constructions.<p>
<p class="service-sub"><strong>Interior Electrical Services:</strong></p>
<ul class="int-list-1" id="service-list">
<li><i class="fa fa-check" aria-hidden="true"></i>General Service calls</li>
<li><i class="fa fa-check" aria-hidden="true"></i>LED Retrofits<li>
<li><i class="fa fa-check" aria-hidden="true"></i>Re-Lamp</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Service Programs</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Light Level Calculations</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Automated Lighting Control and Management Systems</li>
</ul>
<ul class="int-list-2" id="service-list">
<li><i class="fa fa-check" aria-hidden="true"></i>Re-Ballast</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Emergency Lighting</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Lighting Automation</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Lighting Design and Consulting</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Load Calculations and Reduction Planning</li>
</ul>
</div>
</div>
<div id="footer" class="footer-section">
<div class="container">
<p>ALLIANCE-LIGHTING.COM <i class="fa fa-copyright"></i>2016</p>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
&#13;
CSS
.interior-section {
background:#fff;
max- height:100%;
width:100%;
}
.interior-description {
position:absolute;
text-align:justify;
width:100%;
padding:0 10%;
padding-right:10%;
padding-bottom:5rem;
top:20%;
}
&#13;
Broken URL: http://www.pslink.ca/alliance/gov-rebate.php
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Alliance Lighting</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- Font Awesome -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php include_once ("navbar.html");?>
<div class="gov-section">
<div class="gov-description">
<h1 class="service-h1">Government Rebate</h1>
<img src="img/serv08.jpeg" class="service-image">
<p><span class="service-span">Alliance handles all government rebate programs offered by your local utility
company as well as a full ROI of your project.</span></P>
<p>Our knowledge of the current available incentives is unmatched
in the industry, the fact that easily places Alliance in a category of its own. We coordinate the process and
ensure that your plans follow the requirements set by the utilities to secure these incentives and return the expected ROI.
</p>
<p><strong>Working with Alliance Lighting means:</strong></p>
<ul class="gov-list-1">
<li><i class="fa fa-check" aria-hidden="true"></i>We handle EVERYTHING on your behalf</li>
<li><i class="fa fa-check" aria-hidden="true"></i>We put our years of experience and knowledge to work on your specific process</li>
</ul>
<p>Our experience has proven that providing improvements in lighting systems offers the biggest ROI for our customers. </p>
<p>Enjoy the benefits of lower utility bills while providing better lighting quality throughout your industrial complex
or building. And in addition to the primary benefit of lower monthly energy bills, optimal lighting feels better on
your eyes, not to mention the increase in the value of your property and worker productivity.
Alliance will work with you to arrive at the perfect energy efficient lighting fixtures and components for you.</p>
<p>By fulfilling your lighting needs with the best LED technologies, you’ll end each month with lower operating costs
and more money to invest in the profit-generating aspects of your business. Our onsite assessments begin with a thorough
inspection of your premises for potential savings and lighting improvement opportunities. Your helpful, friendly lighting
specialist will fill you in on the latest information about incentives, write-offs and rebates. </p>
<p>You’ll receive a breakdown of the most energy efficient industrial lamps, ballasts and bulbs applicable to your unique
needs and circumstances. From initial energy assessment to rebate advisement, Alliance implements the best solutions to
the unique needs of your business.</p>
</div>
</div>
<div id="footer" class="footer-section">
<div class="container">
<p>ALLIANCE-LIGHTING.COM <i class="fa fa-copyright"></i>2016</p>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
&#13;
CSS
.gov-section {
background:#fff;
max-height:100%;
width:100%;
}
.gov-description {
position:absolute;
text-align:justify;
width:100%;
padding:0 10%;
padding-right:10%;
padding-bottom:5rem;
top:20%;
}
&#13;
答案 0 :(得分:3)
如果您检查了第二页,则会看到 类型的样式被应用于/* "9" is a string, whereas 9 (without quotes) is a number */
console.log("9" === 9 ? 'Equal' : 'Not Equal!'); //Prints 'Not Equal!'
console.log(9 === 9 ? 'Equal' : 'Not Equal!'); //Prints 'Equal'
类,因为.gov-*
文件中存在问题。
在定义style.css
之前,您错过了结束}
。
.gov-*
你会注意到在定义所有@media only screen and (max-width: 500px) {
.service-h1 {font-size:2em;padding-bottom:0;}
.maintenance-image img {display:none;}
.maint-list-1 {width:100%;}
.maint-list-2 {clear:left;width:100%;}
} /* <---- Missing a closing } */
/******** SERVICE 3 END (EXTERIOR ELECTRICAL) *********/
/******** SERVICE 4 START (GOVERNMENT REBATE) **********/
.gov-section {
.....
类之前你也做了同样的事情。
您的.energy-*
课程没问题,因为您已正确关闭了上一个.interior-*
查询。