Question

我不知道如何解释这个，但也许在这种情况下，图片讲故事而不是我：

如果你看不清楚的话。我试图将徽标放在多个区域（标题，正文，内容）中，就像全局图像一样。

CSS，JavaScript，HTML，PHP有可能吗？

如果是，任何指南或提示？

Answer 1

您可以将徽标放在nav（本例中）部分内。徽标必须绝对定位，以便它不会弄乱其他元素的对齐方式，并且导航部分必须相对定位，因此徽标会被放置与导航容器相关（即使它是绝对的！）。你没有提供任何HTML /维度，所以我们几乎无法猜测，但这是它的外观，选择任意尺寸。

.nav {
   position: relative;
   height: 100px;
}
/* .logo is a child of .nav */
.logo {
   position: absolute;
   top: -50px;
   height: 200px;
   width: 200px;
   left: 0;
}

看一看：

body {
    color: #fff;
    text-align: center;
}
.header {
    height: 100px;
    background: red;
}

.nav {
    position: relative;
    height: 70px;
    background: blue;
}
.logo {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: -50px;
}
.body {
    height: 250px;
    background: purple;
}
.footer {
    height: 100px;
    background: lightblue;
}

<div class="header"> Header </div>
<div class="nav"> 
    <img src="http://www.udavinci.com/wp-content/uploads/2014/09/stackoverflow.png" class="logo"/>
    Nav 
</div>
<div class="body"> Body </div>
<div class="footer"> My Feet </div>

或者，您也可以将徽标放在body标记内的所有内容之外，然后使用position: absolute，并调整其位置（top，left等等。），根据相关要素的维度。

Answer 2

您可以将徽标放在header中，并使用以下位置

.your-logo-class {
    position: relative;
    top: 100px; // Adjust this value
}

Answer 3

你可以这样做：

body { margin: 0; padding: 0; background-color: black;}

#top { background-color: red; width: 100%; height: 100px; }

#nav { background-color: blue; width: 100%; height: 50px; }

#content { background-color: green; width: 400px; height: 500px;  margin: 0 auto;}

#footer { background-color: purple; width: 100%; height: 50px; }

<body>
    <div id="top">
    </div>
    <div id="nav">
        <img src="images/logo.png" style="padding: 10px;">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</body>

或者您可以将position: absolute;添加到img style=""，然后使用边距/填充。

Answer 4

嗯，徽标基本上是<img>标记，您可以将它们放在任何您喜欢的位置，只需将所有<img>标记放入一个类并按照您希望的方式设置它。

在多个区域内放置徽标;标题，正文，内容

4 个答案: