CSS導致不同大小的頁面

body { 
     background-color: #E0E0E0; 
    } 
    p { 
     background-color: white; 
    } 
    #content { 
     #header { 
      width: 350px; 
      height: 100px; 
      background-color: white; 
      position: absolute; 
      left: 500px; 
      top: 5px; 
      border-bottom: solid; 
      border-width: 2px; 
      border-color: #E0E0E0; 
      font-size: 30px; 
      font-family: calibri; 
     } 
     #footer { 
      padding-left: 20px; 
      width: 1495px; 
      height: 17px; 
      background-color: black; 
      color: white; 
      position: relative; 
      top: 10px; 
     } 

     .navbar-item { 
      /*This is a class to seperate the different links in the footer nav bar, it specifies a wdith for each item so they have some space between the links*/ 

      display: block; 
      float: left; 
      width: 350px; 
      height: 17px; 
      text-align: center; 
      background-color: black; 
      color: white; 
     } 
     :hover { 
      background-color: white; 
      color: blue; 
     }

上面的代碼爲我的主頁設置了正確的佈局，但是當我爲另一個頁面使用完全相同的CSS代碼時，出於某種原因，一切都變小了。我不明白爲什麼它可以爲一個頁面正確創建頁面，但是當完全相同的文檔用於另一個頁面時，它會改變頁面的外觀。所有使用的盒子都較小。CSS導致不同大小的頁面

來源

2016-09-18 user3257023

css似乎有點不對#content {永遠不會關閉，並且：hover本身不是一個有效的選擇器。你的意思是.navbar-item：懸停？您需要提供更多信息才能回答我的想法。就像是有其他的CSS覆蓋上述不同的頁面等。 – klikas

只有一個CSS文件被用於整個網站，我使用索引（主頁）設計它，這個頁面很好，正好是我想要的方式。但是當我爲另一頁使用完全相同的CSS文檔時，所有內容都變小了，縮小了大約25％，但是因爲它的文檔大小應該相同 – user3257023

如果沒有其他CSS影響頁面，則可以是外部或內聯，我不認爲有可能會發生這種情況，除了你錯誤地縮小瀏覽器外。我會修正CSS，以便選擇器正確關閉。（i..e #content {... 也許再次檢查是否沒有其他可能會影響你的元素的CSS（外部或內聯）你可以使用chrome開發工具調試你的頁面，方法是打開頁面鉻和尋找開發人員工具，如下所述： https://developer.chrome.com/devtools – klikas

試試這個：

body { 
    background-color: #E0E0E0; 
} 

p { 
    background-color: #fff; 
} 

#content, #header { 
    width: 350px; 
    height: 100px; 
    background-color: #fff; 
    position: absolute; 
    left: 500px; 
    top: 5px; 
    border-bottom: solid; 
    border-width: 2px; 
    border-color: #E0E0E0; 
    font-size: 30px; 
    font-family: calibri; 
} 

#footer { 
    padding-left: 20px; 
    width: 1495px; 
    height: 17px; 
    background-color: #000; 
    color: #fff; 
    position: relative; 
    top: 10px; 
} 

.navbar-item { 
/*This is a class to seperate the different links in the footer nav bar, it specifies a wdith for each item so they have some space between the links*/ 
    display: block; 
    float: left; 
    width: 350px; 
    height: 17px; 
    text-align: center; 
    background-color: #000; 
    color: #fff; 
} 

.navbar-item:hover { 
    background-color: #fff; 
    color: blue; 
}

由於您#header是你#content括號我只是假設你想同樣的樣式應用到每一個內部。

希望這是你的意思。

來源

2016-09-18 21:48:14

CSS導致不同大小的頁面

回答

相關問題