使用CSS代替徽標圖像，我該如何......？

alt text http://i37.tinypic.com/a5et6f.png 使用CSS代替徽標圖像，我該如何......？

好吧，以上是幾乎所有我想要做的圖像。你會看到徽標背後的堅實背景是如何達到頁面的頂部（所以頂部沒有白色）......這就是我想要做的。

這是我的那部分HTML：

<body> 
<div id="wrapper"> 
    <div id="divider"> 
    <h1>NAME/SLOGAN</h1> 
    <ul class="underlinemenu"> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">ABOUT</a></li> 
    <li><a href="#">SUBSCRIBE</a></li> 
    <li><a href="#">FAQ</a></li> 
    <li><a href="#">CONTACT</a></li> 
    <li><a href="#">LOGIN</a></li> 
    </ul> 
    </div> <!-- end divider -->

我敢肯定，我可以只添加一個圖像，並將其定位爲有包裝，所以我<h1>標誌將超過它，但我認爲這將是非常低效的。

我的意思是隻有兩個純色，黑色和白色......所以不能用CSS來完成？

當我試圖做到這一點，我結束了一個「塊」...不是我想要的。頂部仍然是白色的。我希望它更像是說，如果有意義的話，有人從紙上剪下一塊（黑色的地方）。

來源

2010-08-05 MW2000

您可以發佈您的CSS爲體，包裝，分配器和H1 inline-block的？否則，我們都只是猜測。 – Emily 2010-08-06 19:51:46

你需要確保你沒有任何填充在身：

body { padding: 0; }

這將確保您的內容去一路到窗口的最頂部。

來源

2010-08-05 05:00:55

我會進一步擴展它，並說開始你的代碼：* {margin：0;填充：0; }。當你沒有使用默認的填充和邊距時，我總是發現設計更容易。 – riwalk 2010-08-05 05:04:16

如果沒有填充，則類似... h1.logo background-color：＃000000; } 應該工作嗎？ – MW2000 2010-08-05 05:05:59

@ MW2000：正確。 @ Stargazer712：我不會做'* {margin：0;填充：0; }'，我會使用「正確的」[CSS重置]（http://meyerweb.com/eric/tools/css/reset/）文件，因爲「*」解決方案可能會搞亂表單控件等。 – 2010-08-05 05:14:49

首先，檢查h1，#divider，＃wrapper或body是否有邊距或填充。如果是這樣，請將其設置爲0px。

標誌可以使用具有設置寬度/高度和背景圖像屬性的div來完成。

來源

2010-08-05 05:03:16

你的意思是背景顏色屬性？我不想使用圖像。 – MW2000 2010-08-05 05:08:27

@ MW2000，那麼這是另一種方法。 h1.logo {background-color：＃000000;顏色：#ffffff}將會訣竅。 – 2010-08-05 05:31:06

有一個全球性的空白復位：

* { 
    margin: 0; 
    padding: 0; 
}

默認邊距和補被刪除，你有沒有多餘的空白。唯一需要注意的是：您必須對網站上的每個空白點進行樣式設置（例如列表，標題，...）。

來源

2010-08-05 05:12:53 alopix

而不是使用<h1>LOGO</h1>爲您的標誌，有關使用<span class="logo">LOGO</span>

，並把這個在你的CSS文件如何？

.logo { 
margin:0; 
padding:0; 
background:black; 
color:white; 
font-size:2em; }

您可以添加寬度，高度和顯示器：太多，如果你要調整的標誌箱尺寸

來源

2010-08-06 19:37:15 KMW

哎。對不起，並不意味着冒犯了任何人 – KMW 2010-08-06 20:41:30

使用CSS代替徽標圖像，我該如何......？

回答

相關問題