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导致不同大小的页面

回答

相关问题