將徽標放在多個區域內;標題，正文內容

-3

我不知道如何解釋這一點，但也許在這種情況下，畫面講述故事，而不是我的：將徽標放在多個區域內;標題，正文內容

不久，如果你不能看到它。我試圖將徽標放在多個區域（標題，正文，內容）中，就像全局圖像一樣。

CSS，JavaScript，HTML，PHP可以嗎？

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

2015-04-23 Degu

您可以將您的徽標放在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等），根據相關元素的尺寸。

來源

2015-04-23 08:22:47

你可以把你的標誌在header和位置：

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

來源

2015-04-23 08:07:36 Bluety

-1

嗯，一個標誌基本上是一個<img>標籤，你可以把他們在任何你喜歡的，只要給所有那些<img>標籤類和以您想要的方式來設計風格。

來源

2015-04-23 08:07:52 odedta

你可以做這樣的：

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=""，然後玩的保證金/填充。

來源

2015-04-23 08:25:30

將徽標放在多個區域內;標題，正文內容

回答

相關問題