CSS文件适用于一个页面但不适用于另一个页面?

时间:2016-05-25 23:45:04

标签: php html css

我的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;
&#13;
&#13;

CSS

&#13;
&#13;
.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;
&#13;
&#13;

Broken URL: http://www.pslink.ca/alliance/gov-rebate.php

HTML

&#13;
&#13;
<!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;
&#13;
&#13;

CSS

&#13;
&#13;
.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;
&#13;
&#13;

1 个答案:

答案 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-*查询。