2017-05-13 65 views
1

CSS文件將所有更改應用於我的medlemmer.html和我的cw.html,但不適用於我的index.php。是因爲它是一個.php文件還是什麼?我已經嘗試了不同的方法來鏈接PHP到CSS,但他們的作品。Css不適用於php文件

的index.php

<!DOCTYPE html> 
 
<!-- HTML5 Boilerplate --> 
 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
 

 
<head> 
 

 
<!--Import Google Icon Font--> 
 
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
     <!--Import materialize.css--> 
 
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> 
 

 
     <!--Let browser know website is optimized for mobile--> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 

 
    <meta charset="utf-8"> 
 
    <!-- Always force latest IE rendering engine & Chrome Frame --> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 

 
    <title>WinRAR - Hjem</title> 
 
    <meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site."> 
 
    <meta name="keywords" content="responsive, grid, system, web design"> 
 

 
    <meta name="author" content="www.grahamrobertsonmiller.co.uk"> 
 

 
    <meta http-equiv="cleartype" content="on"> 
 

 
    <link rel="shortcut icon" href="/favicon.ico"> 
 

 
    <!-- Responsive and mobile friendly stuff --> 
 
    <meta name="HandheldFriendly" content="True"> 
 
    <meta name="MobileOptimized" content="320"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
    <!-- Stylesheets --> 
 
    <link rel="stylesheet" href="css/html5reset.css" media="all"> 
 
    <link rel="stylesheet" href="css/col.css" media="all"> 
 
    <link rel="stylesheet" href="css/2cols.css" media="all"> 
 
    <style type="text/css"> 
 

 
    /* 
 
    ======================== 
 
    - Note: These styles are just to pretty the basic page up a bit. 
 
    You should ignore these when copying and pasting into your site 
 
    because your stylesheet should take care of making it look pretty! 
 
    ======================== 
 
    */ 
 
    body { padding:2em; font : 100%/1.4 'Roboto Condensed', Helvetica, sans-serif; 
 
} 
 
    h1 { font-size:2.2em; padding:0 0 .5em 0; } 
 
    h2 { font-size:1.5em; } 
 
    .header { padding:1em 0; } 
 
    .col { background: black; color: white; padding: 1% 0; text-align: center;} 
 

 
    </style> 
 

 
<link rel="stylesheet" href="demo.css"> 
 
<link rel="stylesheet" href="header-fixed.css"> 
 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
 
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'> 
 

 
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700" rel="stylesheet" type="text/css"> 
 

 
</head> 
 
<body> 
 

 
<header class="header-fixed"> 
 

 
    <div class="header-limiter"> 
 

 
     <h1><a href="#">Win<span>Rar</span></a></h1> 
 

 
     <nav> 
 
      <a href="index.php" class="selected">Hjem</a> 
 
      <a href="medlemmer.html">Medlemmer</a> 
 
      <a href="cw.html">ClanWars</a> 
 
      <a href="#">Doner</a> 
 
     </nav> 
 

 
    </div> 
 

 
</header> 
 

 
<!-- You need this element to prevent the content of the page from jumping up --> 
 
<div class="header-fixed-placeholder"></div> 
 

 
<div class="headbanner"> 
 
    <center> 
 
<div class="headBannerText"> 
 
WinRaR</center> 
 
</div> 
 
    
 
</div> 
 

 
<div class="infonav"> 
 
    <div class="infonavText"> 
 
     <center>Teamspeak 3: ts.winrarbw.no</center> 
 
    </div> 
 
</div> 
 

 
    <!-- HEADER SLUTTER HER --> 
 
    <center> 
 

 
    <br><br> 
 
         <div id="wrapper"> 
 

 
    <div id="right"> 
 

 
     <div class="parent"> 
 

 
      <div class="main"> 
 

 
       <p>Månedens klanspillere</p> 
 

 
       <div class="content" style="font-size: 19px"> 
 
       
 
        <img src="https://mcapi.ca/avatar/Steve/30/true"><b> Spiller1<br> 
 
        <img src="https://mcapi.ca/avatar/Steve/30/true"> Spiller2<br> 
 
        <img src="https://mcapi.ca/avatar/Steve/30/true"> Spiller3</b><br> 
 
        <i>Månedens klanspiller kommer snart!</i> 
 
        
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="parent"> 
 

 
      <div class="main"> 
 

 
       <p>Klan Info</p> 
 

 
       <div class="content"> 
 

 
        <b>Totale medlemmer:</b> 8<br> 
 
        <b>Åpnet:</b> 12.05.2017<br> 
 
        <b>ClanWars' spilt:</b> 0 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
    </div> 
 

 
    <div id="left"> 
 

 

 
         <?php include "fusion/upload/news.php"; ?> 
 
     
 
    
 
    </div> 
 
</div> 
 

 
<div class="footer"><div class="footerText"> 
 
<b>WinRar</b> Bedwars Clan | GommeHD & PvPHeroes<br> 
 
Copyright &copy; 2017 | Coded by Thesevs 
 
</div></div> 
 

 

 
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 

 
    $(document).ready(function(){ 
 

 
     var showHeaderAt = 150; 
 

 
     var win = $(window), 
 
       body = $('body'); 
 

 
     // Show the fixed header only on larger screen devices 
 

 
     if(win.width() > 600){ 
 

 
      // When we scroll more than 150px down, we set the 
 
      // "fixed" class on the body element. 
 

 
      win.on('scroll', function(e){ 
 

 
       if(win.scrollTop() > showHeaderAt) { 
 
        body.addClass('fixed'); 
 
       } 
 
       else { 
 
        body.removeClass('fixed'); 
 
       } 
 
      }); 
 

 
     } 
 

 
    }); 
 

 
</script> 
 

 
</center> 
 
</body> 
 

 
      
 
       </html>

的style.css

body { 
 
    background-color: #F2F2F2; 
 
} 
 

 
.userName { 
 
    font-size: 20px; 
 
} 
 

 
.user { 
 
    display: inline-block; 
 
    margin-left: 5%; 
 
    margin-top: 1%; 
 
} 
 

 
.body_large { 
 
    background-color: white; 
 
    height: auto; 
 
    margin-top: 1.5%; 
 
    color: black;} 
 

 
.box_text { 
 
    padding: 3%; 
 
    font-size: 14px; 
 
} 
 

 
.headbanner { 
 
    background-image: url("http://winrarbw.esy.es/winrar/banner.jpg"); 
 
    width: 100%; 
 
    height: 22%; 
 
} 
 

 
.headBannerText { 
 
    color: white; 
 
    font: normal 90px Cookie, Arial, Helvetica, sans-serif; 
 
    padding: 8% 0%; 
 
} 
 

 
.infonav { 
 
    background-color: #01A9DB; 
 
    box-shadow:0 1px 1px #ccc; 
 
    height: 40px; 
 
    color: #ffffff; 
 
    box-sizing: border-box; 
 

 
    -webkit-transition:top 0.3s; 
 
    transition:top 0.3s; 
 
} 
 

 
.infonavText { 
 
    color: white; 
 
    padding: 0.5%; 
 
    font:19px 'Roboto Condensed', Helvetica, sans-serif; 
 
} 
 

 
body { 
 
     font-family: 'Roboto Condensed', Helvetica, sans-serif; 
 
} 
 

 
#wrapper { 
 
     overflow: auto; 
 
     padding: 10px; 
 
} 
 

 
#right { 
 
    width: 25%; 
 
    float: right; 
 
    margin-right: 10%; 
 
} 
 

 
#left { 
 
    width: 50%; 
 
    float: left; 
 
    margin-left: 10%; 
 
} 
 

 
.parent { 
 
     text-align: center; 
 
     border: 1px solid #ccc; 
 
     background-color: #fff; 
 
     padding-top: 5px; 
 
     margin-bottom: 15px; 
 

 
} 
 

 
#left .parent { 
 
    margin-bottom: 18px; 
 
} 
 
     
 
.main { 
 
    background-color: #000; 
 
    padding-bottom: 0px; 
 
     box-shadow: 0px 2px 5px #888888; 
 

 
} 
 

 

 
.main p { 
 
    margin:0; 
 
    color: #fff; 
 
    padding: 10px 0; 
 
    font-size: 18px; 
 
    font-family: 'Roboto Condensed', Helvetica, sans-serif; 
 
} 
 

 
.main .content { 
 
    background-color: #fff; 
 
    padding: 16px; 
 
    font-size: 14px; 
 
    font-family: 'Roboto Condensed', Helvetica, sans-serif; 
 
} 
 

 
@media screen and (max-width: 990px) { 
 

 
    #right, #left { 
 
     float: none; 
 
     width: 100%; 
 
     margin-left: 0px; 
 
     margin-right: 0px; 
 
    } 
 
} 
 

 
.footer { 
 
    background-color: black; 
 
    height: 150px; 
 
    margin-top: 12%; 
 
} 
 

 
.footerText { 
 
    color: white; 
 
    font-family: 'Roboto Condensed', Helvetica, sans-serif; 
 
    font-size: 14px; 
 
    padding: 3% 0%; 
 
}

+0

瀏覽器緩存 並運行PHP文件應該是沒有什麼區別的嘗試。是相同的目錄中的HTML和PHP文件,所以你的CSS的相對路徑應該是相同的?瀏覽器控制檯中是否有錯誤?你能鏈接到網站/頁面嗎? –

+0

是的,http://winrarbw.esy.es/winrar。如果你看到index.php,「teamspeak 3:ts.winrar.no」字段是黑色的,但是如果你去了medlemmer.html或者cw.html,它是藍色的,因爲css正在那裏應用,但不是index.php –

回答

0

一切似乎是確定。檢查您的.css文件是否在有效路徑中,並確保問題不在Web瀏覽器端,清除其緩存或僅在少數Web瀏覽器中嘗試。

我檢查了我的電腦上的index.php文件的代碼,一切工作正常。

+0

我已經完成了你所說的,但仍然無法正常工作。 –

0

在PHP文件中添加CSS沒有任何不同的方法。只有PHP文件通過PHP Web服務器呈現,HTML文件不需要Web服務器。

使用Ctrl + F5刷新頁面,清除通過本地主機XAMPP或wampp

+0

我已經完成了所有工作,但仍然無法正常工作。 –