Question

我设计了一个布局，你可以看到here，有一个固定的标题，一个固定的菜单栏，两列内排列的内容，一个页脚，以及整个<body>周围的边框元件。它完全符合我的要求（使用Iceweasel 38.2和Internet Explorer 11进行测试）。

问题是：当我尝试将样式表移动到外部css文件时，它不再起作用了。结果看起来像this。

我无法理解为什么页面的外观会发生变化，因为样式和html完全相同。外部CSS不包含标签。

这是工作页面的源css / html：

<style>

  body    {
      height: 100%;
      color: black;
      background: white;
      border-width: 4px;
      border-style: solid;
      border-color: black;
      padding: 0;
      margin: 0 auto;
      max-width:1024px;
      }

  #left {       
      margin:0;
      margin-right: -4px;
      margin-top: 183px;
      padding:0;
      float:left;
      width:65%;
      background:red; 
      }

  #right {    
      margin:0;
      padding:0;
      margin-top: 183px;
      float:right;
      width:calc(35% + 4px);
      left: -4px;
      background:blue;
      }


  .boxleft { 
      padding-bottom: 10px;
      padding-left:20px;
      padding-right:20px;
      border-style: solid;
      border-color:black;
      border-top-width:0px;
      border-left-width:0px;
      border-right-width:4px;
      border-bottom-width:4px; 
      float:left;
      width:calc(100% - 44px); 
      }

  .title {      
      background-color:blue;   
      color:white;
      } 

  .rating {     
      background-color:red;  
      color:white;
      }

  .boxright {    
      padding:20px;
      border-style: solid;
      border-color:black;
      border-top-width:0px;
      border-left-width:4px;
      border-right-width:0px;
      border-bottom-width:4px; 
      float:right;
      width:calc(100% - 44px); 
      }

  .poster {     
      background-color:green;    
      color:white;
      } 

  #header { 
      background-image:url('Title background03.png');  
      background-repeat: no-repeat;
      position:fixed;
      width: 100%;
      max-width:1024px;
      margin: 0px auto;
      height:119px;
      top: 0;
      } 


  #footer { 
      background:white; 
      position:fixed;
      width:100%; 
      max-width:1024px;
      bottom: 0;
      padding: 0px;
      border-top-style: solid;
      border-bottom-style: solid;
      border-color:black;
      border-top-width:4px;
      border-bottom-width:4px;
      } 

  #menu {       
      background:black; 
      position:fixed;
      color:white;
      width:100%; 
      max-width:calc(1024px - 24px);             
      z-index:200;  
      margin: 0px auto;
      top:115px;
      height:64px;
      padding-top:12px;
      padding-left:24px;
      /* z-index: 1; */
      }

</style>    



<!DOCTYPE html>
<html>
  <head>       
  </head>

  <body>

<div id="header">
</div>

<p id="menu">menu1 - menu2 - menu3</p>
<div id="left">
  <div class="title boxleft">
    <p>title</p>
  </div>
  <div class="rating boxleft">
    <p>rating</p>
  </div>
</div>
<div id="right">
  <div class="poster boxright">
    <p>poster</p>
  </div>
</div>

<div id="footer">
  <P>copyright</P>
</div>  
  </body>

</html>

Answer 1

将此添加到您的脑袋

<link rel="stylesheet" type="text/css" href="style.css">

style.css是外部css文件的名称

编辑：对于边框不占用整个页面的问题，请尝试：

html {
    height: 100%;
}

BTW＆lt;风格＆GT;标签通常在头部而不是在＆lt;前面。！DOCTYLE html＆gt;标签

Answer 2

您是否考虑过CSS优先级规则或所谓的权重？

有一个深入的解释here。

另外，对this question的回答可能会对我有所帮助。

将内部样式表移动到外部

2 个答案: