在徽标后面推两个div

时间:2016-09-01 03:18:27

标签: html css

我正在学习HTML和CSS。但这件事让我感到紧张。我已经尝试了一切来解决这个问题,但无法做到这一点。我正在练习一个示例网站。

主要问题我试图应用这个标识,我在两个“.divs”上方的矩形下面标记。对不起,我是新手,不知道如何正确。我在css下面附上我的编码。  我需要把这两个div放在这个图像下面。

enter image description here

我是新手,所以不知道如何粘贴代码。这件事是新的。请任何帮助将不胜感激。 enter link description here

1 个答案:

答案 0 :(得分:1)

好吧,如果没有将图像实际包含在codepen中,很难看到它。

我已经完成了你的代码并消除了语法错误/拼写错误等并使其变得更加清晰,所以希望它能为你效果,如果没有,如果你能在codepen上提供图像它会让它变得很多更容易。

HTML:

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

<div id="wrapper">

<header>
    <div class="headerbox1"></div>
</header>
    <div class="banner">
        <div class="headerbox2"></div>
    </div>
</div>

</body>
</html>

CSS:

body {
    background:#BCBCBC;
    }
#wrapper {
         height:2278px;
         width:1600px;
         background:#ABFF7E;
         margin: 0 auto;
        }
header{
         width:1600px;
         height:57px;
         background:#FF1D21;
         margin: 0 auto;
      }
.headerbox1{
           width:1600px;
           height:57px;
           background:#EDE8E9;
           margin: 0 auto;
       }
        }
.banner{
             width:1600px;
             height:559px;
             background:url(../../Images/alpha.jpg);
         }
.headerbox2{
            width:1600px;
            height:63px;
            background:rgba(0,0,0,0.4);
            margin: 0 auto;
        }
.image {
              width:219px;
              height:185px;
              background:url(../../Images/logo%20spotless.png);
              display: inline-block;
              margin: 0 auto;
          }

我看不出你在html中使用<td>标签的相关原因,特别是因为你没有在那里有一张桌子,所以我把它们拿出来了。 希望这有帮助,如果不是你需要提供图像。