div没有显示出来

时间:2015-06-28 15:24:04

标签: html css

我以同样的方式放了几个div,一切正常,除了这个

  .recommend{
    color:#F0F0F0;
    left:66px;
    border-radius:1em;
    width:600px;
    height:400px;
    top: 140px;
}

这是身体中的div,

 <body>
    <div class="recommend"></div>
 </body>

在浏览器中查看时根本不会显示。

如果有什么东西在干扰而且我无法看到

,这就是整个剧本
<style>
.aside{
  position: fixed;
  right: 66px;
  top:0px;
  margin-right: 0px;
  background-color: #F0F0F0;
  width: 108px;
  height: 35px;
  border-radius: 1em;
  padding-top: 5px;
  padding-left: 20px;
  display:inline-block;
}

.nav{
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    position:fixed;
    top:0px;
    background-color: #F0F0F0;
    height: 40px;
    width: 300px;
    border-radius:1em;
    right: 200px;
    padding-top:10px;
    padding-left: 20px;
    display:inline-block;
}
 .bigheader {
   font-family: Calibri;
   color: #FFF;
   position:fixed;
   top: 64px;
   left: 66px;  
}
.header{
        font-size:56px;
    text-decoration:underline;
}
.header1{
        color:#FFF;
    font-size:18px;
    font-style:italic;
    font-family:Calibri;
}
.textnav{
    font-size: 15px;
    font-family:Calibri;
    position:fixed;
}
.recommend{
    color:#F0F0F0;
    left:66px;
    border-radius:1em;
    width:600px;
    height:400px;
    top: 140px;
}

</style>
</head>

<body> 
   <div class="aside"><a href="some link" width="30" height="30" /></a>   </div>
   <div class="nav">
     <span class="textnav">Archive</span></div>
   <div class="bigheader">
      <span class="header">Some text</span>
      <br />
      <span class="header1">some more text</span></div>
      <div class="recommend"></div>
      <div class="body"></div>
      <div class="footer"></div>
   </body>
</html>

5 个答案:

答案 0 :(得分:2)

它没有显示,因为你拥有的只是一个没有内容的div。

div只是一个容器,您可以在其中添加HTML元素,例如输入标记或 textarea 标记。这样,元素可以组合在一起,然后样式可以应用于这些div部分。

您的页脚正文标记也不会显示在&#39;就像他们刚才一样,因为他们也只是里面没有其他HTML元素的div。

答案 1 :(得分:2)

Divs永远不可见。它们是用于封装HTML元素的语义元素。你永远不会看到一个div,把它想象成一个分隔页面内容的无形线。

答案 2 :(得分:1)

试试这个:

您缺少内容而未指定背景颜色,因此您的div不可见,并使用默认的正文颜色进行混合。

<html>
<head>
    <title> Recommend Div </title>
    <style>
    .recommend{
        background-color:#000;
        color:#FFF;
        left:66px;
        border-radius:1em;
        width:600px;
        height:400px;
        top: 140px;
    }
    </style>
</head>
<body>
    <div class="recommend">Hello World</div>
</body>
</html>

答案 3 :(得分:1)

页面上有div,但是你有两个问题。

首先,您在推荐div中没有​​内容,其次您的样式设置为将颜色显示为白色,并且您具有白色背景。只需删除color属性即可。

添加内容:

<div class="recommend">recommend section</div>

调整样式以删除白色属性:

.recommend{
    left:66px;
    border-radius:1em;
    width:600px;
    height:400px;
    top: 140px;
}

http://jsfiddle.net/he7djuuo/

答案 4 :(得分:0)

div不包含任何内容,因此无需显示任何内容。给CSS类一个背景色,你可能会看到div。