如何讓徽標在導航菜單中下降一點和其他建議

我是HTML和CSS的新手，但我正在學習。我試圖在練習this website之後爲我的網頁建模，現在我主要關注標題。我查看了源代碼，但CSS文件是不可讀的，因爲打開它時，所有內容都聚集在一起。如何讓徽標在導航菜單中下降一點和其他建議

我想弄清楚如何放下徽標，並使黑色填充頁面，以便我看不到背景圖像，而不是在我身體中的兩幅圖像之後。

這是我的頭部代碼：

header { 
    background-color:black; 
    width:150%; 
    margin-top:-10px; 
    margin-left:-10px; 
    margin-right:1000px; 
}

這裏是我的jsfiddle鏈接，看看我有什麼至今。我做了一堆複製粘貼來填充頁面，所以你可以滾動。（我知道它的醜陋，但它甚至還沒有接近被完成）

JSFiddle

來源

2014-06-13 DonJunior

至於背景而言，你應該刪除你的背景股利和以下內容添加到您的CSS：

background:url('http://stuffkit.com/wp-content/uploads/2011/07/Ama-Dablam-Nepal.jpg') no-repeat center center fixed; 
background-size:cover;

這應該使背景很好地覆蓋整個頁面。

現在對於越過邊緣的圖像，您需要將標題的高度設置爲小於圖像高度的高度。這應該會使圖像溢出，除非您專門將其設置爲隱藏。

HTML：

<header> 
    <img src="http://www.tikkani.com/images/wolf_LOGO_WHITE.jpg" /> 
    <ul> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact Us</a></li>   
     <li><a href="#">Shop</a></li> 
    </ul> 
</header>

CSS：

header { 
    background-color:black; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    margin:-20px; 
    padding:20px; 
    padding-bottom:0; 
    height:130px; 
} 
header ul{ 
    float:right; 
} 
header li { 
    display: inline-block; 
    line-height:200px; 
    font-size: 20px; 
    font-weight:bold; 
    padding-right:10px; 
    height:110px; 
} 
header li a { 
    text-decoration: none; 
    font-family: Verdana; 
    color:white; 
} 
header img { 
    width:150px; 
    padding-left:20px; 
}

這裏有一個小提琴：JSFiddle。我也清理了一些標籤。這並不完美。

更新：還修復了一些標題問題。有些瀏覽器會添加奇怪的邊距。這應該解決這個問題。 JSFiddle

來源

2014-06-14 01:05:27 ndm13

你真了不起，非常感謝你。我必須補充的一件事是，我看到你讓標題li漂浮在右邊，但是如果它向左漂浮，它會使圖片顛倒過來。我會嘗試和邊緣玩，看看是否有幫助。謝謝 – DonJunior

對不起，忘了我改變了！你只需要將圖像浮起來。 http://jsfiddle.net/KL329/ – ndm13

從HTML

<div id="background"> 
    <img src="http://stuffkit.com/wp-content/uploads/2011/07/Ama-Dablam-Nepal.jpg" class="stretch" alt="" /> 
</div>

刪除了這一點，它添加到CSS

body{ 
    background-color:black; 
}

入住這 http://jsfiddle.net/d2f9R/7/

I我對您的標誌的問題不明確

來源

2014-06-13 20:31:34 rkatta

我不小心拖動並挑選了一些內容，我在你要跟的jsfiddle發現了這一點：「

我的名字是鮑勃和我的衣服，所以這裏是我的網站

」 XD – 21CmOfPain

你看見參考的網站？這就是正在尋找的標誌。 – ndm13

非常感謝您的迴應！我想包含該背景圖片，但與Arcteryx網站上格式化的背景圖片類似 - 當您將頁面的下半部分向上滾動並且圖片似乎也在滾動時。徽標問題也是如此，如果您看到它是如何在arcteryx導航欄上格式化的，徽標會與菜單選項（商店，約會等）略有不同。 – DonJunior

如何讓徽標在導航菜單中下降一點和其他建議

回答

相關問題